> 文章列表 > watch和watchEffect的区别

watch和watchEffect的区别

watch和watchEffect的区别

watch

  • watch显式指定依赖数据,依赖数据更新时执行回调函数
  • 具有一定的惰性lazy 第一次页面展示的时候不会执行,只有数据变化的时候才会执行(设置immediate: true时可以变为非惰性,页面首次加载就会执行)
  • 监视ref定义的响应式数据时可以获取到原值
  • 既要指明监视的属性,也要指明监视的回调

 一:watch侦听数组的变化

$watch() 监听某个值(双向数据绑定)的变化, 一旦发生变化, 就调用引号里的方法, 从而达到change事件监听的效果.

它的值包括选项的对象,选项对象有

  1. handler: 其值是一个回调函数, 即监听到变化时应该执行的函数
  2. deep: 其值是true或false, 确认是否深入监听.(一般监听时是不能监听到对象属性值的变化的,数组的值变化可以听到)
  3. immediate: 其值是true或false,确认是否以当前的初始值执行handler的函数.

immediate:true; 立即执行,当刷新页面时会立即执行一次handler函数

使用场景:

不加immediate:true; 在tab切换时,你已经选中了2-1,当你刷新页面时,选项会回到默认位置1-1

加immediate:true; 在tab切换时,你已经选中了2-1,当你刷新页面时,选项仍在2-1的位置

     watch(()=> 

组词大全