Vue中的computed

引言

使用 vue 框架已经一年多的时间了，虽然踩了不少的坑，但是 有些错误是经常性的。正好利用现在的空余时间，对自己所学的，所用的东西进行整理，总结。避免下次在采坑，也希望自己的总结，能够带给别人一些启发。

computed 的定义

当其 依赖的属性的值 发生变化时，计算属性会重新计算，反之，则使用缓存中的属性值。

为什么要使用 computed

首先，通过 vue 官方文档的案例，来解释一下，为什么要使用 computed。我们都知道，在模板内的表达式非常遍历的，但是，有时候，我们会在模板内的放入太多逻辑的东西。会让模板变重，且难于维护。

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

在这模板中的代码中，其实，我们需要花费上一小段时间去理解，这块渲染的是什么 —message 的翻转字符串。然而，当初模板中使用表达式的初衷时为了简单运算的。所以，从这点出发，我们是不是就不建议在模板中使用过于复杂的表达式了。此时，计算属性就横空出世了。计算属性就是当依赖的属性的值发生变化的时候，才会触发他的更改，如果依赖的值，不发生变化的时候，使用的是缓存中的属性值。

<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('')
    }
  }
})

computed 的 getter 函数

在 vue 中，computed 的属性可以被视为是 data 一样，可以读取和设值。因此，在 computed 中可以分为 getter(读取)和 setter(设值)，一般情况下，是没有 setter 的，computed 只是预设了 getter，也就是只能读取，不可以改变设值。所以，computed 默认格式（是不表明 getter 函数的）：
html:

    <div>
     message: {{message}}
    </div>

    <!-- 计算属性 -->
    <div>
     计算属性：{{updateMessage}}
   </div>

computed: {updateMessage(): {console.log('计算属性', this.message)
            return this.message
    }
}

等价于

computed: {
    
    updateMessage: {get: function() {console.log('计算属性', this.message)
        return this.message
      }
    }
  },

发现了一个小小的 惊喜：当模板中不使用 updateMessage，即使 message 发生改变之后，也不会走 computed。神奇不神奇？？哈哈哈

在这里，就需要我们注意一下，不是说我们更改了 getter 中使用的变量（即依赖的属性）, 就会触发 computed 的更新，他有一个前提是 computed 里的值必须要在模板中使用才可以。但是会触发生命周期的 updated()

computed 中的 setter 函数

当赋值给计算属性的时候，将调用 setter 函数。多用于在模板组件中需要修改计算属性自身的值的时候。

computed: {
    updateMessage: {get: function() {console.log('计算属性', this.message)
        return this.message
      },
      set: function(newVal) {
        this.message = newVal
        console.log('newVal', newVal)
      }
    }
  },
 mounted () {
    this.updateMessage = '222'
    console.log('测试：', this)
 },

只有当计算属性中的属性被直接赋值的时候，才会走 setter 函数，而且，setter 函数和 getter 函数是相互独立的，不是说，走 setter 函数，就必须走 getter 函数。上面的案例，打印结果是

newVal: 222,
计算属性：222

是因为，在 setter 中触发了 message 的更改，当 message 发生改变的时候，getter 函数中就会改变。

computed: {
    updateMessage: {get: function() {console.log('计算属性', this.message)
        return this.message
      },
      set: function(newVal) {console.log('newVal', newVal)
      }
    }
  },
 mounted () {console.log('测试：', this)
 },

这种情况下，打印结果是：

newVal 222

此时，就只是单单的走了 setter 的函数，而没有走 getter 函数。

总结

这篇文章呢，主要是介绍一下关于 computed 的基本构成和使用，也算是，自己对 computed 的一个简单的总结把。不会让自己在做项目的过程中，遇见关于类似的问题，而无法解决。不知道如何使用。然后呢，等撸 vue 的源码的时候，在深入的写一篇关于 computed 的原理的文章。因为有些神奇的现象是必须要通过原理来解释的。

发现好博

https://juejin.im/post/5a6f21…
https://knownsec-fed.com/2018…
https://www.jianshu.com/p/56f…

很感谢大家利用这么长时间来读这篇文章，文章中若有错误请在下方留言，会尽快做出修改。