Vue.js 有一个方法 watch，它可以用来监测Vue实例上的数据变动。

如果对应一个对象，键是观察表达式，值是对应回调，值也可以是方法名，或者是对象，包含选项。

 

下面写两个demo，参考demo来了解一下

demo1

<template><div><el-input v-model="demo"></el-input>{{value}}</div>
</template>
<script>export default {name: 'index',data() {return {demo: '',value: ''};},watch: {demo(val) {this.value = this.demo;}}};
</script>

上面这个就浅显易懂了，通过watch来直接监测demo，如果demo的值变化，value的值也会跟着一起变化。

 

demo2

 

<template><div><el-input v-model="demo.name"></el-input>{{value}}</div>
</template>
<script>export default {name: 'index',data() {return {demo: {name: ''},value: ''};},computed: {newName() {return this.demo.name;}},watch: {newName(val) {this.value = val;}}};
</script>

 

上面这个例子，如果watch监测的是一个对象的话，直接使用watch是不行的，此时我们可以借助于computed计算属性来完成。

 

demo3

 

<div id="app"><input type="text" v-model="childrens.name" /><input type="text" v-model="lastName" />
</div><script type="text/javascript">var vm = new Vue( {el: '#app',data: {childrens: {name: '小强',age: 20,sex: '男'},tdArray:["1","2"],lastName:"张三"},watch:{childrens:{handler:function(val,oldval){console.log(val.name)},deep:true//对象内部的属性监听，也叫深度监听},'childrens.name':function(val,oldval){console.log(val+"aaa")},//键路径必须加上引号lastName:function(val,oldval){console.log(this.lastName)}},//以V-model绑定数据时使用的数据变化监测} );vm.$watch("lastName",function(val,oldval){console.log(val)})//主动调用$watch方法来进行数据监测
</script>
</body>

 

数组的变化，不需要深度watch。