最近一直在学前端Vuejs，对于新手，很是整不明白Vuejs中的computed、methods、watch的区别。
其实官方文档给的还是很清楚的，但是对于新手，还是摸不透。
官方文档地址：https://cn.vuejs.org/v2/api/#computed
-
computed：计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
-
methods：methods (方法) 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。
-
watch：是一种更通用的方式来观察和响应 Vue 实例上的数据变动。一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是字符串，方法，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。
通俗来讲，
computed是在HTML DOM加载后马上执行的，如赋值；
methods则必须要有一定的触发条件才能执行，如点击事件；
而watch呢？它则用于观察Vue实例上的数据变动。
下面开始上demo：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>computed,methods,watch</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
{{x}}___{{y}}___{{z}}___{{D}}
<p>
<button @click="someMethod">Click</button>
</p>
<p>
<input type="text" v-model="DF" />
</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
x: 1,
y: 2,
z: 3,
D: 99
},
watch: {
/**
* 类型: { [key: string]: string | Function | Object }
* 一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。
*
*/
// 回调函数
x: function (val, oldVal) {
console.log('[watch]==>x new: %s, old: %s', val, oldVal)
},
// 方法名
y: 'someMethod',
// 深度(deep) watcher，包含选项的对象。
z: {
handler: function (val, oldVal) {
console.log(`[watch]==>z new: ${val}, old: ${oldVal}`)
},
deep: true
}
},
methods: {
/**
* 类型: { [key: string]: Function }
* methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。
*
*/
someMethod: function(){
this.z = this.z + 999
this.D = this.D + 10
console.log('[methods]==>click someMethod for vm ==========================>')
}
},
computed: {
/**
* 类型: { [key: string]: Function | { get: Function, set: Function } }
* 计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
*/
DF: function(){
return this.D
},
doubleDF: function(){
return this.DF * 2
},
doDF: {
get: function(){
return this.D + 11
},
set: function(v){
this.D = this.D - 11
this.x = v - 222
}
}
}
})
vm.x = 88 // -> new: -122, old: 1
vm.z = 999 // -> 999,3
vm.doDF // 若不赋值则相当于执行 get 此时这个值为：99 + 11
console.log('[computed]==>相当于get 此时这个值为：99+11: ' + vm.doDF)
vm.doDF = 100 // 若赋值相当于 set，且将 set 所赋的值，作为参数传入，此时值为： D: 99-11 x: 100-222
console.log('[computed]==>相当于set 此时这个值为：100-11 x值为100-222: ' + vm.doDF)
console.log('[computed]==>再次打印D: ' + vm.D)
// 此时执行doubleDF，而doubleDF又执行DF，DF返回值为99，doubleDF返回值为DF*2
vm.doubleDF
console.log('[computed]==>vm.doubleDF后的D: ' + vm.doubleDF)
</script>
</body>
</html>
默认进入之后：
image.png
点击三次按钮之后：
image.png
所以他们的执行顺序为：
网友评论