计算属性

模板中的表达式虽然方便但只适合用来做简单的操作，因为如果在模板中写太多逻辑会让模板变得臃肿，难以维护，如下面这样一个对象：

export default {
  data() {
    return {
      author: {
        name: 'John Doe',
        books: [
          'Vue 2 - Advanced Guide',
          'Vue 3 - Basic Guide',
          'Vue 4 - The Mystery'
        ]}}}}

需求是根据author是否已有一些书籍来展示不同的信息

<p>Has published books:</p>
<span>{{ author.books.length > 0 ? 'Yes' : 'No' }}</span>

这里的模板表达式就有些复杂了，因此可添加如下计算属性：

computed: {
    // 一个计算属性的 getter
    publishedBooksMessage() {
      // `this` 指向当前组件实例
      return this.author.books.length > 0 ? 'Yes' : 'No'
    }
  }

<p>Has published books:</p>
<span>{{ publishedBooksMessage }}</span>

任何依赖于this.publishedBooksMessage的绑定都会同步地更新

 

计算属性缓存 VS 方法

很明显在表达式中调用一个函数也能达到这样的效果

<p>{{ calculateBooksMessage() }}</p>
// 组件中
methods: {
  calculateBooksMessage() {
    return this.author.books.length > 0 ? 'Yes' : 'No'
  }
}

区别在于计算属性会基于其响应式依赖被缓存，这意味着只要author.books没有改变，则publishedBooksMessage就不会改变；而方法调用会在重渲染发生时再次执行函数，也就是说即使author.books改变了，但只要节点没有被重新渲染，则publishedBooksMessage就不会响应式地发生改变。

可写计算属性：(慎用)

计算属性默认是只读的，在一些特殊场景中需要修改时可通过同时提供getter和setter来创建，如

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName: {
      // getter
      get() {
        return this.firstName + ' ' + this.lastName
      },
      // setter
      set(newValue) {
        // 注意：我们这里使用的是解构赋值语法
        [this.firstName, this.lastName] = newValue.split(' ')
      }
    }
  }
}

当再次运行this.fullName = 'John Doe'时，setter会被调用进而更新this.firstName和this.lastName

 

Getter不应有副作用: 不要在getter中做异步请求或更改DOM

避免直接修改计算属性值：应该更新它所依赖的源状态以触发新的计算，

以上述例子来看即避免修改this.fullName而应通过修改this.firstName和this.lastName来改变this.fullName