vue響應式物件

2021-10-03 02:34:47 字數 986 閱讀 6099

在vue中與檢視中繫結的資料,其資料的變化會驅動檢視的更新,這是因為vue是響應式

那麼有沒有那麼一種情況資料的變化檢視沒有變化呢?

答案肯定是有的,例如物件的屬性變化vue並不能監聽到,因此資料的變化並不能驅動檢視更新

vue也提供了$set方法來更新物件屬性值的變化,但是也會有奇怪的現象比如

}

test

以上**直接改變people.male.name繫結的檢視直接更新了

為什麼在巢狀兩層的物件的值,直接賦值能夠改變,那$set()沒有意義了?

實際上是初始化在data內的資料vue已經全部處理成響應式物件

注意這裡只是在初始化時候的鍵值對是響應式物件的,下面**並不會改變cloth的檢視

}

}test

初始的時候顯示的是111內容,在執行完testdata()後,name變為dust,但是cloth仍然是111,因為新增的屬性並不是響應式的

有人會說這個時候cloth原本並不存在,這個時候是不會變,那在新增完已經存在的情況下,再次修改cloth的值,會觸發檢視更新嗎

先執行testdata(),這時物件內已經存在了cloth,之後再執行testagain(),這時檢視同樣不會發生變化,還是因為此屬性並不在響應式監聽範圍內

那麼就用$set()方法即可把其變為響應式的了

this.$set(this.people.man, 'cloth', 'blue');
這時檢視會觸發更新

綜上所述:

data()內初始化資料vue會處理成響應式屬性

$set()可以把新增的處理成響應式屬性

直接新增新的屬性並不能成為響應式屬性

陣列push等操作可觸發更新vue已對此類操作做了特殊處理

vue響應式布局 Vue 響應式原理

vue2 的資料偵測 在 src observer 目錄裡面,元件例項在初始化時,會呼叫 observe 函式處理 data function initdata vm observe 改寫了所有物件屬性的 getter setter 和陣列原型上的 7 個會改寫陣列方法,從而讓 data 變成可響應...

Vue 響應式屬性

本文參考自 1 概述 當建立乙個vue例項時,每個資料屬性 元件屬性等都是可以遍歷的,並為每個資料屬性新增了getter和setter。getter和setter允許vue觀察資料的更改並觸發更新。如果你在vue例項化後新增 或刪除 乙個屬性 例如在方法或生命週期鉤子中 vue是不知道它的。2 更新...

vue響應式原理

響應式系統是vue框架核心的部分,資料物件僅僅是普通的 js物件。當我們改變資料時,檢視也會被改變,本文就來 一下vue 的響應式原理。vue響應式的核心是使用了es5 新增的api object.defineproperty 因此vue不支援ie8 object.defineproperty的作用...