Vue3 watch监视和watchEffect函数

Vue3 中的watch使用效果和Vue2 中配置watch配置项的使用效果是一致的。

使用watch监视之前，需要先对watch进行引入。

import {watch} from 'vue';

一、监视一个ref对象

以下情况只适用于监视一个ref对象。

watch(监视对象, (newValue, oldValue) => {  // 监视操作  }, {  // 配置项  })

配置项中可以开启两个配置项：

1. immediate  是否初始化时对监视属性进行一次监听。

2. deep  是否开启深度监视。

使用ref定义的数据一般都是普通数据类型，不需要开启深度监视。

 

setup() {
  let num1 = ref(0);

  watch(num1, (newValue, oldValue) => {
    console.log(`num1从${oldValue}变为了${newValue}`);
  })

  return {
    num1,
  };
},

如果我们监视的是一个传入值为对象类型的ref 的对象，这种情况下我们是不能对该对象进行监听的，两种解决方法：

1. 使用.value 对数据进行监听，因为ref 对象的value值为一个reactive 对象