浅谈Vue中监听属性(watch)

监听属性的概念:

在计算机科学中,watch是一种调试技术,用于监视程序运行时特定变量的值。当程序在调试器控制下执行时,调试器会显示变量的当前值,并在程序执行过程中自动更新该值。
在Vue中,watch 是一种用于监测数据变化并做出回应的技术。watch 可以监听任何一个数据属性,并在该属性发生变化时执行指定的函数。

watch有什么作用呢?

watch 可以监听数据的变化,并在数据变化时执行所指定的回调函数。它可以做以下几件事情:

  1. 监听数据变化:watch 可以监听 Vue 实例上的任何数据变化,包括简单数据类型、对象、数组和计算属性等。

  2. 接收新旧值:当数据发生变化时,watch 回调函数会接受到两个参数,分别是新值和旧值,这可以方便我们比较数据变化,进一步做出相应的处理。

  3. 执行响应函数:watch 的主要作用就是执行我们所指定的响应函数,以便我们对数据变化作出及时的响应,如重新计算、渲染视图或发送网络请求等。

  4. 深度监听:watch 还可以通过配置 deep 选项来深度监听嵌套对象的变化,这样当嵌套对象中的属性发生变化时也能捕获到。

  5. 立即执行:watch 还可以通过配置 immediate 选项来在初始化组件时立即执行回调函数,而不必等待数据变化。

  6. 取消监听:当一个 watch 监听器不再需要时,可以使用 unwatch 方法来取消监听。

综上所述,watch 可以监听数据变化并执行相应操作,这使得我们可以很方便地对数据变化做出处理和重新计算。在实际开发中,watch 经常被用来检测表单输入变化、监听状态变化以及优雅地处理异步操作等。

watch的基本语法:

// 对象式写法
watch: {
    
    
  // 监听的属性名
  属性名: {
    
    
    handler: function (newVal, oldVal) {
    
    
      // 对属性变化作出响应
    }
  }
}

// 函数式写法
watch: {
    
    
  // 监听的属性名,参数为新旧值
  '属性名'(newVal, oldVal) {
    
    
    // 对属性变化作出响应
  }
}

其中,handler 是一个函数,其第一个参数是属性的新值,第二个参数是属性的旧值。
属性名 是需要监听的属性名称。当属性发生变化时,watch 可以触发指定的响应函数来处理这个变化,比如重新计算或发送请求等。
watch 可以监听对象、数组、计算属性等数据类型的变化,也可以通过 deep 选项来深度监听嵌套对象的变化,还可以使用 immediate 选项来立即执行回调函数。

通过示例来进一步了解监听属性

扫描二维码关注公众号,回复: 17034461 查看本文章

示例一:

new Vue({
    
      
  data: {
    
      
    message: 'Hello Vue!'  
  },  
  watch: {
    
      
    // 当 `message` 属性发生变化时,执行 `handleMessageChange` 函数  
    message(newVal, oldVal) {
    
      
      console.log('message changed from', oldVal, 'to', newVal);  
    }  
  },  
  methods: {
    
      
    handleMessageChange(newVal, oldVal) {
    
      
      console.log('message changed from', oldVal, 'to', newVal);  
    }  
  }  
});

在上面的示例中,我们通过watch选项观察了message属性的变化。当message的值发生改变时,回调函数将会被触发,并输出新的值和旧的值。
除了直接在回调函数中执行逻辑外,还可以使用命名函数作为回调函数,或者使用箭头函数。此外,还可以在回调函数中返回一个值,以便在数据变化后执行其他操作。
除了观察数据的变化,watch选项还可以用于观察计算属性或方法。在这种情况下,回调函数将会在计算属性或方法的结果发生变化时被触发。

示例二:

<template>
  <div>
    <p>当前计数:{
    
    {
    
     count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      count: 0,
    };
  },
  watch: {
    
    
    count(newValue, oldValue) {
    
     // 监听 count 变化
      console.log(`count 变化,新值为 ${
    
    newValue},旧值为 ${
    
    oldValue}`);
    },
  },
  methods: {
    
    
    increment() {
    
    
      this.count++; // 改变 count 的值
    },
  },
};
</script>

上面的示例中,我们定义了一个 count 数据属性,并使用 watch 监听它的变化。在按钮点击事件中,我们改变了 count 的值,watch 监听到了数据的变化并执行了回调函数,输出了新旧值信息。

还可以通过配置 deep 和 immediate 选项来深度监听和在组件初始化时立即执行回调函数。

<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      person: {
    
    
        name: 'Tom',
        age: 18,
      },
    };
  },
  watch: {
    
    
    'person.name'(newValue, oldValue) {
    
     // 深度监听 person.name 的变化
      console.log(`person.name 变化,新值为 ${
    
    newValue},旧值为 ${
    
    oldValue}`);
    },
  },
  created() {
    
    
    this.$watch('person', (newValue, oldValue) => {
    
     // 深度监听 person 对象及其子属性的变化
      console.log('person 变化', newValue, oldValue);
    }, {
    
     deep: true });
    this.$watch('person.name', (newValue, oldValue) => {
    
     // 初始化时立即执行回调函数
      console.log(`person.name 变化,新值为 ${
    
    newValue},旧值为 ${
    
    oldValue}`);
    }, {
    
     immediate: true });
  },
};
</script>

