在线观看国产一区二区三区,亚洲最大av网站在线观看,中美日韩毛片免费观看

快捷導(dǎo)航

Vue踩坑之Vue?Watch方法不能監(jiān)聽(tīng)到數(shù)組或?qū)ο笾档母淖冊(cè)斀?/h1>

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

Vue 提供了一種更通用的方式來(lái)觀察和響應(yīng) Vue 實(shí)例上的數(shù)據(jù)變動(dòng):偵聽(tīng)屬性,下面這篇文章主要給大家介紹了關(guān)于Vue踩坑之Vue?Watch方法不能監(jiān)聽(tīng)到數(shù)組或?qū)ο笾档母淖兊南嚓P(guān)資料,需要的朋友可以參考下

前言

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

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

 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>`
    })

很簡(jiǎn)單的代碼，設(shè)置按鈕改變message，arr，obj的值，同時(shí)對(duì)這三個(gè)值的變化設(shè)置監(jiān)聽(tīng)事件，測(cè)試結(jié)果如下。

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

官方文檔給出如下解釋

對(duì)此Vue提供了解決辦法。

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

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

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

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

上圖看效果。

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

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

成功監(jiān)聽(tīng)

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

來(lái)做個(gè)測(cè)試。我們用修改數(shù)組長(zhǎng)度得方法刪除數(shù)組中的值，看看watch能不能監(jiān)聽(tīng)的到。

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

結(jié)果，監(jiān)聽(tīng)不到。

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

看看效果

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

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

Vue中無(wú)法監(jiān)聽(tīng)對(duì)象屬性的添加或者刪除

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

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

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

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

控制臺(tái)輸出如下

那么問(wèn)題來(lái)了，我改變的是對(duì)象的新值‘major’的值，請(qǐng)注意看我上面代碼中method方法中的設(shè)置obj的代碼。

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

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

總結(jié)如下

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

到此這篇關(guān)于Vue踩坑之Vue Watch方法不能監(jiān)聽(tīng)到數(shù)組或?qū)ο笾档母淖兊奈恼戮徒榻B到這了,更多相關(guān)Vue Watch方法不能監(jiān)聽(tīng)數(shù)組內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: