不一样的计算属性

星_离
86 阅读4分钟

虽然在插值表达式中书写一些简单的逻辑是比较方便的，但是一旦遇到较为复杂的计算逻辑，还写在插值表达式中，就显得格外的臃肿。那么引入计算属性这个概念就尤为重要。

计算属性是基于它们的响应式依赖进行缓存的属性。只有当它的相关依赖发生改变的时候才会重新计算求值

new Vue({
  data: {
    firstName: '张',
    lastName: '三'
  },
  computed: {
    fullName: function() {
      return this.firstName + ' ' + this.lastName;
    }
  }
})

就像上边这个例子，只有当 data 中的两个属性发生变化的时候才会触发计算属性重新计算求值

那么接下来就先来说一下计算属性的语法格式：

1. 语法

computed:{
  计算属性名称:function(){
    计算过程...
    return 最终计算结果
  }
}

在一个 computed 中可以存在多个计算属性。

那么接下来就来一起看看计算属性的一些特性：

2. 特性

2.1. 缓存机制

  1. 计算属性会基于它们的依赖进行缓存
  2. 只有在相关依赖发生改变时才会重新计算
  3. 多次访问计算属性会立即返回之前计算结果，而不必再次执行函数

2.2. 响应式依赖

  1. 计算属性会自动追踪响应式依赖
  2. 当依赖变化时，计算属性会自动更新

2.3. 声明式编程

计算属性时声明式的，只要声明依赖关系，Vue 就会自动处理更新逻辑

接下来我们就来看一个例子

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

解释：

这是一个反转字符串的例子，首先我们去声明了计算属性reversedMessage，然后处理逻辑为：

  1. 先将字符串通过split方法切割为数组形式
  2. 然后通过数组的reverse方法进行反转
  3. 最后通过join方法重新将数组转换为字符串，作为最终的返回值

通过计算属性处理后，我们就可以{{ reversedMessage }}直接将结果展示出来，比起下面这种，看起来要易读的多：

{{ message.split('').reverse().join('') }}

而且计算属性会有缓存，不会多次的去进行计算。

3. 计算属性的 getter 和 setter

计算属性默认只有 getter，不过在需要时你也可以提供一个 setter

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，调用后firstName 和 lastName发生了改变，所以触发了计算属性的重新计算，重新调用 get，最终vm.firstName 和 vm.lastName 也会相应地被更新。

4. 计算属性和方法的区别

你可能已经注意到我们可以通过在表达式中调用方法来达到同样的效果：

<p>Reversed message: "{{ reversedMessage() }}"</p>

// 在组件中 methods: {   reversedMessage: function () {     return this.message.split('').reverse().join('')   } }

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

这也同样意味着下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖：

computed: {   now: function () {     return Date.now()   } }

相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。

我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存，我们将不可避免的多次执行 A 的 getter！

5. 计算属性和

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch——特别是如果你之前使用过 AngularJS。然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。细想一下这个例子：

<div id="demo">{{ fullName }}</div>

var vm = new Vue({   el: '#demo',   data: {     firstName: 'Foo',     lastName: 'Bar',     fullName: 'Foo Bar'   },   watch: {     firstName: function (val) {       this.fullName = val + ' ' + this.lastName     },     lastName: function (val) {       this.fullName = this.firstName + ' ' + val     }   } })

上面代码是命令式且重复的。将它与计算属性的版本进行比较：

var vm = new Vue({   el: '#demo',   data: {     firstName: 'Foo',     lastName: 'Bar'   },   computed: {     fullName: function () {       return this.firstName + ' ' + this.lastName     }   } })

计算属性只需要依赖的数据做一次处理，并且还具有缓存，避免多次计算

avatar
文章
阅读
粉丝