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。

總結

以上是生活随笔為你收集整理的Vue中watch的简单应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。