当前位置：首页 > article >正文

Vue中watch监听属性的一些应用总结

article 2024/10/9 23:25:57

【1】vue2中watch的应用

① 简单监视

在 Vue 2 中，如果你不需要深度监视，即只需监听顶层属性的变化，可以使用简写形式来定义 watch。这种方式更加简洁，适用于大多数基本场景。

示例代码

假设你有一个 Vue 组件，其中包含一个名为 message 的字符串属性，你希望监听这个属性的变化。你可以这样写：

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  watch: {
    // 简写形式，直接指定 handler 函数
    message(newVal, oldVal) {
      console.log('message changed from', oldVal, 'to', newVal);
    }
  }
});

解释

message(newVal, oldVal): 这个函数会在 message 属性发生变化时被调用。newVal 参数是新的值，oldVal 参数是旧的值。
watch: 在 watch 对象中，键是你想监听的数据属性名，值是一个函数，该函数会在属性值发生变化时被调用。

更复杂的例子

假设你有一个对象，但你只想监听对象的某个特定属性，而不是整个对象的深度变化：

new Vue({
  el: '#app',
  data: {
    user: {
      name: 'Jack',
      age: 25
    }
  },
  watch: {
    // 监听 user.name 属性的变化
    'user.name'(newVal, oldVal) {
      console.log('user.name changed from', oldVal, 'to', newVal);
    }
  }
});

解释

'user.name'(newVal, oldVal): 这里使用字符串 'user.name' 作为键，Vue 会自动解析这个字符串并监听 user 对象的 name 属性的变化。
watch: 同样，在 watch 对象中，键是你想监听的数据属性路径，值是一个函数，该函数会在属性值发生变化时被调用。

总结

简写形式的 watch 非常适合用于监听顶层属性或对象的特定属性的变化。如果你不需要深度监视，这种简写形式可以使代码更加简洁和易读。如果你有更多复杂的需求，比如需要立即执行监听器或处理更深层次的变化，可以使用完整的对象形式。

② 深度监视

在 Vue 2 中，watch 是一个非常有用的工具，它允许开发者监听 Vue 实例上的数据属性的变化，并在这些属性变化时执行特定的操作。当你需要监听的对象是一个复杂的数据结构（如对象或数组），并且你希望监听该对象内部属性的变化时，就需要使用深度监视（deep watching）。

如何使用深度监视？

要启用深度监视，你需要在 watch 配置中添加一个对象而不是简单的函数。这个对象应该包含两个属性：handler 和 deep。

handler：这是一个函数，当被监听的数据发生变化时，这个函数会被调用。它接收两个参数：newValue（新值）和 oldValue（旧值）。
deep：这是一个布尔值，默认为 false。将其设置为 true 可以开启深度监视，这意味着 Vue 将会递归地监视对象的所有属性，直到最深层。

示例代码

假设你有一个 Vue 组件，其中包含一个名为 user 的对象，你希望监听 user.name 和 user.age 的变化。你可以这样做：

new Vue({
  el: '#app',
  data: {
    user: {
      name: 'Jack',
      age: 25
    }
  },
  watch: {
    // 监听 user 对象的变化
    user: {
      handler(newVal, oldVal) {
        console.log('user changed', newVal, oldVal);
      },
      deep: true // 开启深度监听
    }
  }
});

注意事项

性能考虑：开启深度监听可能会导致性能下降，特别是当监听的对象非常大或嵌套层次很深时。因此，只有在确实需要监听对象内部属性的变化时才应使用深度监听。
立即执行：如果你想在初始化时也执行一次监听器，可以添加 immediate: true 到监听配置中。

示例代码（带立即执行）

new Vue({
  el: '#app',
  data: {
    user: {
      name: 'Jack',
      age: 25
    }
  },
  watch: {
    user: {
      handler(newVal, oldVal) {
        console.log('user changed', newVal, oldVal);
      },
      deep: true,
      immediate: true // 初始化时立即执行一次handler
    }
  }
});