詳細(xì)分析vue響應(yīng)式原理
前言
響應(yīng)式原理作為 Vue 的核心，使用數(shù)據(jù)劫持實(shí)現(xiàn)數(shù)據(jù)驅(qū)動(dòng)視圖。在面試中是經(jīng)?？疾榈闹R(shí)點(diǎn)，也是面試加分項(xiàng)。
本文將會(huì)循序漸進(jìn)的解析響應(yīng)式原理的工作流程，主要以下面結(jié)構(gòu)進(jìn)行：
- 分析主要成員，了解它們有助于理解流程
- 將流程拆分，理解其中的作用
- 結(jié)合以上的點(diǎn)，理解整體流程
文章稍長(zhǎng)，但大部分是代碼實(shí)現(xiàn)，還請(qǐng)耐心觀看。為了方便理解原理，文中的代碼會(huì)進(jìn)行簡(jiǎn)化，如果可以請(qǐng)對(duì)照源碼學(xué)習(xí)。
主要成員
響應(yīng)式原理中，Observe、Watcher、Dep這三個(gè)類是構(gòu)成完整原理的主要成員。
- Observe，響應(yīng)式原理的入口，根據(jù)數(shù)據(jù)類型處理觀測(cè)邏輯
- Watcher，用于執(zhí)行更新渲染，組件會(huì)擁有一個(gè)渲染W(wǎng)atcher，我們常說的收集依賴，就是收集 Watcher
- Dep，依賴收集器，屬性都會(huì)有一個(gè)Dep，方便發(fā)生變化時(shí)能夠找到對(duì)應(yīng)的依賴觸發(fā)更新
下面來(lái)看看這些類的實(shí)現(xiàn)，包含哪些主要屬性和方法。
Observe：我會(huì)對(duì)數(shù)據(jù)進(jìn)行觀測(cè)
溫馨提示：代碼里的序號(hào)對(duì)應(yīng)代碼塊下面序號(hào)的講解
// 源碼位置：/src/core/observer/index.js
class Observe {
constructor(data) {
this.dep = new Dep()
// 1
def(data, '__ob__', this)
if (Array.isArray(data)) {
// 2
protoAugment(data, arrayMethods)
// 3
this.observeArray(data)
} else {
// 4
this.walk(data)
}
}
walk(data) {
Object.keys(data).forEach(key => {
defineReactive(data, key, data[key])
})
}
observeArray(data) {
data.forEach(item => {
observe(item)
})
}
}
- 為觀測(cè)的屬性添加 __ob__ 屬性，它的值等于 this，即當(dāng)前 Observe 的實(shí)例
- 為數(shù)組添加重寫的數(shù)組方法，比如：push、unshift、splice 等方法，重寫目的是在調(diào)用這些方法時(shí)，進(jìn)行更新渲染
- 觀測(cè)數(shù)組內(nèi)的數(shù)據(jù)，observe 內(nèi)部會(huì)調(diào)用 new Observe，形成遞歸觀測(cè)
- 觀測(cè)對(duì)象數(shù)據(jù)，defineReactive 為數(shù)據(jù)定義 get 和 set ，即數(shù)據(jù)劫持
Dep：我會(huì)為數(shù)據(jù)收集依賴
// 源碼位置：/src/core/observer/dep.js
let id = 0
class Dep{
constructor() {
this.id = ++id // dep 唯一標(biāo)識(shí)
this.subs = [] // 存儲(chǔ) Watcher
}
// 1
depend() {
Dep.target.addDep(this)
}
// 2
addSub(watcher) {
this.subs.push(watcher)
}
// 3
notify() {
this.subs.forEach(watcher => watcher.update())
}
}
// 4
Dep.target = null
export function pushTarget(watcher) {
Dep.target = watcher
}
export function popTarget(){
Dep.target = null
}
export default Dep
- 據(jù)收集依賴的主要方法，Dep.target 是一個(gè) watcher 實(shí)例
- 添加 watcher 到數(shù)組中，也就是添加依賴
- 屬性在變化時(shí)會(huì)調(diào)用 notify 方法，通知每一個(gè)依賴進(jìn)行更新
- Dep.target 用來(lái)記錄 watcher 實(shí)例，是全局唯一的，主要作用是為了在收集依賴的過程中找到相應(yīng)的 watcher
pushTarget 和 popTarget 這兩個(gè)方法顯而易見是用來(lái)設(shè)置 Dep.target的。Dep.target 也是一個(gè)關(guān)鍵點(diǎn)，這個(gè)概念可能初次查看源碼會(huì)有些難以理解，在后面的流程中，會(huì)詳細(xì)講解它的作用，需要注意這部分的內(nèi)容。
Watcher：我會(huì)觸發(fā)視圖更新
// 源碼位置：/src/core/observer/watcher.js
let id = 0
export class Watcher {
constructor(vm, exprOrFn, cb, options){
this.id = ++id // watcher 唯一標(biāo)識(shí)
this.vm = vm
this.cb = cb
this.options = options
// 1
this.getter = exprOrFn
this.deps = []
this.depIds = new Set()
this.get()
}
run() {
this.get()
}
get() {
pushTarget(this)
this.getter()
popTarget(this)
}
// 2
addDep(dep) {
// 防止重復(fù)添加 dep
if (!this.depIds.has(dep.id)) {
this.depIds.add(dep.id)
this.deps.push(dep)
dep.addSub(this)
}
}
// 3
update() {
queueWatcher(this)
}
}
- this.getter 存儲(chǔ)的是更新視圖的函數(shù)
- watcher 存儲(chǔ) dep，同時(shí) dep 也存儲(chǔ) watcher，進(jìn)行雙向記錄
- 觸發(fā)更新，queueWatcher 是為了進(jìn)行異步更新，異步更新會(huì)調(diào)用 run 方法進(jìn)行更新頁(yè)面
響應(yīng)式原理流程
對(duì)于以上這些成員具有的功能，我們都有大概的了解。下面結(jié)合它們，來(lái)看看這些功能是如何在響應(yīng)式原理流程中工作的。
數(shù)據(jù)觀測(cè)
數(shù)據(jù)在初始化時(shí)會(huì)通過 observe 方法來(lái)創(chuàng)建 Observe 類
// 源碼位置：/src/core/observer/index.js
export function observe(data) {
// 1
if (!isObject(data)) {
return
}
let ob;
// 2
if (data.hasOwnProperty('__ob__') && data.__ob__ instanceof Observe) {
ob = data.__ob__
} else {
// 3
ob = new Observe(data)
}
return ob
}
在初始化時(shí)，observe 拿到的 data 就是我們?cè)?data 函數(shù)內(nèi)返回的對(duì)象。
- observe 函數(shù)只對(duì) object 類型數(shù)據(jù)進(jìn)行觀測(cè)
- 觀測(cè)過的數(shù)據(jù)都會(huì)被添加上 __ob__ 屬性，通過判斷該屬性是否存在，防止重復(fù)觀測(cè)
- 創(chuàng)建 Observe 類，開始處理觀測(cè)邏輯
對(duì)象觀測(cè)
進(jìn)入 Observe 內(nèi)部，由于初始化的數(shù)據(jù)是一個(gè)對(duì)象，所以會(huì)調(diào)用 walk 方法:
walk(data) {
Object.keys(data).forEach(key => {
defineReactive(data, key, data[key])
})
}
defineReactive 方法內(nèi)部使用 Object.defineProperty 對(duì)數(shù)據(jù)進(jìn)行劫持，是實(shí)現(xiàn)響應(yīng)式原理最核心的地方。
function defineReactive(obj, key, value) {
// 1
let childOb = observe(value)
// 2
const dep = new Dep()
Object.defineProperty(obj, key, {
get() {
if (Dep.target) {
// 3
dep.depend()
if (childOb) {
childOb.dep.depend()
}
}
return value
},
set(newVal) {
if (newVal === value) {
return
}
value = newVal
// 4
childOb = observe(newVal)
// 5
dep.notify()
return value
}
})
}
- 由于值可能是對(duì)象類型，這里需要調(diào)用 observe 進(jìn)行遞歸觀測(cè)
- 這里的 dep 就是上面講到的每一個(gè)屬性都會(huì)有一個(gè) dep，它是作為一個(gè)閉包的存在，負(fù)責(zé)收集依賴和通知更新
- 在初始化時(shí)，Dep.target 是組件的渲染 watcher，這里 dep.depend 收集的依賴就是這個(gè) watcher，childOb.dep.depend 主要是為數(shù)組收集依賴
- 設(shè)置的新值可能是對(duì)象類型，需要對(duì)新值進(jìn)行觀測(cè)
- 值發(fā)生改變，dep.notify 通知 watcher 更新，這是我們改變數(shù)據(jù)后能夠?qū)崟r(shí)更新頁(yè)面的觸發(fā)點(diǎn)
通過 Object.defineProperty 對(duì)屬性定義后，屬性的獲取觸發(fā) get 回調(diào)，屬性的設(shè)置觸發(fā) set 回調(diào)，實(shí)現(xiàn)響應(yīng)式更新。
通過上面的邏輯，也能得出為什么 Vue3.0 要使用 Proxy 代替 Object.defineProperty 了。Object.defineProperty 只能對(duì)單個(gè)屬性進(jìn)行定義，如果屬性是對(duì)象類型，還需要遞歸去觀測(cè)，會(huì)很消耗性能。而 Proxy 是代理整個(gè)對(duì)象，只要屬性發(fā)生變化就會(huì)觸發(fā)回調(diào)。
數(shù)組觀測(cè)
對(duì)于數(shù)組類型觀測(cè)，會(huì)調(diào)用 observeArray 方法：
observeArray(data) {
data.forEach(item => {
observe(item)
})
}
與對(duì)象不同，它執(zhí)行 observe 對(duì)數(shù)組內(nèi)的對(duì)象類型進(jìn)行觀測(cè)，并沒有對(duì)數(shù)組的每一項(xiàng)進(jìn)行 Object.defineProperty 的定義，也就是說數(shù)組內(nèi)的項(xiàng)是沒有 dep 的。
所以，我們通過數(shù)組索引對(duì)項(xiàng)進(jìn)行修改時(shí)，是不會(huì)觸發(fā)更新的。但可以通過 this.$set 來(lái)修改觸發(fā)更新。那么問題來(lái)了，為什么 Vue 要這樣設(shè)計(jì)？
結(jié)合實(shí)際場(chǎng)景，數(shù)組中通常會(huì)存放多項(xiàng)數(shù)據(jù)，比如列表數(shù)據(jù)。這樣觀測(cè)起來(lái)會(huì)消耗性能。還有一點(diǎn)原因，一般修改數(shù)組元素很少會(huì)直接通過索引將整個(gè)元素替換掉。例如：
export default {
data() {
return {
list: [
{id: 1, name: 'Jack'},
{id: 2, name: 'Mike'}
]
}
},
cretaed() {
// 如果想要修改 name 的值，一般是這樣使用
this.list[0].name = 'JOJO'
// 而不是以下這樣
// this.list[0] = {id:1, name: 'JOJO'}
// 當(dāng)然你可以這樣更新
// this.$set(this.list, '0', {id:1, name: 'JOJO'})
}
}
數(shù)組方法重寫
當(dāng)數(shù)組元素新增或刪除，視圖會(huì)隨之更新。這并不是理所當(dāng)然的，而是 Vue 內(nèi)部重寫了數(shù)組的方法，調(diào)用這些方法時(shí)，數(shù)組會(huì)更新檢測(cè)，觸發(fā)視圖更新。這些方法包括：
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
回到 Observe 的類中，當(dāng)觀測(cè)的數(shù)據(jù)類型為數(shù)組時(shí)，會(huì)調(diào)用 protoAugment 方法。
if (Array.isArray(data)) {
protoAugment(data, arrayMethods)
// 觀察數(shù)組
this.observeArray(data)
} else {
// 觀察對(duì)象
this.walk(data)
}
這個(gè)方法里把數(shù)組原型替換為 arrayMethods ，當(dāng)調(diào)用改變數(shù)組的方法時(shí)，優(yōu)先使用重寫后的方法。
function protoAugment(data, arrayMethods) {
data.__proto__ = arrayMethods
}
接下來(lái)看看 arrayMethods 是如何實(shí)現(xiàn)的:
// 源碼位置：/src/core/observer/array.js
// 1
let arrayProto = Array.prototype
// 2
export let arrayMethods = Object.create(arrayProto)
let methods = [
'push',
'pop',
'shift',
'unshift',
'reverse',
'sort',
'splice'
]
methods.forEach(method => {
arrayMethods[method] = function(...args) {
// 3
let res = arrayProto[method].apply(this, args)
let ob = this.__ob__
let inserted = ''
switch(method){
case 'push':
case 'unshift':
inserted = args
break;
case 'splice':
inserted = args.slice(2)
break;
}
// 4
inserted && ob.observeArray(inserted)
// 5
ob.dep.notify()
return res
}
})
- 將數(shù)組的原型保存起來(lái)，因?yàn)橹貙懙臄?shù)組方法里，還是需要調(diào)用原生數(shù)組方法的
- arrayMethods 是一個(gè)對(duì)象，用于保存重寫的方法，這里使用 Object.create(arrayProto) 創(chuàng)建對(duì)象是為了使用者在調(diào)用非重寫方法時(shí)，能夠繼承使用原生的方法
- 調(diào)用原生方法，存儲(chǔ)返回值，用于設(shè)置重寫函數(shù)的返回值
- inserted 存儲(chǔ)新增的值，若 inserted 存在，對(duì)新值進(jìn)行觀測(cè)
- ob.dep.notify 觸發(fā)視圖更新
依賴收集
依賴收集是視圖更新的前提，也是響應(yīng)式原理中至關(guān)重要的環(huán)節(jié)。
偽代碼流程
為了方便理解，這里寫一段偽代碼，大概了解依賴收集的流程：
// data 數(shù)據(jù)
let data = {
name: 'joe'
}
// 渲染watcher
let watcher = {
run() {
dep.tagret = watcher
document.write(data.name)
}
}
// dep
let dep = [] // 存儲(chǔ)依賴
dep.tagret = null // 記錄 watcher
// 數(shù)據(jù)劫持
Object.defineProperty(data, 'name', {
get(){
// 收集依賴
dep.push(dep.tagret)
},
set(newVal){
data.name = newVal
dep.forEach(watcher => {
watcher.run()
})
}
})
初始化：
- 首先會(huì)對(duì) name 屬性定義 get 和 set
- 然后初始化會(huì)執(zhí)行一次 watcher.run 渲染頁(yè)面
- 這時(shí)候獲取 data.name，觸發(fā) get 函數(shù)收集依賴。
更新：
修改 data.name，觸發(fā) set 函數(shù)，調(diào)用 run 更新視圖。
真正流程
下面來(lái)看看真正的依賴收集流程是如何進(jìn)行的。
function defineReactive(obj, key, value) {
let childOb = observe(value)
const dep = new Dep()
Object.defineProperty(obj, key, {
get() {
if (Dep.target) {
dep.depend() // 收集依賴
if (childOb) {
childOb.dep.depend()
}
}
return value
},
set(newVal) {
if (newVal === value) {
return
}
value = newVal
childOb = observe(newVal)
dep.notify()
return value
}
})
}
首先初始化數(shù)據(jù)，調(diào)用 defineReactive 函數(shù)對(duì)數(shù)據(jù)進(jìn)行劫持。
export class Watcher {
constructor(vm, exprOrFn, cb, options){
this.getter = exprOrFn
this.get()
}
get() {
pushTarget(this)
this.getter()
popTarget(this)
}
}
初始化將 watcher 掛載到 Dep.target，this.getter 開始渲染頁(yè)面。渲染頁(yè)面需要對(duì)數(shù)據(jù)取值，觸發(fā) get 回調(diào)，dep.depend 收集依賴。
class Dep{
constructor() {
this.id = id++
this.subs = []
}
depend() {
Dep.target.addDep(this)
}
}
Dep.target 為 watcher，調(diào)用 addDep 方法，并傳入 dep 實(shí)例。
export class Watcher {
constructor(vm, exprOrFn, cb, options){
this.deps = []
this.depIds = new Set()
}
addDep(dep) {
if (!this.depIds.has(dep.id)) {
this.depIds.add(dep.id)
this.deps.push(dep)
dep.addSub(this)
}
}
}
addDep 中添加完 dep 后，調(diào)用 dep.addSub 并傳入當(dāng)前 watcher 實(shí)例。
class Dep{
constructor() {
this.id = id++
this.subs = []
}
addSub(watcher) {
this.subs.push(watcher)
}
}
將傳入的 watcher 收集起來(lái)，至此依賴收集流程完畢。
補(bǔ)充一點(diǎn)，通常頁(yè)面上會(huì)綁定很多屬性變量，渲染會(huì)對(duì)屬性取值，此時(shí)每個(gè)屬性收集的依賴都是同一個(gè) watcher，即組件的渲染 watcher。
數(shù)組的依賴收集
methods.forEach(method => {
arrayMethods[method] = function(...args) {
let res = arrayProto[method].apply(this, args)
let ob = this.__ob__
let inserted = ''
switch(method){
case 'push':
case 'unshift':
inserted = args
break;
case 'splice':
inserted = args.slice(2)
break;
}
// 對(duì)新增的值觀測(cè)
inserted && ob.observeArray(inserted)
// 更新視圖
ob.dep.notify()
return res
}
})
還記得重寫的方法里，會(huì)調(diào)用 ob.dep.notify 更新視圖，__ob__ 是我們?cè)?Observe 為觀測(cè)數(shù)據(jù)定義的標(biāo)識(shí)，值為 Observe 實(shí)例。那么 ob.dep 的依賴是在哪里收集的？
function defineReactive(obj, key, value) {
// 1
let childOb = observe(value)
const dep = new Dep()
Object.defineProperty(obj, key, {
get() {
if (Dep.target) {
dep.depend()
// 2
if (childOb) {
childOb.dep.depend()
}
}
return value
},
set(newVal) {
if (newVal === value) {
return
}
value = newVal
childOb = observe(newVal)
dep.notify()
return value
}
})
}
- observe 函數(shù)返回值為 Observe 實(shí)例
- childOb.dep.depend 執(zhí)行，為 Observe 實(shí)例的 dep 添加依賴
所以在數(shù)組更新時(shí)，ob.dep 內(nèi)已經(jīng)收集到依賴了。
整體流程
下面捋一遍初始化流程和更新流程，如果你是初次看源碼，不知道從哪里看起，也可以參照以下的順序。由于源碼實(shí)現(xiàn)比較多，下面展示的源碼會(huì)稍微刪減一些代碼
初始化流程
入口文件：
// 源碼位置：/src/core/instance/index.js
import { initMixin } from './init'
import { stateMixin } from './state'
import { renderMixin } from './render'
import { eventsMixin } from './events'
import { lifecycleMixin } from './lifecycle'
import { warn } from '../util/index'
function Vue (options) {
this._init(options)
}
initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)
export default Vue
_init：
// 源碼位置：/src/core/instance/init.js
export function initMixin (Vue: Class<Component>) {
Vue.prototype._init = function (options?: Object) {
const vm: Component = this
// a uid
vm._uid = uid++
// merge options
if (options && options._isComponent) {
// optimize internal component instantiation
// since dynamic options merging is pretty slow, and none of the
// internal component options needs special treatment.
initInternalComponent(vm, options)
} else {
// mergeOptions 對(duì) mixin 選項(xiàng)和傳入的 options 選項(xiàng)進(jìn)行合并
// 這里的 $options 可以理解為 new Vue 時(shí)傳入的對(duì)象
vm.$options = mergeOptions(
resolveConstructorOptions(vm.constructor),
options || {},
vm
)
}
// expose real self
vm._self = vm
initLifecycle(vm)
initEvents(vm)
initRender(vm)
callHook(vm, 'beforeCreate')
initInjections(vm) // resolve injections before data/props
// 初始化數(shù)據(jù)
initState(vm)
initProvide(vm) // resolve provide after data/props
callHook(vm, 'created')
if (vm.$options.el) {
// 初始化渲染頁(yè)面 掛載組件
vm.$mount(vm.$options.el)
}
}
}
上面主要關(guān)注兩個(gè)函數(shù)，initState 初始化數(shù)據(jù)，vm.$mount(vm.$options.el) 初始化渲染頁(yè)面。
先進(jìn)入 initState：
// 源碼位置：/src/core/instance/state.js
export function initState (vm: Component) {
vm._watchers = []
const opts = vm.$options
if (opts.props) initProps(vm, opts.props)
if (opts.methods) initMethods(vm, opts.methods)
if (opts.data) {
// data 初始化
initData(vm)
} else {
observe(vm._data = {}, true /* asRootData */)
}
if (opts.computed) initComputed(vm, opts.computed)
if (opts.watch && opts.watch !== nativeWatch) {
initWatch(vm, opts.watch)
}
}
function initData (vm: Component) {
let data = vm.$options.data
// data 為函數(shù)時(shí)，執(zhí)行 data 函數(shù)，取出返回值
data = vm._data = typeof data === 'function'
? getData(data, vm)
: data || {}
// proxy data on instance
const keys = Object.keys(data)
const props = vm.$options.props
const methods = vm.$options.methods
let i = keys.length
while (i--) {
const key = keys[i]
if (props && hasOwn(props, key)) {
process.env.NODE_ENV !== 'production' && warn(
`The data property "${key}" is already declared as a prop. ` +
`Use prop default value instead.`,
vm
)
} else if (!isReserved(key)) {
proxy(vm, `_data`, key)
}
}
// observe data
// 這里就開始走觀測(cè)數(shù)據(jù)的邏輯了
observe(data, true /* asRootData */)
}
observe 內(nèi)部流程在上面已經(jīng)講過，這里再簡(jiǎn)單過一遍：
- new Observe 觀測(cè)數(shù)據(jù)
- defineReactive 對(duì)數(shù)據(jù)進(jìn)行劫持
initState 邏輯執(zhí)行完畢，回到開頭，接下來(lái)執(zhí)行 vm.$mount(vm.$options.el) 渲染頁(yè)面：
$mount:
// 源碼位置：/src/platforms/web/runtime/index.js
Vue.prototype.$mount = function (
el?: string | Element,
hydrating?: boolean
): Component {
el = el && inBrowser ? query(el) : undefined
return mountComponent(this, el, hydrating)
}
mountComponent:
// 源碼位置：/src/core/instance/lifecycle.js
export function mountComponent (
vm: Component,
el: ?Element,
hydrating?: boolean
): Component {
vm.$el = el
callHook(vm, 'beforeMount')
let updateComponent
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
updateComponent = () => {
const name = vm._name
const id = vm._uid
const startTag = `vue-perf-start:${id}`
const endTag = `vue-perf-end:${id}`
mark(startTag)
const vnode = vm._render()
mark(endTag)
measure(`vue ${name} render`, startTag, endTag)
mark(startTag)
vm._update(vnode, hydrating)
mark(endTag)
measure(`vue ${name} patch`, startTag, endTag)
}
} else {
// 數(shù)據(jù)改變時(shí) 會(huì)調(diào)用此方法
updateComponent = () => {
// vm._render() 返回 vnode，這里面會(huì)就對(duì) data 數(shù)據(jù)進(jìn)行取值
// vm._update 將 vnode 轉(zhuǎn)為真實(shí)dom，渲染到頁(yè)面上
vm._update(vm._render(), hydrating)
}
}
// 執(zhí)行 Watcher，這個(gè)就是上面所說的渲染wacther
new Watcher(vm, updateComponent, noop, {
before () {
if (vm._isMounted && !vm._isDestroyed) {
callHook(vm, 'beforeUpdate')
}
}
}, true /* isRenderWatcher */)
hydrating = false
// manually mounted instance, call mounted on self
// mounted is called for render-created child components in its inserted hook
if (vm.$vnode == null) {
vm._isMounted = true
callHook(vm, 'mounted')
}
return vm
}
Watcher:
// 源碼位置：/src/core/observer/watcher.js
let uid = 0
export default class Watcher {
constructor(vm, exprOrFn, cb, options){
this.id = ++id
this.vm = vm
this.cb = cb
this.options = options
// exprOrFn 就是上面?zhèn)魅氲?updateComponent
this.getter = exprOrFn
this.deps = []
this.depIds = new Set()
this.get()
}
get() {
// 1. pushTarget 將當(dāng)前 watcher 記錄到 Dep.target，Dep.target 是全局唯一的
pushTarget(this)
let value
const vm = this.vm
try {
// 2. 調(diào)用 this.getter 相當(dāng)于會(huì)執(zhí)行 vm._render 函數(shù)，對(duì)實(shí)例上的屬性取值，
//由此觸發(fā) Object.defineProperty 的 get 方法，在 get 方法內(nèi)進(jìn)行依賴收集（dep.depend），這里依賴收集就需要用到 Dep.target
value = this.getter.call(vm, vm)
} catch (e) {
if (this.user) {
handleError(e, vm, `getter for watcher "${this.expression}"`)
} else {
throw e
}
} finally {
// "touch" every property so they are all tracked as
// dependencies for deep watching
if (this.deep) {
traverse(value)
}
// 3. popTarget 將 Dep.target 置空
popTarget()
this.cleanupDeps()
}
return value
}
}
至此初始化流程完畢，初始化流程的主要工作是數(shù)據(jù)劫持、渲染頁(yè)面和收集依賴。
更新流程
數(shù)據(jù)發(fā)生變化，觸發(fā) set ，執(zhí)行 dep.notify
// 源碼位置：/src/core/observer/dep.js
let uid = 0
/**
* A dep is an observable that can have multiple
* directives subscribing to it.
*/
export default class Dep {
static target: ?Watcher;
id: number;
subs: Array<Watcher>;
constructor () {
this.id = uid++
this.subs = []
}
addSub (sub: Watcher) {
this.subs.push(sub)
}
removeSub (sub: Watcher) {
remove(this.subs, sub)
}
depend () {
if (Dep.target) {
Dep.target.addDep(this)
}
}
notify () {
// stabilize the subscriber list first
const subs = this.subs.slice()
if (process.env.NODE_ENV !== 'production' && !config.async) {
// subs aren't sorted in scheduler if not running async
// we need to sort them now to make sure they fire in correct
// order
subs.sort((a, b) => a.id - b.id)
}
for (let i = 0, l = subs.length; i < l; i++) {
// 執(zhí)行 watcher 的 update 方法
subs[i].update()
}
}
}
wathcer.update：
// 源碼位置：/src/core/observer/watcher.js
/**
* Subscriber interface.
* Will be called when a dependency changes.
*/
update () {
/* istanbul ignore else */
if (this.lazy) { // 計(jì)算屬性更新
this.dirty = true
} else if (this.sync) { // 同步更新
this.run()
} else {
// 一般的數(shù)據(jù)都會(huì)進(jìn)行異步更新
queueWatcher(this)
}
}
queueWatcher:
// 源碼位置：/src/core/observer/scheduler.js
// 用于存儲(chǔ) watcher
const queue: Array<Watcher> = []
// 用于 watcher 去重
let has: { [key: number]: ?true } = {}
/**
* Flush both queues and run the watchers.
*/
function flushSchedulerQueue () {
let watcher, id
// 對(duì) watcher 排序
queue.sort((a, b) => a.id - b.id)
// do not cache length because more watchers might be pushed
// as we run existing watchers
for (index = 0; index < queue.length; index++) {
watcher = queue[index]
id = watcher.id
has[id] = null
// run方法更新視圖
watcher.run()
}
}
/**
* Push a watcher into the watcher queue.
* Jobs with duplicate IDs will be skipped unless it's
* pushed when the queue is being flushed.
*/
export function queueWatcher (watcher: Watcher) {
const id = watcher.id
if (has[id] == null) {
has[id] = true
// watcher 加入數(shù)組
queue.push(watcher)
// 異步更新
nextTick(flushSchedulerQueue)
}
}
nextTick：
// 源碼位置：/src/core/util/next-tick.js
const callbacks = []
let pending = false
function flushCallbacks () {
pending = false
const copies = callbacks.slice(0)
callbacks.length = 0
// 遍歷回調(diào)函數(shù)執(zhí)行
for (let i = 0; i < copies.length; i++) {
copies[i]()
}
}
let timerFunc
if (typeof Promise !== 'undefined' && isNative(Promise)) {
const p = Promise.resolve()
timerFunc = () => {
p.then(flushCallbacks)
}
}
export function nextTick (cb?: Function, ctx?: Object) {
let _resolve
// 將回調(diào)函數(shù)加入數(shù)組
callbacks.push(() => {
if (cb) {
cb.call(ctx)
}
})
if (!pending) {
pending = true
// 遍歷回調(diào)函數(shù)執(zhí)行
timerFunc()
}
// $flow-disable-line
if (!cb && typeof Promise !== 'undefined') {
return new Promise(resolve => {
_resolve = resolve
})
}
}
這一步是為了使用微任務(wù)將回調(diào)函數(shù)異步執(zhí)行，也就是上面的p.then。最終，會(huì)調(diào)用 watcher.run 更新頁(yè)面。
至此更新流程完畢。
寫在最后
如果沒有接觸過源碼的同學(xué)，我相信看完可能還是會(huì)有點(diǎn)懵的，這很正常。建議對(duì)照源碼再自己多看幾遍就能知道流程了。對(duì)于有基礎(chǔ)的同學(xué)就當(dāng)做是復(fù)習(xí)了。
想要變強(qiáng)，學(xué)會(huì)看源碼是必經(jīng)之路。在這過程中，不僅能學(xué)習(xí)框架的設(shè)計(jì)思想，還能培養(yǎng)自己的邏輯思維。萬(wàn)事開頭難，遲早都要邁出這一步，不如就從今天開始。
簡(jiǎn)化后的代碼我已放在github，有需要的可以看看。
以上就是詳細(xì)分析vue響應(yīng)式原理的詳細(xì)內(nèi)容，更多關(guān)于Vue響應(yīng)式原理的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
web開發(fā)中如何優(yōu)雅的解決"重復(fù)請(qǐng)求"問題
在我們的日常開發(fā)當(dāng)中,很多時(shí)候會(huì)出現(xiàn)短時(shí)間內(nèi)重復(fù)請(qǐng)求的情況,如果沒有妥當(dāng)?shù)靥幚砗蠊車?yán)重,這篇文章主要給大家介紹了關(guān)于web開發(fā)中如何優(yōu)雅的解決重復(fù)請(qǐng)求問題的相關(guān)資料,需要的朋友可以參考下2022-05-05
Vue組件傳值異步問題子組件拿到數(shù)據(jù)較慢解決
這篇文章主要為大家介紹了Vue組件傳值異步中子組件拿到數(shù)據(jù)較慢的問題解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-08-08
在vue項(xiàng)目中開發(fā)環(huán)境的樣式?jīng)]問題,但是打包上線后,樣式不生效,下面這篇文章主要給大家介紹了關(guān)于Vue打包上線之后部分CSS不生效問題的解決辦法,需要的朋友可以參考下2022-12-12
vue實(shí)現(xiàn)圖片加載完成前的loading組件方法
下面小編就為大家分享一篇vue實(shí)現(xiàn)圖片加載完成前的loading組件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2018-02-02
這篇文章主要介紹了Vue中組件的遞歸和使用問題，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-03-03
vue自定義指令和動(dòng)態(tài)路由實(shí)現(xiàn)權(quán)限控制
這篇文章主要介紹了vue自定義指令和動(dòng)態(tài)路由實(shí)現(xiàn)權(quán)限控制的方法，幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下2020-08-08
vue+ElementUI實(shí)現(xiàn)訂單頁(yè)動(dòng)態(tài)添加產(chǎn)品數(shù)據(jù)效果實(shí)例代碼
本篇文章主要介紹了vue+ElementUI實(shí)現(xiàn)訂單頁(yè)動(dòng)態(tài)添加產(chǎn)品效果實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
單向數(shù)據(jù)流方式使用一個(gè)上傳數(shù)據(jù)流和一個(gè)下傳數(shù)據(jù)流進(jìn)行雙向數(shù)據(jù)通信,兩個(gè)數(shù)據(jù)流之間相互獨(dú)立,下面這篇文章主要給大家介紹了關(guān)于vue單向數(shù)據(jù)流的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
Vue.js devtool插件安裝后無(wú)法使用的解決辦法
Vue.js devtool插件最近在開發(fā)人員中很火，這篇文章主要為大家詳細(xì)介紹了Vue.js devtool插件安裝后無(wú)法使用，出現(xiàn)提示“vue.js not detected”的解決辦法2017-11-11
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)帶復(fù)選框的樹形菜單，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05