在本章中，我们将学习Watch属性。
- 类型：
{ [key: string]: string | Function | Object | Array } - 详细：一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用
$watch()，遍历 watch 对象的每一个 property。 - 例子：
var vm = new Vue({
data: {
a: 1,
b: 2,
c: 3,
d: 4,
e: {
f: {
g: 5
}
}
},
watch: {
a: function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
},
// 方法名
b: 'someMethod',
// 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深
c: {
handler: function (val, oldVal) { /* ... */ },
deep: true
},
// 该回调将会在侦听开始之后被立即调用
d: {
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': function (val, oldVal) { /* ... */ }
}
})
vm.a = 2 // => new: 2, old: 1注意，不应该使用箭头函数来定义 watcher 函数 (例如 searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.updateAutocomplete 将是 undefined。
接下来，通过一个另外一个完整示例，学习下在如何VueJS中使用Watch属性。
例
<html>
<head>
<title>VueJs - Web176教程网/https://www.web176.com</title>
<script type = "text/javascript" src = "/demo/vue/vue2.min.js"></script>
</head>
<body>
<div id = "computed_props">
Kilometers : <input type = "text" v-model = "kilometers"><br />
Meters : <input type = "text" v-model = "meters">
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#computed_props',
data: {
kilometers : 0,
meters:0
},
methods: {
},
computed :{
},
watch : {
kilometers:function(val) {
this.kilometers = val;
this.meters = val * 1000;
},
meters : function (val) {
this.kilometers = val/ 1000;
this.meters = val;
}
}
});
</script>
</body>
</html>在上面的代码中，我们创建了两个文本框，一个带有km，另一个带有meter。在data属性中，km和meter初始化为0。创建了一个具有两个功能km and meter的watch对象。在这两个功能中，都完成了从公里到米以及从米到公里的转换。
当我们在任何一个texbox中输入值时，无论哪个被更改，Watch都会更新两个文本框。我们不必专门分配任何事件，也不必等待其更改并进行额外的验证工作。Watch负责使用在各个功能中完成的计算来更新文本框。
让我们在“km”文本框中输入一些值，然后在“meter”文本框中看到它的变化，反之亦然。
通过实例解析watch属性，大家应该很快能掌握。
作者：terry，如若转载，请注明出处：https://www.web176.com/vuejs/1048.html
支付宝 
微信 