在使用Vue的過程中,我們有時需要往Vue實例的對象上添加一些屬性或方法,這樣可以讓我們更好地擴展Vue應用的功能。在Vue中,我們可以使用Vue.set()方法、Vue.observable()方法或直接修改對象屬性等方式來添加屬性。
一、使用Vue.set()方法
Vue.set(obj, key, value);
具體用法如下:
var vm = new Vue({ data: { obj: {} } }); Vue.set(vm.obj, 'name', 'tom'); console.log(vm.obj.name); //輸出tom
上述代碼中,我們創建了一個Vue實例,其data屬性中有一個空對象obj。通過Vue.set()方法,我們向該對象中添加了一個屬性name,其值為‘tom’。在控制臺中輸出vm.obj.name, 結果為‘tom’,說明添加成功。
二、使用Vue.observable()方法
var obj = Vue.observable({}); obj.name = 'tom'; console.log(obj.name); //輸出tom
如上代碼所示,我們同樣可以創建一個空對象obj,并通過obj.name = ‘tom’的形式向其中添加屬性。不同的是,在創建對象時我們使用了Vue.observable()方法,該方法會將對象轉化為響應式對象,當該對象的屬性發生變化時,Vue會自動更新視圖。
三、直接修改對象屬性
var vm = new Vue({ data: { obj: {} } }); vm.obj.name = 'tom'; console.log(vm.obj.name); //輸出tom
上述代碼中,我們直接給Vue實例中的data屬性對象obj添加了屬性name,并將其值設為‘tom’。我們在控制臺中輸出vm.obj.name,結果也自然為‘tom’。然而,如果該屬性不在實例創建時就存在,而是后期添加的,那么Vue將不會監聽到它的變化。
總結:
添加屬性時,我們可以選擇使用Vue.set()方法或Vue.observable()方法,也可以直接修改屬性的值。Vue.set()方法適用于在Vue實例創建時就添加的屬性,Vue.observable()方法適用于后期添加的屬性,直接修改屬性則不推薦使用。此外還需要注意的是,使用Vue.observable()方法創建的對象是響應式的,其屬性變化會自動更新視圖。