Статья впервые опубликована на:GitHub.com/US TB-Вуд, умри, о ты…
написать впереди
Vue.js — это инфраструктура MVVM, основной идеей которой является представление, управляемое данными, а модель данных — это обычный объект JavaScript. И когда они изменяются, вид обновляется. Ядром достижения этого является "Отзывчивая система".
В процессе разработки у нас могут возникнуть такие вопросы:
- Какие объекты Vue.js делает реактивными?
- Как именно Vue.js оперативно изменяет данные?
- Что за запущенный процесс показан в нижней части рисунка выше?
- Почему данные иногда задерживаются (например, когда использовать nextTick)?
Внедрить упрощенную версию адаптивной системы
Код ядра реактивной системы определен в src/core/observer:
В этой части много кода.Чтобы дать всем представление об адаптивной системе, я сначала реализую упрощенную версию адаптивной системы.Хотя воробей маленький и полный, его можно совместить с нижней частью картинки в начале.Для анализа пишите комментарии для простоты понимания.
/**
* Dep是数据和Watcher之间的桥梁，主要实现了以下两个功能：
* 1.用 addSub 方法可以在目前的 Dep 对象中增加一个 Watcher 的订阅操作；
* 2.用 notify 方法通知目前 Dep 对象的 subs 中的所有 Watcher 对象触发更新操作。
*/
class Dep {
constructor () {
// 用来存放Watcher对象的数组
this.subs = [];
}
addSub (sub) {
// 往subs中添加Watcher对象
this.subs.push(sub);
}
// 通知所有Watcher对象更新视图
notify () {
this.subs.forEach((sub) => {
sub.update();
})
}
}
// 观察者对象
class Watcher {
constructor () {
// Dep.target表示当前全局正在计算的Watcher（当前的Watcher对象），在get中会用到
Dep.target = this;
}
// 更新视图
update () {
console.log("视图更新啦");
}
}
Dep.target = null;
class Vue {
// Vue构造类
constructor(options) {
this._data = options.data;
this.observer(this._data);
// 实例化Watcher观察者对象，这时候Dep.target会指向这个Watcher对象
new Watcher();
console.log('render', this._data.message);
}
// 对Object.defineProperty进行封装，给对象动态添加setter和getter
defineReactive (obj, key, val) {
const dep = new Dep();
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter () {
// 往dep中添加Dep.target（当前正在进行的Watcher对象）
dep.addSub(Dep.target);
return val;
},
set: function reactiveSetter (newVal) {
if (newVal === val) return;
// 在set的时候通知dep的notify方法来通知所有的Wacther对象更新视图
dep.notify();
}
});
}
// 对传进来的对象进行遍历执行defineReactive
observer (value) {
if (!value || (typeof value !== 'object')) {
return;
}
Object.keys(value).forEach((key) => {
this.defineReactive(value, key, value[key]);
});
}
}
let obj = new Vue({
el: "#app",
data: {
message: 'test'
}
})
obj._data.message = 'update'
Выполните приведенный выше код, напечатанная информация:
render test
视图更新啦
Следующее объединяет исходный код Vue.js для анализа его процесса:
Object.defineProperty()
Все мы знаем, что ядром отзывчивости является использование метода Object.defineProperty() ES5, поэтому Vue.js не поддерживает IE9, и нет хорошего патча для решения этой проблемы. Конкретный может относиться кДокументация MDN. Вот как это используется:
/*
obj: 目标对象
prop: 需要操作的目标对象的属性名
descriptor: 描述符
return value 传入对象
*/
Object.defineProperty(obj, prop, descriptor)
Дескриптор имеет два основных свойства: get и set. Метод получения запускается, когда мы обращаемся к свойству, а метод установки запускается, когда мы изменяем свойство. Когда у объекта есть методы получения и методы установки, мы можем назвать объект реактивным.
Начните с нового Vue()
Vue на самом деле представляет собой класс, реализованный с помощью функции, определенной в src/core/instance/index.js:Когда Vue создается с ключевым словом new, выполняется метод _init, который определен в src/core/instance/init.js Код ключа выглядит следующим образом:
Здесь вызывается метод initState(). Давайте посмотрим, что делает метод initState(). Он определен в src/core/instance/state.js. Код ключа выглядит следующим образом:
Видно, что метод initState в основном инициализирует такие свойства, как реквизиты, методы, данные, вычисляемые и наблюдатели. В нем вызовите метод initData, чтобы увидеть, что делает метод initData. Он определен в src/core/instance/state.js. Код ключа выглядит следующим образом:
На самом деле, этот код в основном делает две вещи: одна — проксировать данные выше _data на виртуальную машину, а другая — преобразовывать все данные в наблюдаемые посредством наблюдения. Стоит отметить, что ключ в данных не может конфликтовать с ключом в реквизитах и методах, иначе будет сгенерировано предупреждение.
Observer
Затем посмотрите на определение Observer в /src/core/observer/index.js:
/**
* Observer class that is attached to each observed
* object. Once attached, the observer converts the target
* object's property keys into getter/setters that
* collect dependencies and dispatch updates.
*/
export class Observer {
value: any;
dep: Dep;
vmCount: number; // number of vms that has this object as root $data
constructor (value: any) {
this.value = value
this.dep = new Dep()
this.vmCount = 0
def(value, '__ob__', this)
if (Array.isArray(value)) {
const augment = hasProto
? protoAugment
: copyAugment
augment(value, arrayMethods, arrayKeys)
this.observeArray(value)
} else {
this.walk(value)
}
}
/**
* Walk through each property 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)
for (let i = 0; i < keys.length; i++) {
defineReactive(obj, keys[i])
}
}
/**
* Observe a list of Array items.
*/
observeArray (items: Array<any>) {
for (let i = 0, l = items.length; i < l; i++) {
observe(items[i])
}
}
}
Обратите внимание на английские аннотации, You Da написал все непонятные и трудные места в английских аннотациях. Функция Observer заключается в добавлении геттеров и сеттеров к свойствам объектов, которые используются для сбора и отправки обновлений на основе зависимостей. Метод walk предназначен для обхода атрибутов входящего объекта и привязки его к defineReactive, а методObserverArray — для наблюдения за обходом входящего массива.
defineReactive
Далее взгляните на метод defineReative, который определен в src/core/observer/index.js:
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()
}
if (setter) {
setter.call(obj, newVal)
} else {
val = newVal
}
childOb = !shallow && observe(newVal)
dep.notify()
}
})
Дочерние объекты объекта рекурсивно наблюдаются и возвращают объект Observer дочернего узла:
childOb = !shallow && observe(val)
Если есть текущий объект Watcher, выполните сбор зависимостей для него и сбор зависимостей для его подобъектов.Если это массив, выполните сбор зависимостей для массива.Если подэлемент массива все еще является массивом, пройти его:
if (Dep.target) {
dep.depend()
if (childOb) {
childOb.dep.depend()
if (Array.isArray(value)) {
dependArray(value)
}
}
}
При выполнении метода set необходимо следить за новым значением, чтобы убедиться, что новое значение является чувствительным:
childOb = !shallow && observe(newVal)
Объект dep выполнит метод уведомления, чтобы уведомить все объекты-наблюдатели Watcher:
dep.notify()
Dep
Dep — это мост между Watcher и данными, а Dep.target представляет Watcher, который рассчитывается глобально. Взгляните на определение сборщика зависимостей Dep в /src/core/observer/dep.js:
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)
}
// 依赖收集，当存在Dep.target的时候添加Watcher观察者对象
depend () {
if (Dep.target) {
Dep.target.addDep(this)
}
}
// 通知所有订阅者
notify () {
// stabilize the subscriber list first
const subs = this.subs.slice()
for (let i = 0, l = subs.length; i < l; i++) {
subs[i].update()
}
}
}
// the current target watcher being evaluated.
// this is globally unique because there could be only one
// watcher being evaluated at any time.
Dep.target = null
// 收集完依赖之后，将Dep.target设置为null，防止继续收集依赖
Watcher
Watcher — это объект-наблюдатель. После сбора зависимости объект Watcher будет сохранен в Deps. Когда данные изменятся, экземпляр Watcher будет уведомлен Deps. Определено в /src/core/observer/watcher.js:
/**
* A watcher parses an expression, collects dependencies,
* and fires callback when the expression value changes.
* This is used for both the $watch() api and directives.
*/
export default class Watcher {
vm: Component;
expression: string;
cb: Function;
id: number;
deep: boolean;
user: boolean;
computed: boolean;
sync: boolean;
dirty: boolean;
active: boolean;
dep: Dep;
deps: Array<Dep>;
newDeps: Array<Dep>;
depIds: SimpleSet;
newDepIds: SimpleSet;
before: ?Function;
getter: Function;
value: any;
constructor (
vm: Component,
expOrFn: string | Function,
cb: Function,
options?: ?Object,
isRenderWatcher?: boolean
) {
this.vm = vm
if (isRenderWatcher) {
vm._watcher = this
}
vm._watchers.push(this)
// options
if (options) {
this.deep = !!options.deep
this.user = !!options.user
this.computed = !!options.computed
this.sync = !!options.sync
this.before = options.before
} else {
this.deep = this.user = this.computed = this.sync = false
}
this.cb = cb
this.id = ++uid // uid for batching
this.active = true
this.dirty = this.computed // for computed watchers
this.deps = []
this.newDeps = []
this.depIds = new Set()
this.newDepIds = new Set()
this.expression = process.env.NODE_ENV !== 'production'
? expOrFn.toString()
: ''
// parse expression for getter
if (typeof expOrFn === 'function') {
this.getter = expOrFn
} else {
this.getter = parsePath(expOrFn)
if (!this.getter) {
this.getter = function () {}
process.env.NODE_ENV !== 'production' && warn(
`Failed watching path: "${expOrFn}" ` +
'Watcher only accepts simple dot-delimited paths. ' +
'For full control, use a function instead.',
vm
)
}
}
if (this.computed) {
this.value = undefined
this.dep = new Dep()
} else {
this.value = this.get()
}
}
/**
* Evaluate the getter, and re-collect dependencies.
*/
get () {
pushTarget(this)
let value
const vm = this.vm
try {
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)
}
popTarget()
this.cleanupDeps()
}
return value
}
/**
* Add a dependency to this directive.
*/
addDep (dep: Dep) {
const id = dep.id
if (!this.newDepIds.has(id)) {
this.newDepIds.add(id)
this.newDeps.push(dep)
if (!this.depIds.has(id)) {
dep.addSub(this)
}
}
}
/**
* Clean up for dependency collection.
*/
cleanupDeps () {
let i = this.deps.length
while (i--) {
const dep = this.deps[i]
if (!this.newDepIds.has(dep.id)) {
dep.removeSub(this)
}
}
let tmp = this.depIds
this.depIds = this.newDepIds
this.newDepIds = tmp
this.newDepIds.clear()
tmp = this.deps
this.deps = this.newDeps
this.newDeps = tmp
this.newDeps.length = 0
}
/**
* Subscriber interface.
* Will be called when a dependency changes.
*/
update () {
/* istanbul ignore else */
if (this.computed) {
// A computed property watcher has two modes: lazy and activated.
// It initializes as lazy by default, and only becomes activated when
// it is depended on by at least one subscriber, which is typically
// another computed property or a component's render function.
if (this.dep.subs.length === 0) {
// In lazy mode, we don't want to perform computations until necessary,
// so we simply mark the watcher as dirty. The actual computation is
// performed just-in-time in this.evaluate() when the computed property
// is accessed.
this.dirty = true
} else {
// In activated mode, we want to proactively perform the computation
// but only notify our subscribers when the value has indeed changed.
this.getAndInvoke(() => {
this.dep.notify()
})
}
} else if (this.sync) {
this.run()
} else {
queueWatcher(this)
}
}
/**
* Scheduler job interface.
* Will be called by the scheduler.
*/
run () {
if (this.active) {
this.getAndInvoke(this.cb)
}
}
getAndInvoke (cb: Function) {
const value = this.get()
if (
value !== this.value ||
// Deep watchers and watchers on Object/Arrays should fire even
// when the value is the same, because the value may
// have mutated.
isObject(value) ||
this.deep
) {
// set new value
const oldValue = this.value
this.value = value
this.dirty = false
if (this.user) {
try {
cb.call(this.vm, value, oldValue)
} catch (e) {
handleError(e, this.vm, `callback for watcher "${this.expression}"`)
}
} else {
cb.call(this.vm, value, oldValue)
}
}
}
/**
* Evaluate and return the value of the watcher.
* This only gets called for computed property watchers.
*/
evaluate () {
if (this.dirty) {
this.value = this.get()
this.dirty = false
}
return this.value
}
/**
* Depend on this watcher. Only for computed property watchers.
*/
depend () {
if (this.dep && Dep.target) {
this.dep.depend()
}
}
/**
* Remove self from all dependencies' subscriber list.
*/
teardown () {
if (this.active) {
// remove self from vm's watcher list
// this is a somewhat expensive operation so we skip it
// if the vm is being destroyed.
if (!this.vm._isBeingDestroyed) {
remove(this.vm._watchers, this)
}
let i = this.deps.length
while (i--) {
this.deps[i].removeSub(this)
}
this.active = false
}
}
}
наконец
С принципом адаптивной системы в основном разобрались, теперь оглянусь назад и посмотрю, четкая ли нижняя часть картинки.
Можете обратить внимание на мой паблик-аккаунт «Muchen Classmate», фермера на гусиной фабрике, который обычно записывает какие-то банальные мелочи, технологии, жизнь, инсайты и срастается.