【备战春招】第十七天+vue复习

学习课程：前端工程师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节点。

继续加油！