Vue 資料響應式原理

2021-08-28 23:34:18 字數 1157 閱讀 4555

前言

vue.js 的核心包括一套「響應式系統」。

「響應式」,是指當資料改變後,vue 會通知到使用該資料的**。例如,檢視渲染中使用了資料,資料改變後,檢視也會自動更新。

舉個簡單的例子,對於模板:

}建立乙個 vue 元件:

var vm = new vue()

在 watcher 物件建立過程中,除了記錄 vm、getter、cb 以及初始化各種屬性外,最重要的就是呼叫了傳入的 getter 函式:

observer/watcher.js#l103

// new watcher() -> watcher.get()

value = this.getter.call(vm, vm)

在 getter 函式的執行過程中,獲取讀取需要的資料,於是觸發了前面通過 definereactive() 配置的 get 方法:

if (dep.target)  else if (this.sync)  else  = require('@luobotang/watch-it')

const data = {

name: 'luobo',

age: 18

observe(data)

const userinfo = function() {

return data.name + ' - ' + data.age

watch(userinfo, (value) => console.log(value))

這樣,當資料修改時,通過會列印出新的 userinfo 的值。

去除虛擬 dom,只通過響應式機制,我還構建了乙個簡單的 vue,並實現了乙個 demo:

watch-it/example/

原始碼在這裡:

luobotang/watch-it/example/vue.js

總結

ok,以上就是有關 vue 響應式原理的全部了,當然,只是我的理解和實踐。

在梳理和寫下這些內容的過程中,我收穫很多,也希望內容能夠對你有所幫助。

水平有限,錯漏難免,歡迎指出。

最後,感謝閱讀!

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

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

vue響應式原理

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

vue響應式原理

要了解響應式原理首先應該知道什麼是響應式 更改 vue的響應式原理是什麼 vue資料的雙向繫結是通過資料劫持結合發布訂閱模式,偵測到資料變化,然後通過object.defineproperty 物件對每個屬性的getter和setter進行劫持。當讀取 data 中的資料時自動呼叫 get 方法,當...