vue3+vite+ts--watch和watchEffect监听使用

目录

一、watch的使用方法

二、watchEffect的使用方法

三、watch和watchEffect的区别

---

一、watch的使用方法

watch(监听的数据，监听数据的函数，监听配置对象(是否立即执行，是否开启深度监听))
watch(data, (newVal, oldVal) => {}, {immediate: true, deep: true})

1.单个监听

let watchDataRef1 = ref<string>('ref数据');
watch(watchDataRef1, (newVal, oldVal) => {
  console.log('newVal---', newVal); //newVal--- 修改的数据1
  console.log('oldVal---', oldVal); //oldVal--- ref数据
});

let watchDataRef1 = ref<string>('ref数据');
watch(()=>watchDataRef1, (newVal, oldVal) => {
  console.log('newVal---', newVal); //newVal--- 修改的数据1
  console.log('oldVal---', oldVal); //oldVal--- ref数据
});

2.监听多个

- 数组的形式返回的也是数组

let watchDataRef1 = ref<string>('ref数据');
let watchDataRef2 = ref<string>('ref数据');
watch([watchDataRef1, watchDataRef2], (newVal, oldVal) => {
  console.log('newVal---', newVal); //newVal--- ['修改的数据1', '修改的数据2']
  console.log('oldVal---', oldVal); //oldVal--- ['ref数据', 'ref数据']
});

 - 写多个watch

let watchDataRef1 = ref<string>('ref数据');
let watchDataRef2 = ref<string>('ref数据');
watch(watchDataRef1, (newVal, oldVal) => {
  console.log('newVal---', newVal); //newVal--- newVal--- 修改的数据1
  console.log('oldVal---', oldVal); //oldVal--- oldVal--- ref数据
});
watch(watchDataRef2, (newVal, oldVal) => {
  console.log('newVal---', newVal); //newVal--- newVal--- 修改的数据2
  console.log('oldVal---', oldVal); //oldVal--- oldVal--- ref数据
});

二、watchEffect的使用方法

- watchEffect刚开始就会立即执行，并且会自动收集依赖，当其中的依赖项发生改变，都会执行回调函数,watchEffect的停止监听

- 数据变化了就会再次执行watchEffect函数

let watchDataRef1 = ref<string>('ref数据');
watchEffect(() => {
  console.log(`变化了${watchDataRef1.value}`);//变化了修改的数据1
});

-  watchEffect接收一个副作用函数onInvalidate与flush

let watchDataRef1 = ref<string>('ref数据');
let stop = watchEffect(
  onInvalidate => {
    console.log(`变化了${watchDataRef1.value}`); //变化了修改的数据1
    onInvalidate(() => {
      console.log('清除副作用函数执行了！');
    });
  },
  {
    //'pre' 在组件更新更新前运行,默认为'pre'
    //'post'会在onBeforeUpdate之后执行 没有会在之前
    //'sync'强制效果始终同步触发。然而，这是低效的，应该很少需要。
    flush: 'sync'
  }
);

- 手动停止watchEffect的监听，需用一个变量来监听在，然后在调用就会关闭监听

let stop = watchEffect(
  onInvalidate => {
    console.log(`变化了${watchDataRef1.value}`); //变化了修改的数据1
    onInvalidate(() => {
      console.log('清除副作用函数执行了！');
    });
  },
  {
    //'pre' 在组件更新更新前运行,默认为'pre'
    //'post'会在onBeforeUpdate之后执行 没有会在之前
    //'sync'强制效果始终同步触发。然而，这是低效的，应该很少需要。
    flush: 'sync'
  }
);
stop();

三、watch和watchEffect的区别

1. 两者都可监听数据的属性变化
2. watch 既要指明监视的属性，也要指明监视的回调。 默认是惰性执行，监听源可以是一个具有返回值的 getter 函数，也可以直接是一个 ref
3. watchEffect 不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。会根据其中的属性，自动监听其变化。