8. watch和watchEffect

1.watch

watch()默认是懒侦听的，即仅在侦听源发生变化时才执行回调函数

1. 第一个参数是侦听器的源。有以下几种：
   

• 一个函数，返回一个值
• 一个ref
• 一个响应式对象
• 或是由以上类型的值组成的数组

2. 第二个参数是在发生变化时要调用的回调函数。这个回调函数接受三个参数：新值、旧值，以及一个用于注册副作用清理的回调函数。该回调函数会在副作用下一次重新执行前调用，可以用来清楚无效的副作用，例如等待中的异步请求。当真挺多个来源时，回调函数接受两个数组，分别对应来源数组中的新值和旧值。
3. 第三个可选的参数是一个对象

• immediate：在侦听器创建时立即触发回调。第一次调用的旧值是undefined
• deep：如果源是对象，强制深度遍历，以便在深层级变更时触发回调
• flush：调整回调函数的刷新时机 (回调的触发时机)[https://cn.vuejs.org/guide/essentials/watchers.html#callback-flush-timing]
• onTrack / onTrigger：调试侦听器的依赖。参考调试侦听器。

// 当侦听多个来源时，回调函数接受两个数组，分别对应来源数组中的新值和旧值：
watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {
  /* ... */
})

// 当直接侦听一个响应式对象时，侦听器会自动启用深层模式
const state = reactive({ count: 0 })
watch(state, () => {
  /* 深层级变更状态所触发的回调 */
})


// 停止侦听器
const stop = watch(source, callback)
// 当已不再需要该侦听器时：
stop()

// watch监听ref和reactive的区别是，watch需要开启深度监视，才能监听到ref的深层的数据，reactive则不需要
let person = reactive({
  haed: {
    eyes: {
      howBig: 4,
    },
  },
  body: {
    leg: {
      lenth: 110,
    },
  },
});
watch(
  person,
  (newvalue, oldvalue) => {
    console.log("对象监听new:", newvalue);
    console.log("对象监听old:", oldvalue);
  },
);


// 如果只想监听 person 里面的其中一个 ,如 只需监听 person.body.leg.lenth 则如下
watch(()=>person.body.leg.lenth, (newvalue, oldvalue) => {
  console.log("对象监听new:", newvalue);
  console.log("对象监听old:", oldvalue);
});


const a = ref('aaa')
watch(
  a, 
  () => {
    console.log('a', a)
  }
)


const test = ref({
  name: 'zs'
})
watch(
  test, 
  () => {
    console.log('test', test)
  },
  {
    deep: true
  }
)

2.watchEffect高级监听器

立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行
watchEffect里面有一个回调函数 watchEffect(()=>{}) 将需要监听的值，直接塞进去就可
watchEffect是非惰性的，打开页面就会立即执行
返回值是一个用来停止该副作用的函数
默认情况下，侦听器将在组件渲染之前执行

• 第一个参数就是要运行的副作用函数
• 第二个参数是一个可选的选项，可以用来调整副作用的刷新时机或调试副作用的依赖

let msg = ref<string>("梅西");
let msg2 = ref<string>("内马尔");
 
watchEffect(() => {
  console.log("msg的值:", msg.value);
  console.log("msg2:", msg2);
})

// 停止侦听器
const stop = watchEffect(() => {})
// 当不再需要此侦听器时:
stop()

// 选项
watchEffect(() => {}, {
  flush: 'post',
  onTrack(e) {
    debugger
  },
  onTrigger(e) {
    debugger
  }
})