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。
嗯，就醬~