Vue之this.$set的使用——響應式添加對象屬性

this.$set說明

語法

Vue.set( target, propertyName/index, value )

參數

參數	類型	說明
taget	Object | Array	需要添加或修改屬性的目標對象
propertyName/index	string | number	屬性名稱或索引
value	any	設定的值

用法

向響應式對象中添加一個 property，並確保這個新 property 同樣是響應式的，且觸發視圖更新。它必須用於向響應式對象上添加新 property，因為 Vue 無法探測普通的新增 property (比如  this.myObject.newProperty = 'hi' )

注意對象不能是 Vue 實例，或者 Vue 實例的根數據對象。

為什么要使用this.$set

舉一個例子，我們用常規方法直接為對象添加屬性。

<template >
    <view class="flex flex-direction bg-white">
        <view>姓名:{{ student.name }}</view>
        <view>年齡:{{ student.age }}</view>
        <button class="cu-btn bg-blue" @click="addProperty">添加年齡屬性</button>
    </view>
</template>

export
default {
        data() {
            return {
                student:
                {
                    name:
                    '張三',
                }
            }
        },
        methods: {
            addProperty: function(e) {
                this.student.age = 15;
                console.log("student=>", this.student);
            }
        }
    }

點擊按鈕時，我們發現年齡屬性：添加了，但沒有完全添加。——數據中已經有了“age”屬性，但視圖層沒有顯示出來。

 

 

視圖層為什么沒有添加的屬性？

由於受JavaScript的限制，vue.js不能監聽對象屬性的添加和刪除，因為在vue組件初始化的過程中，會調用getter和setter方法，所以該屬性必須是存在在data中，視圖層才會響應該數據的變化。

如何解決？

解決的其中一種方法，就是使用 $set 。我們將 addProperty 進行修改。

addProperty: function(e) {
    this.$set(this.student, "age", 15) console.log("student=>", this.student);
}

結果，無論是數據還是視圖層，都符合了我們的預期。

 

參考網址

• https://blog.csdn.net/hhkongbai/article/details/101022019
• https://cn.vuejs.org/v2/api/#vm-set