Vue3 watch

137 阅读1分钟

image.png

  • 对比watchEffect
  • 1.懒执行副作用,也就是首次不执行,等到依赖改变的时候执行
  • 2.更加明确的显示了哪个state改变引发了副作用的执行

image.png

  • 3.可以访问state改变之前的值和之后的值

image.png

  • 4.watchEffect是自动收集所依赖的值,而watch需要自己手动指定,在第二个返回的函数中去执行副作用

image.png

  • 当依赖的值是一个ref的时候,第一个参数可以直接写成一个ref变量。reactive是不行的。

多个值的watch,同时监测多个值

image.png

+还能接收第三个参数

image.png

  • 也会返回一个stop函数

image.png