计算属性

Vue.js是一款强大的JavaScript框架，提供了许多功能，其中包括计算属性。

什么是计算属性？

计算属性是Vue中一种便捷的属性，它能够根据已有的数据计算出新的数据。计算属性可以像普通属性一样在模板中使用，并且具有缓存功能，只有在依赖的数据发生变化时才会重新计算。

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

定义了一个计算属性reversedMessage，它的值是message反转后的字符串。

计算属性的用法

在Vue中定义一个计算属性很简单，只需要在Vue实例中添加一个computed对象即可。computed对象中包含了所有的计算属性。

Copy code
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    firstName: 'Wade',
    lastName: 'Stago'
  },
  computed: {
    fullName: function() {
      return this.firstName + ' ' + this.lastName;
    }
  }
})

在模板中使用计算属性时，只需要像使用普通属性一样绑定即可。

<div id="app">
  <p>{{ message }}</p>
  <p>{{ fullName }}</p>
</div>

语法

计算属性有一个 getter 和一个可选的 setter。在计算属性的 getter 中，可以根据其他数据计算出值，并返回这个值。在 setter 中，可以监听计算属性的变化，并更新依赖的数据。

new Vue({
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  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]
      }
    }
  }
})

定义了一个计算属性 fullName，它的 getter 返回 firstName 和 lastName 的拼接字符串，setter 则将传入的值按照空格分隔后更新 firstName 和 lastName。

使用场景

计算属性可以用于计算基于其他数据的值，例如：

• 对数据进行过滤、排序、分组等操作
• 格式化数据的显示方式
• 根据用户输入进行实时搜索 另外，计算属性还可以与 v-model 指令结合使用，可以轻松地在表单中双向绑定计算属性。

<div id="app">
  <input v-model="fullName">
  <p>{{ fullName }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  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]
      }
    }
  }
})
</script>

通过 v-model 指令将计算属性 fullName 与文本框双向绑定，当用户在文本框中输入值时，计算属性的 setter 将被触发，更新 firstName 和 lastName 的值，并重新计算 fullName 的值，最终将新的值显示在页面上。

实践要点

以下是一些在Vue中使用计算属性的最佳实践：

将复杂的逻辑放入计算属性

当某个数据需要复杂的逻辑才能计算出来时，可以将这个逻辑放入计算属性中。这样可以让模板保持简洁，同时也可以避免将复杂的逻辑写在模板中。

var vm = new Vue({
  el: '#app',
  data: {
    items: [1, 2, 3, 4, 5]
  },
  computed: {
    evenItems: function() {
      return this.items.filter(function(item) {
        return item % 2 === 0;
      });
    }
  }
})

<div id="app">
  <ul>
    <li v-for="item in evenItems">{{ item }}</li>
  </ul>
</div>

避免在计算属性中修改数据

计算属性是根据已有的数据计算出新的数据，不应该修改已有的数据。如果需要修改数据，应该使用方法或者触发事件。

计算属性要具有可读性

计算属性是用于计算新的数据的，应该具有可读性，不应该包含复杂的逻辑或者处理多个数据。如果需要处理多个数据或者包含复杂的逻辑，应该使用方法。

计算属性 vs 方法

计算属性和方法非常相似，它们都可以动态计算值并返回结果。但是，计算属性有一个重要的优势：缓存。

计算属性的值会被缓存，只有在它的依赖项发生变化时才会重新计算。这意味着如果多次访问计算属性，只有在它的依赖项发生变化时，才会重新计算。而方法每次都会被调用。

new Vue({
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 Vue 实例
      console.log('computed')
      return this.message.split('').reverse().join('')
    }
  },
  methods: {
    // 方法
    reverseMessage: function () {
      console.log('method')
      return this.message.split('').reverse().join('')
    }
  }
})

定义了一个计算属性reversedMessage和一个方法reverseMessage。如果多次调用计算属性或方法，可以看到计算属性只会打印一次日志，而方法会在每次调用时都打印一次日志。

总结

计算属性是 Vue 中非常有用的一个特性，它可以根据其他数据动态计算值，并且具有缓存的特性。我们可以将计算属性用于各种场景，如数据过滤、格式化、搜索等。另外，计算属性还可以与 v-model 指令结合使用，让我们可以轻松地在表单中双向绑定计算属性。