watchEffect 函数和 Vue3.0的生命周期

194 阅读1分钟

1.watchEffect函数和watch函数的区别是什么:

1.watch函数:既要指明监视的属性,也要指明监视的回调函数
2.watchEffect函数:不需要指明监视的属性,监视回调中用到那个属性就监视那个属性

2.watchEffect函数和computed函数有点类似:

1.computed函数注重的是计算的结果(回调函数的返回值) 所以必须要写返回值
2.watchEffect函数注重的是过程(回调函数的函数体) 所以不用写返回值

3. Vue3.0的生命周期:

1.在Vue3.0中生命周期函数名称只有最后两个发生了变化其它的与Vue2.0中的一样:
    beforeDestroy => beforeUnmount
    destroyed => unmounted
2.在Vue3.0中生钩子函数可以和Vue2.0一样用配置项书写在外面 但是更加建议使用3.0写法写在setup函数里面通过组合式API使用钩子函数
3.钩子函数写在setup函数中比写在配置项外面的优先级更加高,
4.如果要用组合式APT需要先引入钩子函数名称前面加on
5.需要注意的是在组合式API中没有beforeCreate和create 默认setup就是它两个
<script>
import { onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted } from "vue";
export default {
  name: "App",
  setup() {
    onBeforeMount(()=>{
      console.log("onBeforeMount");
    })
    onMounted(()=>{
       console.log("onMounted");
    })
    onBeforeUpdate(()=>{
       console.log("onBeforeUpdate");
    })
    onUpdated(()=>{
       console.log("onUpdated");
    })
    onBeforeUnmount(()=>{
       console.log("onBeforeUnmount");
    })
    onUnmounted(()=>{
       console.log("onUnmounted");
    })
  },
};
</script>