vue的计算属性computed 的理解 以及与methods, watch 的区别和使用场景
1、methods，computed的区别
例子：
var vm = new Vue({
el: '#app',
data: {
msg: 'nihao',
text: 'byebye'
},
computed: {
getmsg: function () {
return this.msg
}
},
methods:{
gettext:function () {
return this.msg
}
}
})
<p>msg：{{getmsg}}</p>
<p>text：{{gettext()}}</p>
在这个例子中，只要msg值发生变化，getmsg方法就会触发，而text的值发生变化，只要没有调用gettext方法，显示的值不会动态改变。就是说，methods中就是普通的方法，通过调用执行，computed中的方法会监听自己的依赖，依赖发生变化方法会自动执行。
1. computed 和methods 达到的效果是相同的
2. 计算属性computed和methods都不应该使用箭头函数来定义计算属性 因为箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向Vue
不同点是：
1. 计算属性compute是基于他们的依赖（如果是实例范畴之外的依赖，比如非响应式的not reactive是不会触发属性更新的）进行缓存(计算属性的结果会被缓存)，只有相关依赖会发生改变时才会重新求值，未改变只会返回只之前的结果，不在执行函数 .原值与新值一样不会触发,函数的返回值就是最终获取的值.
2. computed是响应式的，methods并非响应式。
3. 调用方式不一样，computed定义的成员像属性一样访问，methods定义的成员必须以函数形式调用。
4. computed是带缓存的，只有其引用的响应式属性（属性绑定）发生改变时才会重新计算(如果引用的属性没有改变，则调用上一次缓存值)，而methods里的函数在每次调用时都要执行
5. computed中的成员可以只定义一个函数作为只读属性，也可以定义get/set变成可读写属性，这点是methods中的成员做不到的。 computed 计算属性的方法在用属性时不用加（），而methods 方法在使用时要像方法一样去用，必须必须要加（）{{ mes() }}
默认加载的时候先computed再watch，不执行methods；等触发某一事件后，则是：先methods再watch。
watch适合处理的场景是，侦听一个数的变化，当该数据变化，来处理其他与之相关数据的变化（该数据影响别的多个数据）==当数据发生变化时，执行异步操作或较大开销操作的情况。如图所示:
computed适合处理的场景是，一个数据属性在它所依赖的属性发生变化时，也要发生变化，这种情况下，我们最好使用计算属性。如图所示:
以上是 vue的计算属性computed 的理解 以及与methods, watch 的区别和使用场景 的全部内容， 来源链接： utcz.com/z/378077.html
