Vue.js 计算属性：computed

为了方便维护，计算属性在处理一些复杂逻辑时是很有用的。对于处理复杂逻辑，就可以使用计算属性。 说明： 我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数，简单的说，相比定义方法，计算属性性能更优。

<div id="example">
  <p>原始字符串: "{
         
  { message }}"</p>
  <p>用计算属性处理过的字符串： "{
         
  { reversedMessage }}"</p>
</div>

var vm = new Vue({
          
   
  el: #example,
  data: {
          
   
    message: Hello
  },
  computed: {
          
   
    // 计算属性的 getter
    reversedMessage: function () {
          
   
      // `this` 指向 vm 实例
       return this.message.replaceAll("o","33") //必须要有返回值
    }
  }
})

如果有传参数的需求比如说做数据筛选功能可以使用闭包函数（也叫匿名函数）实现，以下是显示及格人数的案例：

<table>
        <tr v-for="(item,index) in list" v-if="failed(index)">
            <td>{
         
  {item.name}}</td>
            <td>{
         
  {item.age}}</td>
            <td>{
         
  {item.grade}}</td>
        </tr>
    </table>

var app = new Vue({
          
   
        el:"#app",
        data:{
          
   
            list:[
                {
          
   name:"zhou",age: 11,grade: 91},
                {
          
   name:"wu",age: 16,grade: 90},
                {
          
   name:"zheng",age: 15,grade: 95},
                {
          
   name:"wang",age: 14,grade: 99},
                {
          
   name:"lee",age: 15,grade: 59},
                {
          
   name:"chou",age: 20,grade: 54}

            ],
        },
        computed:{
          
   
            failed(){
          
   
                return function (index){
          
   
                    return this.list[index].grade>=60
                }
            }

        }
    })