Vue3——watch监视

watch监视的作用

watch: 监视数据的变化，与Vue2中的watch作用相同。
特点：Vue3中的watch只能监视以下四种数据：

1. ref定义的数据
2. reactive定义的数据
3. 函数返回的一个值（getter函数）
4. 一个包含上述情况的数组
   语法：
          watch(参数1，参数2，参数3)
          参数1：被监视的数据
          参数2：监视的回调，有俩个参数，一个是newValue,一个是oldValue
          参数3：配置对象（deep(是否开启深度监视)、immediate(立即执行一次)等等....)

情况一

监视ref定义的基本类型数据：直接写数据名即可，监视的是其value的变化。

运行结果

代码

  <template>
    <div class="root">
      <h2>监视ref定义的基础数据类型</h2>
      <h3>n = {{ n }}</h3>
      <button @click="changeN">n加一</button>
    </div>
  </template>

<!--Vue 3 setup语法糖 -->
<script setup lang='ts' name="App">
import { ref, watch } from 'vue';

//ref定义的数据
let n = ref(10);

const changeN = () => {
  n.value += 1;

}
//监视 
/**
 * 语法结构：
 * watch(参数1，参数2，参数3)
 * 参数1：被监视的数据
 * 参数2：监视的回调，有俩个参数，一个是newValue,一个是oldValue
 * 参数3：配置对象（deep(是否开启深度监视)、immediate(立即执行一次)等等....)
 */
const stopWatch = watch(n, (newValue, oldValue) => {
  console.log("n发生了改变", newValue, oldValue);
  //做逻辑
  if (newValue > 20) {
    //停止监视
    stopWatch()
  }
})

</script>

<style scoped>
.root {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

.roles {
  background-color: rgb(211, 216, 218);
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

h2 {
  width: 1000px;
}

button {
  margin: 0 5px;
}

div {
  margin: 10px;
}
</style>

情况二

监视ref定义的对象类型数据

1. 直接写对象名，监视的是对象的地址
2. 监视对象内部的数据，需开启深度监视

注意点：

若修改的是ref定义的对象的属性，newValue和oldValue都是新值，因为他们是同一个对象。
若修改整个ref定义的对象，newValue是新值，oldValue是旧值，因为他们是不同对象。

运行结果

代码

情况三