【 Vue全家桶 · Vue（五）】Vue框架中的监听机制之一 —— 计算属性computed

---

🏆 PART ONE 🏆

如果你已经对计算属性computed有过初步的了解，建议直接阅读 第二部分 👈

---

一. 通过methods引入computed的概念

之前我们讲插值的时候说：双大括号里可以放简单的JavaScript表达式。当时有个列子：

<div id="app">
    <div>原值 —— {
   {
   msg}}</div>
    <div>表达式反转 —— {
   {
   msg.split('').reverse().join('')}}</div>
</div>

new Vue({
   
    el:'#app',
    data:{
   
        msg:'hello world!'
    }
})

1.1 methods版本

这样会在页面上显示反转之后的字符串。这样的需求还比较简单，如果我们的需求再复杂一些，比如还想做到字符去重，不分大小写排序等等效果，就不适合直接写在模板中了。

一般的操作是去组件中定义一个方法函数去专门处理字符串，然后把结果返回，渲染到视图中：

<div id="app">
    <div>原值 —— {
   {
   msg}}</div>
    <div>表达式反转 —— {
   {
   msg.split('').reverse().join('')}}</div>
    <div>方法反转 —— {
   {
   revMsg()}}</div>
</div>

new Vue({
   
    el:'#app',
    data:{
   
        msg:'hello world!'
    },
    methods:{
   
        revMsg:function(){
   
            return this.msg.split('').reverse().join('')
        }
    }
})

1.2 computed版本

上述场景中计算属性（computed） 无疑是更优的选择！先来看上例的computed版本：

<div id="app">
    <div>原值 —— {
   {
   msg}}</div>
    <div>表达式反转 —— {
   {
   msg.split('').reverse().join('')}}</div>
    <div>方法反转 —— {
   {
   revMsg()}}</div>
    <div>计算属性 —— {
   {
   reverseMsg}}</div>
</div>

new Vue({
   
    el:'#app',
    data:{
   
        msg:'hello world!'
    },
    computed:{
   
        reverseMsg:function(){
   
            return this.msg.split('').