Vue踩坑之Vue?Watch方法不能監(jiān)聽到數(shù)組或對象值的改變詳解

更新時間：2022年04月01日 10:10:19 作者：星海拾遺

Vue 提供了一種更通用的方式來觀察和響應 Vue 實例上的數(shù)據(jù)變動:偵聽屬性,下面這篇文章主要給大家介紹了關于Vue踩坑之Vue?Watch方法不能監(jiān)聽到數(shù)組或對象值的改變的相關資料,需要的朋友可以參考下

前言

Vue不能監(jiān)聽到數(shù)組和對象值的變化其實和雙向綁定的原理有關。Vue雙向綁定原理是利用js中的Object.defineproperty重定義對象的GET和SET方法，而同時這種方法存在著缺陷。就是只能監(jiān)聽到對象內已有的值。在監(jiān)聽對象中屬性變化的方法中中，無疑是使用ES6的proxy更為優(yōu)越。

同時我對Vue中不能監(jiān)聽到數(shù)組對象變化也做了試驗。代碼如下。

 let vm = new Vue({
        el: '#app',
        data: {
            message: 'wxs',
            arr:[1,2,3],
            obj:{
                name:'wxs',
                age:21
            }
        },
        methods:{
            change:function () {
                this.message = 'vue'
                this.arr[0]=100
                this.obj.name='xxx'
            }
        },
        watch:{
            message:function (newValue,oldValue) {
                console.log('message改變了')
            },
            arr:function (newValue,oldValue) {
                console.log('arr改變了')
            },
            obj:function (newValue,oldValue) {
                console.log('obj改變了')
            }
        },
        template: `<div><div>{{message}}</div><div>{{arr[0]}}</div><div>{{obj.name}}</div><button @click="change()">改變!</button></div>`
    })

很簡單的代碼，設置按鈕改變message，arr，obj的值，同時對這三個值的變化設置監(jiān)聽事件，測試結果如下。

視圖顯示三個值都發(fā)生了改變，但是Vue只監(jiān)聽到了第一個值的改變。

官方文檔給出如下解釋

對此Vue提供了解決辦法。

Vue不能監(jiān)聽到數(shù)組變化官方文檔中提出有以下有兩種情況。

一：利用索引直接改變arr的值如我在button事件中寫的（arr[0]=1000）

解決方法將this.arr[0]=1000改寫為Vue可以監(jiān)聽的形式 this.$set(this.arr,0,1000)

this.$set接受三個參數(shù)，第一個是需要操作的數(shù)組對象，第二個是需要修改的數(shù)據(jù)的數(shù)組下標，第三個是修改后的值。

上圖看效果。

將修改arr值得方法修改如下

        methods:{
            change:function () {
                this.message = 'vue'
                this.$set(this.arr,0,100)
                this.obj.name='xxx'
            }
        },

成功監(jiān)聽

二：直接修改數(shù)組的長度如this.arr.length=3

來做個測試。我們用修改數(shù)組長度得方法刪除數(shù)組中的值，看看watch能不能監(jiān)聽的到。

        methods:{
            change:function () {
                this.message = 'vue'
                this.arr.length=0
                this.obj.name='xxx'
            }
        },

結果，監(jiān)聽不到。

解決方法使用js中數(shù)組方法arr.splice操作數(shù)組達到修改長度的目的。

看看效果

        methods:{
            change:function () {
                this.message = 'vue'
                this.arr.splice(0,1)
                this.obj.name='xxx'
            }
        },

我們將數(shù)組的第一個值刪除，此時數(shù)組的第二個值變成了arr[0]，渲染到了頁面中，watch監(jiān)聽成功。

Vue中無法監(jiān)聽對象屬性的添加或者刪除

解決方法：this.$set（obj，name，‘xxx’）對對象進行操作時，set接受三個參數(shù)，第一個為對象的名稱，第二個為對象的key值，第三個為key對應的value值。

this.obj=Object.assign（{}，this.arr，{
age：21，
major：'soft'
}）

這樣操作之后，便可以成功監(jiān)聽到數(shù)組和對象的變化了

methods:{
            change:function () {
                this.message = 'vue'              
                this.$set(this.arr,1,100)
                this.$set(this.obj,'major','Vue')
            }
        },

控制臺輸出如下

那么問題來了，我改變的是對象的新值‘major’的值，請注意看我上面代碼中method方法中的設置obj的代碼。

此時Vue只是監(jiān)聽到了我改變了對象的新值。經(jīng)過我測試，我改變對象的舊值，比如name值。Vue依然監(jiān)聽不到對象的變化。此時Vue提出了深度監(jiān)聽的方法如下。

但是這種方法經(jīng)過我測試不能監(jiān)聽到對象新值的變化。

總結如下

總結：如果操作對象是數(shù)組，改變數(shù)組的值用Vue的$set方法，改變數(shù)組的長度用數(shù)組的splice方法使數(shù)組變化變成可監(jiān)聽的。如果操作對象是對象。如果操作的屬性是對象內已經(jīng)有的值，使用$watch,加上關鍵字deep深度監(jiān)聽對象，如果操作的屬性是對象內沒有的新屬性。使用$set使對象變成可監(jiān)聽的！

到此這篇關于Vue踩坑之Vue Watch方法不能監(jiān)聽到數(shù)組或對象值的改變的文章就介紹到這了,更多相關Vue Watch方法不能監(jiān)聽數(shù)組內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: