在Vue中,當我們需要改變一個對象的屬性值時,我們通常會使用Vue提供的響應式機制來進行處理。這個機制的核心是使用了ES5 Object.defineProperty()函數或ES2015 Proxy對象來監聽對象屬性的變化,從而實現了當對象屬性值變化時,視圖也能夠自動更新。在Vue中,使用這種方式對對象屬性進行改變時,需要注意一些細節。
//示例代碼 var data = { name: '張三', age: 18, address: { province: '浙江', city: '杭州' } }; //Vue實例 var vm = new Vue({ el: '#app', data: data }); //改變嵌套對象屬性值 vm.address.province = '江蘇'; //改變嵌套對象引用 vm.address = { province: '廣東', city: '深圳' }; //添加新屬性 vm.phone = '13988888888';
第一種情況,改變嵌套對象的屬性值時,如示例代碼中的vm.address.province = '江蘇',Vue會自動更新視圖,因為Vue監聽了address對象內部屬性的變化。然而,如果我們直接改變嵌套對象的引用,如示例代碼中的vm.address = {province: '廣東', city: '深圳'},Vue就不會自動更新視圖了。
為什么會這樣呢?因為Vue只監聽了對象屬性的變化,而沒有監聽對象引用的變化。因此,當我們直接改變對象引用時,Vue并不能感知到這種變化。這時,我們需要手動調用Vue提供的$set方法(Vue.set),來將新對象設置為響應式的。
//調用Vue.set Vue.set(vm, 'address', { province: '廣東', city: '深圳' });
第二種情況,如果我們想要添加新的屬性到一個已經存在的對象中,我們在ES6中可以使用Object.assign()函數來實現,但是這種方式在Vue中是無效的,因為Vue只對已經存在的屬性進行響應式處理。因此,我們需要使用Vue提供的$set方法來添加新屬性。
//調用Vue.set Vue.set(vm, 'phone', '13988888888');
總之,在Vue中對對象進行改變時,需要結合其響應式機制來使用,特別是當我們操作嵌套的對象或者添加新的屬性時,需要注意以上細節,否則會導致視圖不能自動更新。
上一篇vue 實現多個倒計
下一篇vue 實現深拷貝