watch在vue中的用法

Vue 中 watch 的用法

什么是 watch

watch 是 Vue 中一个响应式函数，它允许您监听数据属性值的变化并执行回调函数。当被监视的属性发生改变时，回调函数会被调用，您可以在其中执行任何必要的更新或操作。

语法

立即学习“前端免费学习笔记（深入）”；

watch(property, handler)

基本用法

要监视某个属性，只需传入属性名称和一个回调函数：

watch('count', (newValue, oldValue) => {  // count 的新值是 newValue，旧值是 oldValue})

监视多个属性

要一次监视多个属性，可以传递一个属性数组：

watch(['count', 'name'], (newValue, oldValue) => {  // 监视的值在 newValue 中作为对象提供，键为属性名})

选项对象

您可以使用选项对象来配置 watch 行为：

watch({  count: {    handler(newValue, oldValue) {      // ...    },    immediate: true,    deep: true  }})

高级用法

监听特定属性路径

使用点表示法可以监听对象属性路径的变化：

watch('user.name', (newValue, oldValue) => {  // ...})

使用 return 值

watch 回调函数可以返回一个函数或一个包含 unwatch 函数的 Promise：

何时使用 watch

watch 适用于需要对数据属性值的变化做出反应的情况，例如：

替代方案

在某些情况下，computed properties 可能是 watch 的替代方案。但是，computed properties 是派生的，这意味着它们的值是由其他响应式属性计算出来的。