计算属性和侦听器（vue笔记）

计算属性

<div id="app">
    <p>初始信息:'{{msg}}'</p>
    <p>翻转信息：'{{reverseMsg}}'</p>
</div>

var vm=new Vue({
      el:"#app",
      data:{
        msg:'Hello'
      },
      computed:{
        // 计算属性的getter
        reverseMsg:function(){
          // 'this'指向vm实例
          return this.msg.split('').reverse().join('')
        }
      }
    })

结果：

方法

<p>翻转信息: "{{ reverseMsg() }}"</p>

// 在组件中  
methods: {  
reverseMsg: function () {  
return this.message.split('').reverse().join('')  
}  
}

计算属性和方法：
计算属性是基于它们的响应式依赖进行缓存的，只有在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reverseMsg 计算属性会立即返回之前的计算结果，而不必再次执行函数。
如果不希望有缓存，请用方法来替代。

计算属性的setter
计算属性默认只有 getter，不过在需要时也可以提供一个 setter：

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]
          }
        }
      }

侦听器

当需要在数据变化时执行异步或开销更大的操作时，使用侦听器更好