Vue進級——ソースコード解読課題1 Vueデータ応答式原理
4288 ワード
目的:データ駆動ビュー、すなわちデータ変化によるビュー変化
まず、データの変化を傍受し、変化検知と略称します.次に、依存を収集します.つまり、データの変化を実現した後、「対応ビュー」のリフレッシュを行います.
1変化検知:Objectを通過する.defineProperty()メソッドは、属性を観測可能なコードアドレスに変更します:srccoreobserverindex.js(Vue 2.xソース)1.1オブジェクト(Object)の変化検出キークラス:Observer
2依存収集コア構想:getterで依存を収集し、setterで依存更新者にデータを使用した人がこのデータの「依存」であることを通知し、データと試行間を確立して依存マネージャクラスに連絡する:Dep
以上のソースコードからも分かるように、依存セット内の各データに依存する「ローカルビュー」であるキークラスWatherがあります.
まず、データの変化を傍受し、変化検知と略称します.次に、依存を収集します.つまり、データの変化を実現した後、「対応ビュー」のリフレッシュを行います.
1変化検知:Objectを通過する.defineProperty()メソッドは、属性を観測可能なコードアドレスに変更します:srccoreobserverindex.js(Vue 2.xソース)1.1オブジェクト(Object)の変化検出キークラス:Observer
export class Observer {
value: any; //flow
dep: Dep;
vmCount: number; // number of vms that have this object as root $data
constructor (value: any) {
this.value = value
this.dep = new Dep()
this.vmCount = 0
def(value, '__ob__', this) // value , ,
if (Array.isArray(value)) {
//...
//
} else {
//
this.walk(value)
}
}
/**
* Walk through all properties and convert them into
* getter/setters. This method should only be called when
* value type is Object.
*/
walk (obj: Object) {
const keys = Object.keys(obj) // key
for (let i = 0; i < keys.length; i++) {
defineReactive(obj, keys[i]) //
}
}
}
export function defineReactive (
obj: Object,
key: string,
val: any,
customSetter?: ?Function,
shallow?: boolean
) {
const dep = new Dep()
const property = Object.getOwnPropertyDescriptor(obj, key)
// (https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor)
if (property && property.configurable === false) {
return
}
// cater for pre-defined getter/setters
const getter = property && property.get
const setter = property && property.set
if ((!getter || setter) && arguments.length === 2) {
val = obj[key]
}
let childOb = !shallow && observe(val)
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter () {
const value = getter ? getter.call(obj) : val
if (Dep.target) {
dep.depend()
if (childOb) {
childOb.dep.depend()
if (Array.isArray(value)) {
dependArray(value)
}
}
}
return value
},
set: function reactiveSetter (newVal) {
const value = getter ? getter.call(obj) : val
/* eslint-disable no-self-compare */
if (newVal === value || (newVal !== newVal && value !== value)) {
return
}
/* eslint-enable no-self-compare */
if (process.env.NODE_ENV !== 'production' && customSetter) {
customSetter()
}
// #7981: for accessor properties without setter
if (getter && !setter) return
if (setter) {
setter.call(obj, newVal)
} else {
val = newVal
}
childOb = !shallow && observe(newVal)
dep.notify()
}
})
}
2依存収集コア構想:getterで依存を収集し、setterで依存更新者にデータを使用した人がこのデータの「依存」であることを通知し、データと試行間を確立して依存マネージャクラスに連絡する:Dep
let uid = 0
export default class Dep {
static target: ?Watcher;
id: number;
subs: Array;
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++) {
subs[i].update()
}
}
}
// The current target watcher being evaluated.
// This is globally unique because only one watcher
// can be evaluated at a time.
Dep.target = null
const targetStack = []
export function pushTarget (target: ?Watcher) {
targetStack.push(target)
Dep.target = target
}
export function popTarget () {
targetStack.pop()
Dep.target = targetStack[targetStack.length - 1]
}
以上のソースコードからも分かるように、依存セット内の各データに依存する「ローカルビュー」であるキークラスWatherがあります.
// :/src/core/observer/watcher.js