Vue2.0的watch属性-（5）
2017-07-22 本文已影响8439人
addin_gao
内容介绍：
- watch属性介绍
- watch属性，观测值的三种写法
- watch观测对象注意不能使用箭头函数
- watch的实战-观测数组内所有对象的某个值的变化
watch属性：watch是vue实列的一个属性，它是一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。
var vm = new Vue({
data: {
a: 1,
b: 2,
c: 3
},
watch: {
//第一种写法 适用于普通变量（简单类型的值的观测写法）
a: function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
},
// 第二种写法：方法名
b: 'someMethod',
// 第三种写法：深度 watcher(能观测对象c下多重属性变化)（复杂类型的值的观测写法）
c: {
//当c变化后会回调handler函数
handler: function (val, oldVal) { /* ... */ },
deep: true
}
}
})
vm.a = 2 // -> new: 2, old: 1
** 注意:不能使用箭头函数定义watcher（回调）函数，因为箭头函数绑定了父级作用域的上下文，所以里面的 this 将不会按照期望指向 Vue 实例**
watch: {
// 这里面的this指向了vue实列 ----Vue$3 {_uid: 0, _isVue: true, $options: Object, _renderProxy: Proxy, _self: Vue$3…}
a: function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
},
// 箭头函数：这里的this指向的是window-----Window {stop: function, open: function, alert: function, confirm: function, prompt: function…}
b:()=>{
console.log(this.a);
},
// 深度 watcher
c: {
handler: function (val, oldVal) { /* ... */ },
deep: true
}
}
watch的实战-观测数组内所有对象的某个值的变化：
我们常常会遇到请求回来的数据，计算订单的数量和或价格，值变化的时候数量显示也要变化:
<body>
<div id="app">
<span>{{count}}</span>
</div>
<script>
var vm = new Vue({
el:'#app',
data: {
count:0,
items : [
{
id: 336,
title: '炒肉',
count: 1,
price: 106
},
{
id: 337,
title: '生菜',
count: 2,
price: 225
}
]
},
watch: {
"items":{
handler(){
this.count = 0
this.items.forEach((item)=>{
this.count +=item.count
});
},
deep:true
}
}
})
</script>
</body>
11-watch属性.gif
