Vue中watch监听属性和对象的基本用法解析

Vue中watch监听属性和对象的基本用法

在Vue中，watch是一个用于监听属性或对象变化的API，当被监听的属性或对象发生变化时，watch会触发相应的回调函数。

监听简单属性

监听简单属性的语法如下：

watch: {
  '属性名': function (newVal, oldVal) {
    // 当属性值发生变化时触发
  }
}

例如，监听test属性的变化：

watch: {
  test: function (newVal, oldVal) {
    console.log(`test属性值发生变化，新值：${newVal}，旧值：${oldVal}`);
  }
}

监听对象属性

监听对象属性的语法如下：

watch: {
  '对象名.属性名': function (newVal, oldVal) {
    // 当属性值发生变化时触发
  }
}

例如，监听queryParams.userID属性的变化：

watch: {
  'queryParams.userID': function (newVal, oldVal) {
    console.log(`queryParams.userID属性值发生变化，新值：${newVal}，旧值：${oldVal}`);
  }
}

监听数组属性

监听数组属性的语法如下：

watch: {
  '数组名': function (newVal, oldVal) {
    // 当数组发生变化时触发
  }
}

例如，监听arr数组的变化：

watch: {
  arr: function (newVal, oldVal) {
    console.log(`arr数组发生变化，新值：${newVal}，旧值：${oldVal}`);
  }
}

监听函数属性

监听函数属性的语法如下：

watch: {
  '函数名': function (newVal, oldVal) {
    // 当函数发生变化时触发
  }
}

例如，监听sayHello函数的变化：

watch: {
  sayHello: function (newVal, oldVal) {
    console.log(`sayHello函数发生变化，新值：${newVal}，旧值：${oldVal}`);
  }
}

在回调函数中处理数据变化

在回调函数中，您可以通过newVal和oldVal参数获取属性或对象的新值和旧值，然后根据需要进行处理。

例如，您可以在回调函数中更新组件状态、触发其他操作，或者记录数据变化的历史记录。

注意事项

• watch只监听属性或对象的直接变化，如果属性或对象是引用类型，那么直接修改引用类型本身不会触发watch。
• watch只监听数据变化，不监听DOM变化。
• watch不能监听计算属性的变化。
• watch不能监听方法的变化。

结语

watch是Vue中一个非常强大的API，它可以帮助您轻松实现组件中数据的动态响应。通过灵活使用watch，您可以构建出更强大的Vue组件。