vue的 计算属性（computed）、methods、watched三者区别

计算属性 ：和普通属性一样是在模板中绑定计算属性的，当data中对应数据发生改变时，计算属性的值也会发生改变。

Methods：methods是方法，只要调用它，函数就会执行。

相同：两者达到的效果是同样的。

不同：计算属性是基于它们的依赖进行缓存的，只有相关依赖会发生改变时才会重新求职。只要相关依赖未改变，只会返回之前的结果，不再执行函数。

1. <p>原始数据：{{msg}} </p>
2. <p>改变后的数据：{{changemsg}} </p>
3. var vm=new Vue({
4. el:"#example",
5. data:{
6. msg:"hello",
7. },
8. computed:{
9. changemsg:function(){
10. return this.msg.split("").reverse().join("");
11. },
12. }

computed属性  VS watched 属性

watched属性：代码更易于理解，它指定监测的值是谁，然后相应的改变其他的值。

var vm =  new Vue({

el:  '#demo',

data: {

firstName:  'Foo',

lastName:  'Bar',

fullName:  'Foo Bar'

},

watch: {

firstName:  function (val) {

this.fullName = val +  ' ' +  this.lastName

},

lastName:  function (val) {

this.fullName =  this.firstName +  ' ' + val

}

}

})

computed属性：代码更简单。

var vm =  new Vue({

el:  '#demo',

data: {

firstName:  'Foo',

lastName:  'Bar'

},

computed: {

fullName:  function () {

return  this.firstName +  ' ' +  this.lastName

}

}

})