在这里,我们使用 watch 深度监听了 person.name 的变化,并在创建组件时使用 $watch 方法深度监听 person 对象的变化,同时设置了 immediate 选项,在初始化时立即执行回调函数。

监听属性的优点和缺点:

优点:

  1. 响应式:watch 可以实现数据的响应式监测,即在数据变化时自动执行回调函数,方便及时地对变化做出处理。
  2. 灵活性:watch 可以监听任意数据属性,并执行自定义的回调函数,使得我们可以根据具体需求做出相应的操作。
  3. 深度监听:watch 可以通过配置 deep 选项来深度监听嵌套对象的变化,不仅监听父级对象的变化,还能捕获到子级对象属性的变化。
  4. 初始化执行:watch 可以通过配置 immediate 选项在组件初始化时立即执行回调函数,而不必等待数据变化。
  5. 取消监听:当一个 watch 不再需要时,可以通过 unwatch 方法来取消监听,避免不必要的资源消耗。

缺点:

  1. 异步问题:watch 回调函数是异步执行的,在一些特定场景下,可能无法立即获取到最新的数据。如果需要立即获取到最新数据,可能需要配合 $nextTick 或使用计算属性来解决。
  2. 频繁触发:如果被监听的数据频繁变化,可能会导致 watch 回调函数被频繁触发,影响性能。此时,可以通过配置 immediate 选项和优化逻辑来减少不必要的回调触发。
  3. 复杂性:当使用多个 watch 监听多个数据时,可能会导致代码复杂度增加,维护起来稍显困难。在这种情况下,可以考虑使用计算属性来代替 watch。
那我们该怎么样去处理这些缺点呢?
  1. 处理异步问题:可以使用 $nextTick 方法来确保在更新视图之后再执行回调函数,以获取最新的数据。
watch: {
    
    
  count: {
    
    
    handler(newValue, oldValue) {
    
    
      this.$nextTick(() => {
    
    
        console.log(`count 变化,新值为 ${
    
    newValue},旧值为 ${
    
    oldValue}`);
        // 在这里进行相应的操作
      });
    },
    immediate: true,
  },
}
  1. 优化频繁触发:如果被监听的数据频繁变化,可以考虑通过设置 immediate 选项或优化逻辑来减少不必要的回调触发。例如,可以使用 debounce 或 throttle 函数来限制回调函数的执行频率,以避免过多的触发。
  2. 简化复杂性:当使用多个 watch 监听多个数据时,可以考虑使用计算属性来代替 watch。计算属性具有自动的依赖跟踪和缓存机制,能够简化代码并提高性能。
computed: {
    
    
  countInfo() {
    
    
    return `当前计数:${
    
    this.count}`;
  },
},
watch: {
    
    
  countInfo(newValue, oldValue) {
    
    
    console.log(`countInfo 变化,新值为 ${
    
    newValue},旧值为 ${
    
    oldValue}`);
  },
},

这样,通过计算属性 countInfo 来监听 count 的变化,代码会更加清晰和易于维护。

综上所述,watch 提供了一种方便而强大的数据监测技术,但需要注意处理异步问题和频繁触发的情况,以及根据实际场景选择最佳的数据监听方式。

使用watch的场景:

  1. 数据监听:当数据发生变化时,可以使用 watch 来监听数据的变化,并在变化时执行相应的操作。例如,监听表单字段的变化,当表单字段发生变化时,可以根据新的值进行实时的验证、计算或发送请求等操作。

  2. 异步操作:当需要监听异步操作的结果或状态时,可以使用 watch 来监视异步操作的变化。例如,监视网络请求的结果,当请求返回时,可以根据返回的数据更新组件的状态或进行后续操作。

  3. 路由变化:当路由发生变化时,例如切换页面或参数变化,可以使用 watch 监听 $route 对象的变化,并根据新的路由信息进行相应的页面更新或数据加载操作。

  4. 深度监听对象或数组:当需要深度监听对象或数组内部属性的变化时,可以使用 watch 来进行深度监听。例如,监听一个复杂的数据结构,当其中某个属性发生变化时,可以触发相应的操作。

  5. 状态管理:当使用状态管理工具(如 Vuex)时,可以使用 watch 来监听状态的变化,并根据状态的变化进行相应的处理。例如,监听某个状态的变化,在状态变化时更新视图或触发其他操作。

总而言之,watch 适用于需要监听数据变化并执行相应操作的场景,特别是在需要处理异步操作、深度监听对象或数组、响应路由变化等情况下。

使用watch还需要注意的几个点:

  1. 主要用来监听某些特定数据的变化,从而进行某些具体的业务逻辑操作,可以看作是 computed 和 methods 的结合体;
  2. 可以监听的数据来源:data,props,computed内的数据;
  3. watch支持异步;
  4. 不支持缓存,监听的数据改变,直接会触发相应的操作;
  5. 监听函数有两个参数,第一个参数是最新的值,第二个参数是输入之前的值,顺序一定是新值,旧值。

有什么需要补充的请评论区留言!

猜你喜欢

转载自blog.csdn.net/He_9a9/article/details/132730654