如何使用`watch`选项来监听特定属性的变化?

简介: 如何使用`watch`选项来监听特定属性的变化?

在 Vue 中,可以使用watch选项来监听特定属性的变化。如果需要监听对象obj中的属性a的变化,可以使用以下代码:

<template>
  <div>
    <input type="text" v-model="obj.a" @input="handleInput" />
    <input type="text" v-model="obj.b" @input="handleInput" />
    <p>{
  { obj }}</p>
  </div>
</template>

<script>
export default {
    
  data() {
    
    return {
    
      obj: {
     a: '', b: '' },
    };
  },
  watch: {
    
    'obj.a': {
    
      handler(newValue, oldValue) {
    
        console.log('obj.a changed:', newValue, oldValue);
      },
    },
  },
  methods: {
    
    handleInput(event) {
    
      this.obj[event.target.name] = event.target.value;
    },
  },
};
</script>

在上述示例中,我们使用'obj.a'作为watch选项的键,这样只会监听obj对象中的a属性的变化,而不会监听其他属性的变化。当obj.a属性发生变化时,会触发handler函数,并将新的值和旧的值作为参数传递给它。

目录
相关文章
|
1月前
|
JavaScript 数据处理
当数据发生变化时,`watch`函数是如何被触发的?
当数据发生变化时,`watch`函数是如何被触发的?
22 3
|
1月前
|
缓存 JavaScript
解释 Vue 的计算属性和监视属性的区别。
解释 Vue 的计算属性和监视属性的区别。
32 6
|
3月前
|
小程序
在uniapp中监听globalData中的值变化
在uniapp中监听globalData中的值变化
120 0
|
3天前
vue3 watch 监听多值以及深度监听用法
vue3 watch 监听多值以及深度监听用法
8 0
|
2月前
当监听的属性是对象的引用时,`watch`选项是否会触发监听?
当监听的属性是对象的引用时,`watch`选项是否会触发监听?
13 2
|
3月前
|
JavaScript API
在Vue中,有哪些方法可以监听元素的状态变化?
在Vue中,有哪些方法可以监听元素的状态变化?
54 2
|
4月前
如何监听vuex中的变量参数变化,用watch!
如何监听vuex中的变量参数变化,用watch!
|
7月前
|
JavaScript
Vue中watch监听属性新旧值相同问题解决方案,watch
Vue中watch监听属性新旧值相同问题解决方案,watch
117 0
|
8月前
|
JavaScript 前端开发
侦听属性 watch
侦听属性 watch
|
8月前
|
JavaScript
vue中watch监听路由传来的参数变化问题
vue中watch监听路由传来的参数变化问题
155 0