vue的常见写法:
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) { t
his.fullName = this.firstName + ' ' + val
}
}
})
watch的几种常见写法:
watch:{
firstName: function(newValue, oldValue) {},
// 其中newValue为新的值,oldValue为旧值
b: 'someMethod'
// 回调函数名
c: {
// 该回调会在任何被侦听的对象的 property 改变时被调用,不论其被嵌套多深,deep 即为设置的关键参数,不设置时只能监听一层
handler: function(val, oldVal){ /* ... */ },
deep: true
},
d: {
// immediate参数代表回调会在侦听开始之后立即被调用
handler: 'someMethod',
immediate: true
},
// 你可以传入回调数组,它们会被逐一调用
e: [
'handle1',
function handle2(val, oldVal){ /* ... */ },
{
handler: function handle3(val, oldVal){ /* ... */ },
/* ... */
}
],
// watch vm.e.f's value: {g: 5} ,监听e.f的变化
'e.f': function(val, oldVal){ /* ... */ }
}
注意:不应该使用箭头函数来定义 watcher 函数 (例如 searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例,this.updateAutocomplete 将是 undefined。