Vue3使用watch进行深度观察的操作方法_Vue.js

vue 3中的watch的深度观察如何设置？

在现代前端开发中，vue.js 是一个广为流行的框架，尤其是它的最新版本 vue 3。在 vue 3 中，一个重要的特性是 watch 选项，它允许开发者对数据变化进行观察。当你需要对一个复杂对象或数组进行深度观察时，配置 watch 是一个重要的环节。本篇博客将详细介绍如何在 vue 3 中使用 watch 进行深度观察，特别是在使用 setup 语法糖时。

什么是深度观察？

在 vue 中，深度观察是指观察到一个对象内部属性的变化。例如，假设我们有一个用户数据对象，如果我们只简单观察这个对象，当我们更新其中的一个属性时，观察者可能不会被触发。为了确保对对象内部所有属性的变化进行响应，我们需要设置深度观察。

使用 watch 进行深度观察

在 vue 3 中，watch 是一个响应式 api，用于观察 ref 或 reactive 对象的变化，并在变化时执行相应的回调函数。使用 setup 语法糖时，我们可以很方便地进行深度观察。

基础示例

以下是一个简单的 vue 3 组件示例，展示如何通过 watch 监听一个响应式对象的变化。

<template>
  <div>
    <h2>user information</h2>
    <label>
      name:
      <input v-model="user.name" />
    </label>
    <label>
      age:
      <input v-model="user.age" />
    </label>
    <pre>{{ user }}</pre>
  </div>
</template>

<script setup>
import { reactive, watch } from 'vue';

const user = reactive({
  name: 'john doe',
  age: 30,
});

// 深度观察 user 对象
watch(user, (newval, oldval) => {
  console.log('user information changed:', newval);
}, {
  deep: true // 设置为深度观察
});
</script>

代码解析

在上述代码中，我们首先导入 reactive 和 watch 函数，并创建了一个响应式对象 user。user 对象包含 name 和 age 两个属性，我们通过 v-model 指令将这两个属性绑定到输入框中。

接下来，我们使用 watch 对 user 进行观察。当 user 对象内部的任何属性发生变化时，提供的回调函数将自动执行，输出新的和旧的值。在这里，我们通过设置 deep: true 来实现深度观察。

深入探索

假设我们扩展 user 对象，增加一个嵌套属性，比如 address。

<template>
  <div>
    <h2>user information</h2>
    <label>
      name:
      <input v-model="user.name" />
    </label>
    <label>
      age:
      <input v-model="user.age" />
    </label>
    <label>
      address:
      <input v-model="user.address.street" placeholder="street" />
      <input v-model="user.address.city" placeholder="city" />
    </label>
    <pre>{{ user }}</pre>
  </div>
</template>

<script setup>
import { reactive, watch } from 'vue';

const user = reactive({
  name: 'john doe',
  age: 30,
  address: {
    street: '',
    city: '',
  },
});

// 深度观察 user 对象
watch(user, (newval, oldval) => {
  console.log('user information changed:', newval);
}, {
  deep: true
});
</script>