watch和watchEffect的区别
watch
- watch显式指定依赖数据,依赖数据更新时执行回调函数
- 具有一定的惰性lazy 第一次页面展示的时候不会执行,只有数据变化的时候才会执行(设置immediate: true时可以变为非惰性,页面首次加载就会执行)
- 监视ref定义的响应式数据时可以获取到原值
- 既要指明监视的属性,也要指明监视的回调
一:watch侦听数组的变化
$watch() 监听某个值(双向数据绑定)的变化, 一旦发生变化, 就调用引号里的方法, 从而达到change事件监听的效果.
它的值包括选项的对象,选项对象有
- handler: 其值是一个回调函数, 即监听到变化时应该执行的函数
- deep: 其值是true或false, 确认是否深入监听.(一般监听时是不能监听到对象属性值的变化的,数组的值变化可以听到)
- immediate: 其值是true或false,确认是否以当前的初始值执行handler的函数.
immediate:true; 立即执行,当刷新页面时会立即执行一次handler函数
使用场景:
不加immediate:true; 在tab切换时,你已经选中了2-1,当你刷新页面时,选项会回到默认位置1-1
加immediate:true; 在tab切换时,你已经选中了2-1,当你刷新页面时,选项仍在2-1的位置
watch(()=>