Vue的資料響應式

2022-03-09 03:15:08 字數 1308 閱讀 5767

示例**

示例**

可以給物件新增屬性value

可以給物件新增getter / setter

getter / setter用於對屬性的讀寫進行監控

**:對mydata物件的屬性讀寫,全權由另乙個物件vm負責

那麼vm就是mydata的**

用vm.n來操作mydata.n

當你建立乙個例項時

const vm = new vue()
vue 會讓 vm 成為 mydata 的**。

vue 會對 mydata 的所有屬性進行監控。

目的你可以使用 this 來訪問到 vm。this.n === mydata.n

之所以要監控,就是防止 vue 無法得知 mydata 的屬性變化。

vue 得知屬性變化才可以使用 render(data) 來更新 ui 和渲染頁面。

響應式即對外界的變化做出的反應的一種形式。

const vm = new vue(})
當修改 vm.n 或 data.n 時,render(data...)中的 n 就會做出響應的響應。

這個聯動的過程就是 vue 的 資料響應式。

vue 目前通過object.defineproperty來實現資料響應式。

vue 雖然對 data 中的屬性(或物件中的屬性)進行監聽和**,但是它卻沒有辦法進行事先的監聽和**。

如果你在初始化 data 之後再新增屬性,該如何實現?

一般物件

對於一般的物件來說,可以在 data 中預先把所有可能用到的屬性全部寫出來,這樣並不需要新增屬性,只需要改它。

也可以通過其他方法來新增屬性。

在了解以上原理後,我們來了解 vue 提供的乙個 api:

vue.set(object, key, value)

this.$set(object, key, value)

作用示例:

const vue = window.vue

new vue(

},template: `

}one

`,methods:

}

陣列因為陣列本身的特殊性:陣列的長度無法**(比如所有使用者的使用者名稱,存在陣列中),你無法使用 undefined 去為每一項佔位,或一直使用vue.set( )方法。

Vue 資料響應式

css響應式不用說大家都知道,拖動瀏覽器視窗大小時,內容布局和大小會自動變化。那麼vue的資料響應式就是,例項中,通過修改vm的.n值,就能改變data 中的n。let vm vue vue2中,資料響應式是通過object.defineproperty實現的。如果開發者給乙個data中不存在的變數...

Vue 資料響應式原理

前言 vue.js 的核心包括一套 響應式系統 響應式 是指當資料改變後,vue 會通知到使用該資料的 例如,檢視渲染中使用了資料,資料改變後,檢視也會自動更新。舉個簡單的例子,對於模板 建立乙個 vue 元件 var vm new vue 在 watcher 物件建立過程中,除了記錄 vm get...

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

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