watch—vue3
是一个惰性,所谓惰性,就是被动的去进行调用,而不是主动的去进行触发,可以通过使用immediate来等进行立即执行调用
如何在初始阶段进行触发呢?
了解到watch中的参数
watch(参数一:监听的数据,参数二:回调函数()=>{编辑代码},参数三:option?用于执行一些配置选项)
参数一:是在setup的语法糖中定义的一个数据,
通过ref进行普通的响应式数据,例如字符串,数字类型等
通过reactive进行复杂数据的响应式数据,例如对象,数组等
通过参数一中的数据进行监听,来判断是否需要触发,
参数二:是来进行一个回到函数,当监听到数据在发生变化 到时候,就会去执行这个回调函数。其中第一个参数是新变化的值,第二个是以前的值,这个是在普通的数据进行变化,当复杂的数据进行变化的时候,可以通过数组的方法进行参数定义,那么在第一个参数是以数组进行展示,并且都是新变化的值,第二个参数是以前的值 ,例如
const a=ref(1)
const b=reactive({a:1111})
watch([a,()=>b.a],([onenew,twonew],[oneold,twoold])=>{
console.log('新'+onenew,'旧'+oneold)
console.log('新'+twonew,'旧'+twoold)
},{immediate:true})
参数三:就是我们在上面提到的一些配置的问题
第一个是immediate:是在watch在组件进行创建完成之后立即执行,在以上的代码中使用对象的形式进行使用。
第二个是deep:在默认的情况下,监听一个对象或者是数组进行变化的监听的时候,不会往其内部去监听变化,如果我们想要了解更多的变化,就可以使用deep进行深度监听。
第三个是flush:指的是我们进行回到函数中,应该怎么样去执行。在什么时候去执行。
其中flush的值有:
- async: 同步下执行代码
- pre:在数据变化之前执行回调函数
- post:在数据变化完成之后执行回调函数,但是必须在所以依赖都更新完成之后才可以执行。
const a=ref(1)
const b=reactive({a:1111})
watch([a,()=>b.a],([onenew,twonew],[oneold,twoold])=>{
console.log('新'+onenew,'旧'+oneold)
console.log('新'+twonew,'旧'+twoold)
},{flush:'sync'})
进行一个扩展watchEffect:
并不是惰性,非惰性,一旦运行就会立即执行,只能访问到最新的数据,不能访问到旧数据。
watchEffect其实也是一个侦听器,也是一个副作用函数,
但是当我们需要监听一个对象的时候,以及引用数据类型的时候,不需要具体到某一个属性,一旦运行就会立即执行,当卸载的时候就会立即停止。
注意:只是依赖项不需要某一个属性,也不需要参数,但是在进行输出的时候需要具体到某一个属性
//通过触发响应式数据进行触发监听,
const c=reactive({
a: {
name: 'zhangsan',
agge: 18
}})
watchEffect(()=>{
console.log('c中的a的属性值'+c.a.agge)
})