作為一個接觸 vue 才一個多月的小白，馬上就接手基于 vue 的大型商城項目，其間真是跌跌撞撞踩了好多坑（o(╥﹏╥)o）。在此寫下自己的踩坑之旅，希望給跟我一樣還在自學 vue 的同學一些幫助，另外大佬如果有更好的解決辦法，請不吝賜教。

watch 偵聽屬性有如下屬性：
1. handler：監聽數組或對象的屬性時用到的方法
2. deep：深度監聽，為了發現對象內部值的變化，可以在選項參數中指定 deep:true 。
3. immediate: 在選項參數中指定 immediate: true 將立即以表達式的當前值觸發回調
4. tips: 只要bet中的屬性發生變化（可被監測到的），便會執行handler函數；如果想監測具體的屬性變化，如pokerHistory變化時，才執行handler函數，則可以利用計算屬性computed做中間層。

watch 偵聽屬性其實用得挺多的，但是我之前只是簡單的應用了：

data() {return { frontPoints: 0 } }, watch: {frontPoints(newValue, oldValue) {console.log(newValue)} }復制代碼

但是現在項目中需要偵聽的屬性結構比較復雜：

data() { return { commentForm: { OrderId: null, ShopScore: null,ScoreDetailList: [// {// CommodityScore: null,// OrderDetailId: null,// Content: '',// FileIdLIst: []// },]}} }復制代碼

如果我想監聽?ShopScore 和 未知長度的數組? ScoreDetailList

watch: {'commentForm.ScoreDetailList': {function(val) {console.log(val)},deep: true},'commentForm.ShopScore': function (val) {console.log(val)} }復制代碼

此時就會報錯：

使用深度監聽 deep: true 也會報同樣的錯誤。

其實數組和對象的 newValue 和 oldValue 是相等的，都指向同一個引用對象，所以watch 無法監聽到變化

之后我就總結了幾種情況：

1. watch 普通屬性（非數組和對象）

2. watch 數組（不能使用?deep: true?）

data() {return {Array1: new Array(11).fill(0)} }, watch: {Array1: {　handler(newValue, oldValue) {newValue.forEach((item, i) => {if (item !== oldValue[i]) {console.log(newValue)　}}},　} }復制代碼

3. watch 對象

data() {return {obj: {age: 53,name: 'lakey'}} }, watch: {obj: {handler(newValue, oldValue) {console.log(newValue)　　　　},deep: true} }復制代碼

4. watch 對象具體屬性

這里有兩個方案，已是直接寫具體屬性：

data() {return {obj: {age: 53,name: 'lakey'}} }, watch: {'obj.name': {handler(newValue, oldValue) {console.log(newValue)　　　　}} }復制代碼

另一種，是活用計算屬性 computed

data() {return {obj: {age: 53,name: 'lakey'}} }, computed: {obj() {return this.obj.name} }, watch: {name(newValue, oldValue) {console.log(newValue)} } 復制代碼

------------------------------補上我的項目的解決辦法----------------------------------------

watch: {'commentForm.ScoreDetailList': {handler(newVal) {// 假設沒有變化let flag = falsenewVal.forEach((item) => {if (item.CommodityScore) {flag = true}if (this.Trim(item.Content)) {flag = true}})if (flag) {this.errmessage = ''this.$refs.tabBox.style.borderColor = '#d9e3eb'}},deep: true},'commentForm.ShopScore': function () {this.errmessage = ''this.$refs.tabBox.style.borderColor = '#d9e3eb'}},復制代碼

轉載于:https://juejin.im/post/5d02009ae51d4510bf1d6665

總結

以上是生活随笔為你收集整理的Vue踩坑之旅（一）—— 数组、对象的监听的全部內容，希望文章能夠幫你解決所遇到的問題。

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