从Vue2转换到Vue3

这个方便的Vue2到Vue3的生命周期映射直接来自于Vue3 Composition API 文档，我认为这是一种最有用的方式来查看事情将如何变化，以及我们如何使用它们。

beforeCreate -> use setup()

created -> use setup()

beforeMount -> onBeforeMount

mounted -> onMounted

beforeUpdate -> onBeforeUpdate

updated -> onUpdated

beforeDestroy -> onBeforeUnmount

destroyed -> onUnmounted

errorCaptured -> onErrorCaptured

什么是Composition API

如果你还不知道，Vue3 Composition API 附带了一个 setup() 方法。此方法封装了我们的大多数组件代码，并处理了响应式，生命周期钩子函数等。

简而言之，Composition API使我们能够更好地将代码组织为更多的模块化功能，而不是根据属性的类型（方法，计算的数据）进行分离。

在旧的 beforeCreate 钩子函数之后和 created 的钩子函数之前立即调用 setup 方法。因此，我们不再需要这两个钩子，我们可以简单地将本应有的代码放在 setup() 方法中。

生命周期钩子的使用

与Vue3中的大多数功能一样，生命周期钩子是我们必须导入到项目中的东西，这是为了帮助使项目尽可能轻巧。

我们导入生命周期钩子的方式是这样的。

import { onMounted, onUpdated, onUnmounted } from 'vue'

Vue3中的钩子函数都在 setup() 中调用。computed，watch 可直接调用

<script lang="ts">
import { computed, ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onActivated, onDeactivated, onErrorCaptured,} from "vue";export default {setup() {onBeforeMount(() => {// ...});onMounted(() => {// ...});onBeforeUpdate(() => {// ...});onUpdated(() => {// ...});onBeforeUnmount(() => {// ...});onUnmounted(() => {// ...});onActivated(() => {// ...});onDeactivated(() => {// ...});onErrorCaptured(() => {// ...});},functionName() {const count = ref(0);const double = computed(() => {return count.value * 2;});},
};
</script>

watch

watch 接收两个参数，第一个参数是监听的属性，多个属性可传入数组，第二个参数是一个回调函数，回调函数有两个参数（newVal, oldVal）；当 watch 的第一个参数是一个数组时，newVal 与 oldVal 对应的也是数组形式，一一对应。

// 监听count
watch('count', (newVal, oldVal) => {console.log('newVal:', newVal)console.log('oldVal:', oldVal)
})
// 监听多个属性值
watch(['count', 'name'], (newVal, oldVal) => {console.log('newVal:', newVal) // 数组console.log('oldVal:', oldVal) // 数组
})

如果是需要监听定义在 reacitive 对象中的单一属性，需要通过函数返回值来进行监听

watch(() => data.count, (newVal, oldVal) => {console.log('newVal:', newVal)console.log('oldVal:', oldVal)
})

新的调试钩子函数

们还可以在Vue3中使用两个全新的钩子函数来进行调试。他们是：

onRenderTracked
onRenderTriggered

这两个事件都带有一个DebuggerEvent，它使我们能够知道是什么导致了Vue实例中的重新渲染。

export default {onRenderTriggered(e) {debugger// 检查哪个依赖项导致组件重新呈现}
}

原文链接：onmounted vue3_如何在Vue3中使用生命周期函数_weixin_39897392的博客-CSDN博客

vue3的生命周期函数相关推荐

vue3.0生命周期函数
什么是生命周期: vue中每个组件都是独立的,每个组件都有一个属于它的生命周期,从一个组件创建.数据初始化.挂载.更新.销毁,这就是一个组件所谓的生命周期. 在vue2.x中的生命周期为 before ...
Vue3 的生命周期函数
1.setup 取代 beforeCreate 和 created vue3的组合式 api 中,setup 中的函数执行相当于在选项 api 中的 beforeCreate 和 created 中执 ...
Vue3生命周期函数的那些事
前言这篇文章给大家介绍关于Vue3中生命周期函数的问题使用过Vue3的朋友都知道,随着 composition API 的引入,我们在使用钩子函数上也发生了一些改变 Vue3的生命周期函数下面告 ...
Vue3生命周期函数
Vue3生命周期函数与vue2的对比: Vue3的setup语法糖直接代替beforeCreate,Created:Destroy更名为Unmount:其他就是直接加on beforeCreate - ...
五十七、Vue中的八大生命周期函数
@Author:Runsen @Date:2020/10/15 什么是vue生命周期 Vue 实例从创建到销毁的过程,就是生命周期.也就是从开始创建.初始化数据.编译模板.挂载DOM-渲染.更新-渲染 ...
Vue3 composition-apisetup 生命周期
一. setup简单介绍 setup是组合Composition API中的入口函数,也是第一个要使用的函数.setup只在初始化时执行一次,所有的Composition API函数都在此使用.Com ...
Vue生命周期函数详解
生命周期图生命周期方法 var vm = new Vue({el: '#app',data: {msg:'ok'},methods: {show:function () {console.log(& ...
react生命周期函数
在react中,生命周期函数指的是组件在加载前,加载后,以及组件更新数据和组件销毁时触发的一系列方法.通常分为以下几类: 组件加载的时候触发的函数:constructor .componentWill ...
uniapp里的mounted_uni-app 生命周期函数执行顺序
{{message}} 点击 import { mapState, mapMutations } from 'vuex'; var key = 0; export default { data() { ...
小程序的生命周期函数？
onLoad Function 生命周期函数--监听页面加载 onReady Function 生命周期函数--监听页面初次渲染完成 onShow Function 生命周期函数--监听页面显示 on ...

vue3的生命周期函数