计算属性与监听器的深入理解

在 Vue.js 开发过程中，计算属性（Computed Properties）和监听器（Watcher）是处理数据变化的两种核心机制。它们各有特点，适用于不同的场景。本文将分别探讨这两者的使用方法及其区别。

一、计算属性（Computed Properties）

计算属性是一种基于依赖的属性，它可以在数据改变时自动重新计算并更新。其核心优势在于能够简化复杂逻辑的表达，使代码更加简洁易懂。

1. 计算属性的基本用法

Computed Properties 通常用于处理复杂逻辑。例如，可以通过计算属性反转一个字符串：


     
    原始字符串: {{ message }}
  
    计算后反转字符串: {{ reversedMessage }}

在这个例子中，reversedMessage 是一个计算属性，它会根据 message 的值自动反转并返回结果。

2. computed 与 methods 的区别

Computed 和 methods 都可以用于定义逻辑，但它们的工作机制有所不同：

Computed: 基于依赖缓存，只有相关依赖发生改变时才会重新计算。这样可以提升性能。

methods: 每次重新渲染时都会执行函数，缺乏缓存机制。

因此，建议在需要频繁计算或依赖多个数据源时使用 computed，否则使用 methods 更为合适。

3. computed 的 setter

Computed 属性除了默认的 getter，还可以定义一个 setter，允许用户通过设置计算属性的值来更新相关数据。

const vm = new Vue({  el: '#app',  data: {    name: 'Google',    url: 'http://www.google.com'  },  computed: {    site: {      get: function() {        return this.name + ' ' + this.url;      },      set: function(newValue) {        const names = newValue.split(' ');        this.name = names[0];        this.url = names[names.length - 1];      }    }  }});// 调用 settervm.site = '菜鸟教程 http://www.runoob.com';

在这个例子中，site 是一个计算属性，它既可以通过 getter 获取值，也可以通过 setter 设置值，进而更新 name 和 url。

二、监听器（Watcher）

虽然计算属性在大多数情况下更为适用，但有时我们需要自定义侦听器来响应数据的变化。这就是 Vue 提供的 watch 选项的作用。

1. 监听数据变化

Watcher 可以用来响应数据的变化，通常用于执行异步操作或需要开销较大的操作。例如，监控一个计数器的值变化：


     
    计数器: {{ count }}

在这个例子中，watch 选项定义了对 count 属性的监控函数，每当 count 的值发生变化时，函数都会被执行。

2. immediate 属性

Watcher 的一个特点是，只有在值发生改变时才会执行监听函数，而不是在第一次绑定时执行。为了在值首次绑定时也执行监听函数，可以使用 immediate 属性：

const vm = new Vue({  el: '#app',  data: {    userName: 'Runoob'  },  watch: {    userName: {      handler(newName, oldName) {        console.log('用户名发生了变化：' + newName);      },      immediate: true    }  }});

3. deep 属性

当需要监控对象内部的属性变化时，普通的 watch 方法无法实现。这个时候，可以使用 deep 属性来进行深度监听：

此外，如果只需要监控对象中某个特定属性的变化，可以使用字符串形式：

const vm = new Vue({  data: {    cityName: {      id: 1,      name: '上海'    }  },  watch: {    'cityName.name': {      handler(newName, oldName) {        console.log('城市名称发生了变化：' + newName);      },      deep: true,      immediate: true    }  }});

4. computer 和 watch 的区别

Computed 和 Watcher 的共同点是：它们都能根据数据的变化自动执行预定的逻辑。但两者在使用场景上有明显区别：

Watch：擅长处理单向数据流的问题，例如一个数据的变化会导致另一个数据的变化（如计数器）。

Computed：擅长处理多向数据流的问题，例如多个数据共同影响一个结果（如计算属性的 setter 示例）。

总结

在 Vue.js 开发中，计算属性和监听器各有优势。计算属性适用于基于依赖的自动计算，而监听器则适用于需要自定义侦听器的场景。无论是使用 computed 还是 watch，都可以帮助开发者更高效地管理数据变化，提升应用的响应速度和用户体验。

转载地址：http://jtgh.baihongyu.com/

你可能感兴趣的文章