Vue2.0笔记——计算属性和侦听器

Posted 2020-10-31

计算属性

在模板使用表达式会非常便利，但是仅适用于简单的运算。当放入太多的逻辑，使得模板过于难以维护。对于这样，就像一个数据需要根据另一个数据的变动而变动。也因此计算属性有了可以监视的能力。
<br/>
所以，对于任何复杂逻辑，你都应当使用计算属性。

计算属性也是用来存储数据，但具有以下几个特点：

• 数据可以进行逻辑处理操作
• 对计算属性中的数据进行监视

  计算属性逻辑处理

  计算属性跟data选项一样，也是用来存储数据的。
  计算属性写在computed选项里。
  可以看下面一个例子:

  
  var vm = new Vue({
      el:‘#app‘,
      data:{
          message:‘Hello‘
      },
      computed:{
          //计算属性的getter方法
          reversedMessage:function(){
              return this.message.split(‘‘).reverse().join(‘‘);
          }
      }
  })

<div id="app">
<p>message:{{message}}</p>
<p>Computed reversed message:{{ reversedMessage }}</p>
</div>

通过执行代码，message属性值为Hello，翻转了值为olleH。
reversedMessage属性的值为一个函数，这个函数是一个getter方法，**如果该属性所依赖的属性(message)发生变更，此计算属性会重新触发**。
**修改代码如下:**

<input type="text" v-model="message">
{{message}}
<p>Computed reversed message:{{ reversedMessage }}</p>

该message属性进行了双向绑定，message值一更改，reversedMessage就会执行，并的到新的值，这就是它的监听的能力。
<br/>
#### 计算属性的setter方法
当然计算属性默认只有getter方法，你还可以添加setter方法。