Vue3 watch 监视属性

• 作用：监视数据的变化（和Vue2中的watch作用一致）
• 特点：Vue3中的watch只能监视以下四种数据：

1. ref定义的数据。
2. reactive定义的数据。
3. 函数返回一个值（getter函数）。
4. 一个包含上述内容的数组。

我们在Vue3中使用watch的时候，通常会遇到以下几种情况：

ref定义的基本类型

<template>
  <div class="person">
    <h2>当前求和{{ sum }}</h2>
    <button @click="changeAddOne">点击加一</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { computed,watch, ref, watchEffect } from 'vue'

// 数据
let sum = ref(0);

// 方法
function changeAddOne() {
  sum.value++;
}

// 监视 watch(谁，回调函数)
watch(sum, (newValue, oldValue) => {
  console.log('sum发生变化了', newValue, oldValue);
});
</script>

watch监视里面的ref数据不需要.value。

主动停止监视：

<template>
  <div class="person">
    <h2>当前求和{{ sum }}</h2>
    <button @click="changeAddOne">点击加一</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { computed,watch, ref, watchEffect } from 'vue'

// 数据
let sum = ref(0);

// 方法
function changeAddOne() {
  sum.value++;
}

// 监视 watch(谁，回调函数)
const stopWatch = watch(sum, (newValue, oldValue) => {
  console.log('sum发生变化了', newValue, oldValue);
  if(newValue >= 10) {
    stopWatch();
  }
});
</script>

ref定义的对象数据

监视ref定义的【对象类型】数据：直接写数据名，监视的是对象的【地址值】，若想监视对象内部的数据，要手动开启深度监视。

注意：

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

<template>
  <div class="person">
    <h2>Person</h2>
    <p>姓名：{{ person.name }}</p>
    <p>年龄：{{ person.age }}</p>
    <button @click="changeAge">年龄+1</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { computed,watch, ref, watchEffect } from 'vue'

// 数据
let person = ref({
  name: '张三',
  age: 18
});
// 方法
function changeAge() {
  person.value.age++;
}

// 监视 watch(谁，回调函数)
// 监视的是对象的地址值，若想监视对象内部的属性，需要手动开启深度监视 - deep: true
watch(person, (newVal, oldVal) => {
  console.log('watch:', newVal, oldVal);
}, {deep: true, immediate: true});
</script>

watch的参数：

• 第一个参数：被监视的数据
• 第二个参数：监视的回调
• 第三个监视：配置对象(deep, imediate)

reactive定义的对象数据

reactive默认监视开启深度监视。

<template>
  <div class="person">
    <h2>Person</h2>
    <p>姓名：{{ person.name }}</p>
    <p>年龄：{{ person.age }}</p>
    <button @click="changeAge">年龄+1</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { computed,watch, ref, watchEffect, reactive } from 'vue'

// 数据
let person = reactive({
  name: '张三',
  age: 18
});
// 方法
function changeAge() {
  person.age++;
}

// 监视 watch(谁，回调函数)
// 默认开始深度监视 
watch(person, (newVal, oldVal) => {
  console.log('watch:', newVal, oldVal);
}, {immediate: true});
</script>

监视ref/reactive定义的对象类型中某一个属性

监视ref或reactive定义的【对象类型】数据中的某个属性，注意点如下：

1. 若该属性值不是【对象类型】，需要写成函数形式。
2. 若该属性值是依然是【对象类型】，可直接编，也可写成函数，建议写成函数。

结论：监视的要是对象里的属性，那么最好写函数式，注意点：若是对象监视的是地址值，需要关注对象内部，需要手动开启深度监视。

<template>
  <div class="person">
    <h2>Person</h2>
    <p>姓名：{{ person.name }}</p>
    <p>年龄：{{ person.age }}</p>
    <button @click="changeAge">年龄+1</button>
    <p>车：{{ person.car.c1 }}</p>
    <button @click="changeCarC1">修改第一量车</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { computed,watch, ref, watchEffect, reactive } from 'vue'

// 数据
let person = reactive({
  name: '张三',
  age: 18,
  car:{
    c1:'宝马',
    c2:'奔驰'
  }
});
// 方法
function changeAge() {
  person.age++;
}
function changeCarC1() {
  person.car.c1 += '---';
}
// 监视 watch(谁，回调函数)
// 默认开始深度监视 
watch(() => {
  return person.age
}, (newVal, oldVal) => {
  console.log('age:', newVal, oldVal);
});
</script>

<template>
  <div class="person">
    <h2>Person</h2>
    <p>姓名：{{ person.name }}</p>
    <p>年龄：{{ person.age }}</p>
    <button @click="changeAge">年龄+1</button>
    <p>车：{{ person.car.c1 }}</p>
    <button @click="changeCarC1">修改第一量车</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { computed,watch, ref, watchEffect, reactive } from 'vue'

// 数据
let person = reactive({
  name: '张三',
  age: 18,
  car:{
    c1:'宝马',
    c2:'奔驰'
  }
});
// 方法
function changeAge() {
  person.age++;
}
function changeCarC1() {
  person.car.c1 += '---';
}
// 监视 watch(谁，回调函数)
// 默认开始深度监视 
watch(() => {
  return person.car
}, (newVal, oldVal) => {
  console.log('car:', newVal, oldVal);
}, {deep:true});
</script>

多个数据？

<template>
  <div class="person">
    <h2>Person</h2>
    <p>姓名：{{ person.name }}</p>
    <p>年龄：{{ person.age }}</p>
    <button @click="changeAge">年龄+1</button>
    <p>车：{{ person.car.c1 }}</p>
    <button @click="changeCarC1">修改第一量车</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { computed,watch, ref, watchEffect, reactive } from 'vue'

// 数据
let person = reactive({
  name: '张三',
  age: 18,
  car:{
    c1:'宝马',
    c2:'奔驰'
  }
});
// 方法
function changeAge() {
  person.age++;
}
function changeCarC1() {
  person.car.c1 += '---';
}
// 监视 watch(谁，回调函数)
// 默认开始深度监视 
watch(() => {
  return [person.car, person.age]
}, (newVal, oldVal) => {
  console.log('car:', newVal, oldVal);
}, {deep:true});
</script>