学习课程:前端工程师2022版-vue基础入门
lesson38:watch 和 watchEffect 的使用和差异性
2-11 watch 和 watchEffect 的使用和差异性(2)-慕课网体系课 (imooc.com)
lesson39:生命周期函数的新写法
2-12 生命周期函数的新写法-慕课网体系课 (imooc.com)
lesson40:Provide,Inject,模版 Ref 的用法
2-13 Provide,Inject,模版 Ref 的用法-慕课网体系课 (imooc.com)
讲师:Dell老师
今天继续昨天的课程安排,学习了watch 和 watchEffect 的使用和差异性和生命周期函数的新写法以及Provide,Inject,模版 Ref 的用法。
watchEffect()也是监听器,会自动检测自己内部的代码,如果自己内部代码的某些依赖变化了,watchEffect方法就会自动执行。它会立即执行没有惰性,它也不能获取之前数据的值。
composition API中的生命周期函数
onBeforeMount(){}:vue实例即将挂载到页面上的时候执行,等价于beforeMount。
onMounted(){}:vue实例挂载到页面上之后执行,等价于mounted。
onBeforeUpdate(){}:当数据发生变化时执行,等价于beforeUpdate。
onUpdate(){}:当数据发生变化,同时页面完成更新后,会自动执行,等价于updated。
onBeforeUnMount(){}:组件从页面移除之前,会自动执行该函数,等价于beforeUnMount。
onUnmounted(){}:组件从页面移除之后,自动执行的函数,等价于unmounted。
onRenderTracked(){}:每次渲染之后,收集依赖的时候会自动执行的函数。
onRenderTriggered(){}:每次重新渲染被触发的时候,自动执行的函数。
provide():祖先组件,通过provide,向子孙组件注入依赖。
inject():孙子组件,通过inject,可以使用父组件传过来的值。
它们两个都需要先从vue实例中引用才可以使用。
ref()将基础类型的数据,转成响应式;配合ref属性,可用于获取dom节点。继续加油!