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。