vue的watch和watchEffect详解

一、前言
options api中我们采用watch来监听data中的数据或者props中的参数变化。在componsiton api中我们采用watchEffectwatch来进行监听数据变化,并且watchEffect是自动收集依赖,watch则需要我们自己指定需要监听的数据。接下来我们将详细讲解一下composition api中的watchEffectwatch两个api
二、watchEffect的使用
vue的watch和watchEffect详解_第1张图片
watchEffect刚开始就会立即执行,并且会自动收集依赖,当其中的依赖项发生改变,都会执行回调函数。
watchEffect的停止监听
我们想一个例子,我们监听info对象中的age属性,当改变age到25时,则取消监听。
vue的watch和watchEffect详解_第2张图片
watchEffect选项中返回的函数是停止监听函数。
watchEffect清除副作用
vue的watch和watchEffect详解_第3张图片
watchEffect函数中需要传入一个回调函数,回调函数存在一个形参,该形参的调用可以传入一个回调函数可以清除副作用。
在setup中使用ref
vue的watch和watchEffect详解_第4张图片
如上面代码所示,我们首先先对ref传入内容为空,然后使用watchEffect来对变量进行监听。但是存在一个问题,就是watchEffect打印两次,因为首先当执行setup函数时,此时DOM并没有挂载,当执行完setup之后,dom挂载完毕,此时hEl的值更换,再次执行watchEffect的回调。
如果我们不想要执行第一个打印null,此时我们可以设置第二个参数,第二个参数是一个对象,设置{ flush:"post" },这样可以调整watchEffect的执行时机为DOM挂载之后,pre表示挂载之前,也就是默认值,sync这将强制效果始终同步触发。然而,这是低效的,应该很少需要。
vue的watch和watchEffect详解_第5张图片
此时只打印一个结果。
三、watch
componsition api中的watchoptions api中的watch一样,都是用来监听某一个属性发生变化,执行相关的回调。
watchEffectwatch进行对比,watch是懒执行的(也就是说第一次不执行)。执行时会将newValueoldValue传入函数。
watch的简单使用
vue的watch和watchEffect详解_第6张图片
watch监听对象类型
vue的watch和watchEffect详解_第7张图片
监听ref对象
vue的watch和watchEffect详解_第8张图片
监听reactive对象

vue的watch和watchEffect详解_第9张图片
数组对象
vue的watch和watchEffect详解_第10张图片
函数
vue的watch和watchEffect详解_第11张图片
四、watch选项
deep:是否深层监测
immediate:是否立即执行。
vue的watch和watchEffect详解_第12张图片我们监听普通对象,在使用deep:true时不能使用reactive对象,因为在源码内部如果判断是reactive对象时,默认会将deep设置为true。
在这里插入图片描述
vue的watch和watchEffect详解_第13张图片设置immediate:true就是当页面刚渲染时,就立即执行。此时oldValue为undefined。

你可能感兴趣的:(vue面试,vue.js,javascript,前端,watch,watchEffect)