六、Vue 计算属性

文章目录

简介
一、计算属性的应用场景与优势
- （一）应对复杂逻辑展示
- （二）依赖更新机制带来的优势
[二、计算属性的 setter 用法](#二、计算属性的 setter 用法)

简介

在 Vue.js 的开发过程中，"computed"（计算属性）这一特性扮演着至关重要的角色，尤其在应对复杂逻辑、优化数据展示与交互方面，展现出了独特的优势。

一、计算属性的应用场景与优势

（一）应对复杂逻辑展示

在实际的页面开发中，我们常常会遇到需要对数据进行复杂处理后再展示的情况。例如，像反转字符串这样看似简单却会让模板变得复杂难懂的操作。

我们先来看下面这个不使用计算属性的例子：

html 复制代码

<div id="app">
  {{ message.split('').reverse().join('') }}
</div>

在这个实例中，直接在模板内通过一连串的字符串方法（先分割、再反转、最后拼接）来对 message 进行处理并展示。虽然功能上实现了反转字符串的目的，但这样的写法使得模板代码变得冗长、复杂，对于后续阅读和维护代码的开发者来说，理解起来颇具难度。

而当我们使用计算属性时，情况就大不一样了。以下是使用了计算属性的示例：

html 复制代码

<div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p>
</div>
 
<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})
</script>

在这个实例中，我们声明了一个计算属性 reversedMessage，它内部的函数充当了这个属性的 getter 方法。通过这样的方式，模板中的代码变得清晰简洁，逻辑一目了然，将复杂的数据处理逻辑从模板中剥离出来，放在了计算属性的函数里，更符合代码的可读性和可维护性原则。

（二）依赖更新机制带来的优势

更为重要的是，计算属性具有依赖缓存机制。以 reversedMessage 为例，它依赖于 vm.message，这意味着只有当 vm.message 的值发生改变时，vm.reversedMessage 才会重新进行求值更新。

这种依赖更新机制与使用 methods 来实现类似功能有着本质的区别。我们来看下面使用 methods 的示例：

javascript 复制代码

methods: {
  reversedMessage2: function () {
    return this.message.split('').reverse().join('')
  }
}

当使用 methods 时，在每次页面重新渲染的过程中，无论 this.message 的值有没有变化，只要涉及到调用 reversedMessage2 这个方法的地方，函数都会重新被调用执行，进行一遍字符串的反转操作。而计算属性则会根据依赖关系智能判断是否需要重新求值，避免了不必要的重复计算，所以在性能方面，计算属性往往更具优势，尤其在处理复杂计算或者频繁渲染的场景下，这种优势会更加明显。

不过，在某些特定情况下，如果我们不希望有缓存机制，而是希望每次调用都执行函数逻辑，那么使用 methods 属性就是更合适的选择了，开发者可以根据实际需求灵活选用这两种方式。

二、计算属性的 setter 用法

通常情况下，计算属性默认只提供了 getter 方法，用于获取经过计算后的值。但在一些需要双向数据交互的场景中，我们也可以为计算属性提供一个 setter 方法。

以下是一个具体的实例：

javascript 复制代码

var vm = new Vue({
  el: '#app',
  data: {
    name: 'Google',
    url: 'http://www.google.com'
  },
  computed: {
    site: {
      // getter
      get: function () {
        return this.name + ' ' + this.url
      },
      // setter
      set: function (newValue) {
        var names = newValue.split(' ')
        this.name = names[0]
        this.url = names[names.length - 1]
      }
    }
  }
})
// 调用 setter， vm.name 和 vm.url 也会被对应更新
vm.site = '菜鸟教程 http://www.runoob.com';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);

在这个例子中，我们定义了一个名为 site 的计算属性，它的 get 函数将 name 和 url 两个数据属性组合起来返回。而当我们给 site 赋值时，就会触发 set 函数，在 set 函数内部，会对传入的新值进行解析，然后分别更新 name 和 url 的值。通过这样的方式，实现了一种基于计算属性的双向数据操作，进一步拓展了计算属性在数据处理和交互方面的灵活性，方便我们根据不同的业务逻辑需求来管理和更新数据。