watch的用法，再来复习一遍

• 计算属性computed和methods方法里面的函数，到底有什么区别，什么时候要用watch;
• 他们有什么区别，一直是迷迷糊糊，现在就把他理得清楚一点；

第一个学习的是计算属性

• 模板语法是最直观，最简单的用法{{}};
  • 他们的设计初衷是用于简单运算的，在模板中放入太多逻辑会让模板过重且难以维护；
  • 当模板中逻辑较长时，就要提取出来，放在computed里面;
  • 那这个的正常用法，应该是先出现{{}},如果过长，再变成computed;
• 不仅仅{{}},任何复杂的逻辑，都应当使用计算属性；

计算属性computed是如何使用的呢？

• 基础示例：

<div id="example">
<p> Original message :"{{message}}" </p>
<p>computed reversed message:"{{reverseMessage}}"</p>
</div>

var vm = new Vue({
 el:'#example',
 data:{
   message:'Hello'
 },
 
 computed:{
   reversedMessage:function(){                           //计算属性的getter
   return this.message.split('').reverse().join('')      // ‘this’指向vm实例
     }
  }
})

• computed里面，对reversedMessage函数进行定义，可以直接写在{{}}里面;
• 不用像写在methods里面的，还得调用；

计算属性缓存 VS 方法

你可能已经注意到，通过表达式中调用方法，来达到同样的效果；

<p>reversed message :"{{reversedMessage()}}"</p>
// 在组件中
methods:{
   reversedMessage: function () {  
   return this.message.split('').reverse().join('')  
   }
}

我们可以将同一函数，定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的，

• 不同的是计算属性是基于它们的响应式依赖进行缓存的。
• 只有在相关响应式依赖发生改变时，它们才会重新求值；
• 这就意味着只要message还没有发生改变，多次访问reversedMessage计算属性会立即返回之前的计算结果，而不必再次执行函数；
• 相比之下，每当触发重新渲染时，调用方法将总会再次执行函数；

小总结：计算属性和methods的区别是

• 计算属性有一个缓存功能，如果他依赖的message没有变化的话，reversedMessage就不会重新计算求值；
• 但是如果用的是方法的话，不管message，是否变化，只要调用这个方法，reversedMessage都会重新求值；

计算属性 vs 侦听属性

vue提供了一种更通用的方式来观察和响应vue实例上数据的变动：侦听属性。

• 当你有一些数据需要随着其他数据变动而变动时，你很容易滥用watch,通常更好的做法是使用计算属性而不是命令式的watch回调；

<div id="demo">{{fullname}}</div>
var vm = new Vue({
  el:demo;
  data:{
  firstName:'Foo',
  lastName:'Bar',
  },
  computed:{
    fullName:function(){
      return this.firstName + '' + this.lastName
    }
  }

})

计算属性的setter

计算属性默认只有getter，不过有时也可以提供一个setter;

//....
computed:{
fullName:{
//getter
get:function(){
return this.firstName+ ''+this.lastName
},
set:function(newValue){
 var names = newValue.split(' ')
 this.firstName = names[0]
 this.lastName = names[names.length -1]
   }
 }
}