watch方法解析

watch 方法解释

在 Vue.js 中,watch 是一个用于监听响应式数据变化的 API。当被监听的数据发生变化时,watch 会执行指定的回调函数。它非常适合处理需要在数据变化时执行某些逻辑的场景。


watch 的基本语法

javascript 复制代码
watch(source, callback, options)
  • source :需要监听的响应式数据。可以是一个 refreactive 对象、计算属性,或者一个返回值的函数。
  • callback :当 source 发生变化时执行的回调函数。它接收两个参数:
    • newValue:变化后的新值。
    • oldValue:变化前的旧值。
  • options :可选的配置对象,常用属性包括:
    • immediate:是否在监听开始时立即执行回调函数。
    • deep:是否深度监听对象或数组内部的变化。

watch 的示例

1. 监听 ref 的变化
javascript 复制代码
import { ref, watch } from 'vue';

const count = ref(0);

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

count.value++; // 输出:count 从 0 变为 1

2. 监听 reactive 对象的变化
javascript 复制代码
import { reactive, watch } from 'vue';

const user = reactive({ name: 'Alice', age: 25 });

watch(
  () => user.name, // 监听 user.name
  (newValue, oldValue) => {
    console.log(`用户名从 ${oldValue} 变为 ${newValue}`);
  }
);

user.name = 'Bob'; // 输出:用户名从 Alice 变为 Bob

3. 监听多个数据的变化
javascript 复制代码
import { ref, watch } from 'vue';

const firstName = ref('John');
const lastName = ref('Doe');

watch(
  [firstName, lastName], // 监听多个数据
  ([newFirstName, newLastName], [oldFirstName, oldLastName]) => {
    console.log(`姓名从 ${oldFirstName} ${oldLastName} 变为 ${newFirstName} ${newLastName}`);
  }
);

firstName.value = 'Jane'; // 输出:姓名从 John Doe 变为 Jane Doe

4. 深度监听对象或数组
javascript 复制代码
import { reactive, watch } from 'vue';

const user = reactive({ name: 'Alice', address: { city: 'Beijing' } });

watch(
  () => user, // 监听整个 user 对象
  (newValue, oldValue) => {
    console.log('user 对象发生变化', newValue);
  },
  { deep: true } // 深度监听
);

user.address.city = 'Shanghai'; // 输出:user 对象发生变化 { name: 'Alice', address: { city: 'Shanghai' } }

5. 立即执行回调
javascript 复制代码
import { ref, watch } from 'vue';

const count = ref(0);

watch(
  count,
  (newValue, oldValue) => {
    console.log(`count 从 ${oldValue} 变为 ${newValue}`);
  },
  { immediate: true } // 立即执行回调
);

// 输出:count 从 undefined 变为 0

watch 的使用场景

  1. 数据变化时执行异步操作:例如监听搜索关键字的变化,触发搜索请求。
  2. 数据变化时更新其他状态:例如监听表单字段的变化,更新表单的验证状态。
  3. 深度监听复杂对象:例如监听一个嵌套对象或数组的变化,执行相应的逻辑。

总结

  • watch 是 Vue.js 中用于监听响应式数据变化的核心 API。
  • 它可以监听 refreactive、计算属性等数据的变化,并执行相应的逻辑。
  • 通过 immediatedeep 选项,可以控制监听的行为。
  • 在组件开发中,watch 常用于处理数据变化时的异步操作、状态更新等场景。
相关推荐
陪我一起学编程27 分钟前
创建Vue项目的不同方式及项目规范化配置
前端·javascript·vue.js·git·elementui·axios·企业规范
LinXunFeng1 小时前
Flutter - 详情页初始锚点与优化
前端·flutter·开源
GISer_Jing1 小时前
Vue Teleport 原理解析与React Portal、 Fragment 组件
前端·vue.js·react.js
Summer不秃1 小时前
uniapp 手写签名组件开发全攻略
前端·javascript·vue.js·微信小程序·小程序·html
coderklaus1 小时前
Base64编码详解
前端·javascript
NobodyDJ2 小时前
Vue3 响应式大对比:ref vs reactive,到底该怎么选?
前端·vue.js·面试
xianxin_2 小时前
CSS Visibility(可见性)
前端
朱程2 小时前
写给自己的 LangChain 开发教程(二):格式化数据 & 提取 & 分类
前端·人工智能
小喷友2 小时前
第5章 高级UI与动画
前端·app·harmonyos
笃行3502 小时前
【实用部署教程】olmOCR智能PDF文本提取系统:从安装到可视化界面实现
前端