vue3+watch

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)
})