Vue 官網(wǎng)解釋：

Vue 提供了一種更通用的方式來觀察和響應(yīng) Vue 實例上的數(shù)據(jù)變動：偵聽屬性。當(dāng)你有一些數(shù)據(jù)需要隨著其它數(shù)據(jù)變動而變動時，你很容易濫用 watch——特別是如果你之前使用過 AngularJS。然而，通常更好的做法是使用計算屬性而不是命令式的 watch 回調(diào)。

---

watch 監(jiān)聽數(shù)據(jù)分為兩種情況：

第一種：基本類型數(shù)據(jù)監(jiān)聽

比如：字符串，整數(shù)，Boolean，類型的數(shù)據(jù)

第二種：引用類型數(shù)據(jù)監(jiān)聽

比如：對象，和數(shù)組

---

基本類型數(shù)據(jù)監(jiān)聽實例

HTML

<div id="demo">{{ fullName }}</div>

JS

var vm = new Vue({el: '#demo',data: {firstName: 'Foo',lastName: 'Bar',fullName: 'Foo Bar'},watch: {firstName: function (val) {this.fullName = val + ' ' + this.lastName},lastName: function (val) {this.fullName = this.firstName + ' ' + val}} })

引用類型數(shù)據(jù)監(jiān)聽

props: {secdown: {type: Object,default: () => ({})}},watch: {secdown: {handler(val) {this.changeChoose(val);},deep: true,immediate: true}}

這里注意，因為是對象或者數(shù)據(jù)時候，vue不能進行到深層拷貝，所以需要加上 deep: true,如果還需要數(shù)據(jù)立即進行監(jiān)聽，則需要在加上 immediate: true。

總結(jié)

以上是生活随笔為你收集整理的vue2.0 watch的注意事项的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。