Vue3 学习笔记，如何使用 Watch 监听数据变化("Vue3教程：详解如何使用Watch高效监听数据变化")

原创

ithorizon 4周前 (10-19) 阅读数 21 #后端开发

Vue3教程：详解怎样使用Watch高效监听数据变化

一、概述

在Vue3中，Watch 是一个非常强势的功能，它允许我们监听数据的变化，并在数据变化时执行特定的操作。这对于响应式编程来说非常重要，可以帮助我们实现数据的实时更新和自动渲染。本文将详细介绍怎样在Vue3中使用Watch来高效监听数据变化。

二、基本使用

在Vue3中，我们可以使用 watch 函数来创建一个watcher对象，用于监听数据的变化。以下是一个基本的使用示例：


import { ref, watch } from 'vue';
const count = ref(0);
// 创建一个watcher对象，监听count的变化
watch(count, (newVal, oldVal) => {
  console.log(`count从${oldVal}变为${newVal}`);
});

在这个例子中，我们首先导入了 ref 和 watch 函数。然后创建了一个响应式数据 count，并使用 watch 函数来监听它的变化。当 count 的值出现变化时，会自动执行回调函数，打印出变化的旧值和新值。

三、监听多个数据源

Watch不仅可以监听单个数据源，还可以同时监听多个数据源。以下是一个监听多个数据源的示例：


import { ref, watch } from 'vue';
const count = ref(0);
const name = ref('张三');
// 创建一个watcher对象，同时监听count和name的变化
watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
  console.log(`count从${oldCount}变为${newCount}`);
  console.log(`name从${oldName}变为${newName}`);
});

在这个例子中，我们使用一个数组来传递多个数据源给 watch 函数。回调函数的参数也是一个数组，其中包含了所有数据源的新值和旧值。

四、监听对象属性

Watch不仅可以监听基本类型的数据，还可以监听对象属性的变化。以下是一个监听对象属性的示例：


import { ref, watch, reactive } from 'vue';
const person = reactive({
  name: '张三',
  age: 18
});
// 创建一个watcher对象，监听person对象的name属性
watch(() => person.name, (newName, oldName) => {
  console.log(`name从${oldName}变为${newName}`);
});

在这个例子中，我们使用了一个箭头函数来返回要监听的属性，这样就可以实现对对象属性的监听。注意，这里的 person 是通过 reactive 函数创建的响应式对象。

五、深度监听

在某些情况下，我们或许需要监听对象内部嵌套属性的变化。这时，可以使用 watch 函数的第三个参数，设置 deep 为 true 来实现深度监听。以下是一个深度监听的示例：


import { ref, watch, reactive } from 'vue';
const person = reactive({
  name: '张三',
  age: 18,
  address: {
    city: '北京',
    district: '朝阳区'
  }
});
// 创建一个watcher对象，深度监听person对象
watch(person, (newPerson, oldPerson) => {
  console.log('person对象出现变化');
}, {
  deep: true
});

在这个例子中，我们设置了 deep 为 true，这样当 person 对象内部的属性出现变化时，也会触发回调函数。

六、立即执行回调

默认情况下，watcher的回调函数只有在数据变化时才会执行。但有时我们期望在创建watcher时立即执行一次回调函数。这时，可以设置 immediate 为 true。以下是一个立即执行回调的示例：


import { ref, watch } from 'vue';
const count = ref(0);
// 创建一个watcher对象，并立即执行回调函数
watch(count, (newVal, oldVal) => {
  console.log(`count从${oldVal}变为${newVal}`);
}, {
  immediate: true
});

在这个例子中，我们设置了 immediate 为 true，这样在创建watcher时会立即执行一次回调函数，即使数据的值没有出现变化。

七、清除副作用

在watcher的回调函数中，我们或许会执行一些副作用操作，如请求数据、修改DOM等。为了防止内存泄漏，我们可以在回调函数中返回一个清除函数，用于在watcher停止监听时清除副作用。以下是一个清除副作用的示例：


import { ref, watch } from 'vue';
const count = ref(0);
// 创建一个watcher对象，并在回调函数中执行副作用操作
watch(count, (newVal, oldVal) => {
  // 执行副作用操作，如请求数据、修改DOM等
  console.log(`count从${oldVal}变为${newVal}`);
  // 返回一个清除函数，用于清除副作用
  return () => {
    console.log('清除副作用');
  };
});