前端培训丁鹿学堂：vue3之watchEffect和生命周期函数总结

vue3中的watchEffect

watchEffect是vue3新增的监听函数。它的参数是一个函数。
watchEffect不用指定监听某个属性，它的回调函数中使用了哪个属性，当这个属性改变时，就会触发watchEffect 的回调。可以同时监听多个。只要你在回调中使用了就会监听。
在页面初始化的时候watchEffect会执行一次。

 let num1 = ref(0)        
watchEffect(()=>{
   let num = num1.value
   console.log('数据改变了，watchEffect触发',num)
})
1
2
3
4
5

watch和watchEffect的比较

1.watch参数有两个，一个是要监听的属性，一个是执行的回调，而watchEffect参数只有回调，它会监听回调中出现的属性
2.可以把watchEffect类比computed去理解，但是conputed计算属性关心的是返回值（结果），watchEffect更注重过程。

vue3中的生命周期钩子函数

vue3中的生命周期钩子函数的使用方式有两种。
1.通过配置项的形式，和vue2一样，此时生命周期函数和setup函数是并列的。
vue3和vue2的钩子函数相同的是创建前后（beforeCreate created），挂载前后（beforeMount mounted），更新前后（ beforeUpdate updated），不一样的是销毁前后（beforeUnmount unmounted）

2.通过组合式api的方式，在setup里面使用生命周期钩子函数
组合式api中没有beforeCreate和created的概念，setup就相当于beforeCreate created的钩子了。
使用方式：1 引入，
2 在setup中以函数形式使用即可。

import {onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'
export default {
    setup () {
        onBeforeMount(()=>{})
        onMounted(()=>{})
        onBeforeUpdate(()=>{})
        onUpdated(()=>{})
        onBeforeUnmount(()=>{})
        onUnmounted(()=>{})
        return {}
    }
}
1
2
3
4
5
6
7
8
9
10
11
12