VUE源码理解
1.公式:UI=render(state)
state是输入,UI是页面输出,VUE充当render()这个角色,当vue发现其state变化之后,经过一系列的加工,最终变化反映在UI上
Object的变化侦测
2.变化侦测
变化侦测是追踪状态,一旦数据发生变化,就会去更新视图
3.object的更新变化
let car = {}
let val = 3000
Object.defineProperty(car, 'price', {
enumerable: true,
configurable: true,
get(){
console.log('price属性被读取了')
return val
},
set(newVal){
console.log('price属性被修改了')
val = newVal
}
})
通过Object.defineProperty()
方法给car
定义了一个price
属性,并把这个属性的读和写分别使用get()
和set()
进行拦截,每当该属性进行读或写操作的时候就会触发get()
和set()
。如下图:
4.依赖收集
4.1 什么是依赖收集
我们把"谁用到了这个数据"称为"谁依赖了这个数据",我们给每个数据都建一个依赖数组(因为一个数据可能被多处使用),谁依赖了这个数据(即谁用到了这个数据)我们就把谁放入这个依赖数组中,那么当这个数据发生变化的时候,我们就去它对应的依赖数组中,把每个依赖都通知一遍,告诉他们:“你们依赖的数据变啦,你们该更新啦!”。这个过程就是依赖收集
4.2 何时收集依赖
当其数据获取时会触发getter属性,那么我们就可以在getter中进行收集这个依赖。当其触发setter属性时,就可以调用setter通知其依赖更新
4.3 把依赖收集到哪里
最好的做法是为每一个数据都建立一个依赖管理器,那么依赖管理器Dep类应运如生
// 源码位置:src/core/observer/dep.js
export default class Dep {
constructor () {
this.subs = []
}
addSub (sub) {
this.subs.push(sub)
}
// 删除一个依赖
removeSub (sub) {
remove(this.subs, sub)
}
// 添加一个依赖
depend () {
if (window.target) {
this.addSub(window.target)
}
}
// 通知所有依赖更新
notify () {
const subs = this.subs.slice()
for (let i = 0, l = subs.length; i < l; i++) {
subs[i].update()
}
}
}
/**
* Remove an item from an array
*/
export function remove (arr, item) {
if (arr.length) {
const index = arr.indexOf(item)
if (index > -1) {
return arr.splice(index, 1)
}
}
}
有上方的依赖之后,就可以在getter中收集依赖,在setter中通知依赖更新了,代码如下:
function defineReactive (obj,key,val) {
if (arguments.length === 2) {
val = obj[key]
}
if(typeof val === 'object'){
new Observer(val)
}
const dep = new Dep() //实例化一个依赖管理器,生成一个依赖管理数组dep
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get(){
dep.depend() // 在getter中收集依赖
return val;
},
set(newVal){
if(val === newVal){
return
}
val = newVal;
dep.notify() // 在setter中通知依赖更新
}
})
}
4.3 依赖到底是谁
当其用到了数据,其就是依赖,我们就为其创建一个Watcher实例。在之后的数据发生变化的时候,我们不去通知其依赖进行更新,而是通知响应的watch实例,由watch实例去通知真正的视图
watch的实例如下图
export default class Watcher {
constructor (vm,expOrFn,cb) {
this.vm = vm;
this.cb = cb;
this.getter = parsePath(expOrFn)
this.value = this.get()
}
get () {
window.target = this;
const vm = this.vm
let value = this.getter.call(vm, vm)
window.target = undefined;
return value
}
update () {
const oldValue = this.value
this.value = this.get()
this.cb.call(this.vm, this.value, oldValue)
}
}
/**
* Parse simple path.
* 把一个形如'data.a.b.c'的字符串路径所表示的值,从真实的data对象中取出来
* 例如:
* data = {a:{b:{c:2}}}
* parsePath('a.b.c')(data) // 2
*/
const bailRE = /[^\w.$]/
export function parsePath (path) {
if (bailRE.test(path)) {
return
}
const segments = path.split('.')
return function (obj) {
for (let i = 0; i < segments.length; i++) {
if (!obj) return
obj = obj[segments[i]]
}
return obj
}
}
下面我们分析Watcher
类的代码实现逻辑:
- 当实例化
Watcher
类时,会先执行其构造函数; - 在构造函数中调用了
this.get()
实例方法; - 在
get()
方法中,首先通过window.target = this
把实例自身赋给了全局的一个唯一对象window.target
上,然后通过let value = this.getter.call(vm, vm)
获取一下被依赖的数据,获取被依赖数据的目的是触发该数据上面的getter
,上文我们说过,在getter
里会调用dep.depend()
收集依赖,而在dep.depend()
中取到挂载window.target
上的值并将其存入依赖数组中,在get()
方法最后将window.target
释放掉。 - 而当数据变化时,会触发数据的
setter
,在setter
中调用了dep.notify()
方法,在dep.notify()
方法中,遍历所有依赖(即watcher实例),执行依赖的update()
方法,也就是Watcher
类中的update()
实例方法,在update()
方法中调用数据变化的更新回调函数,从而更新视图。
简单总结一下就是:Watcher
先把自己设置到全局唯一的指定位置(window.target
),然后读取数据。因为读取了数据,所以会触发这个数据的getter
。接着,在getter
中就会从全局唯一的那个位置读取当前正在读取数据的Watcher
,并把这个watcher
收集到Dep
中去。收集好之后,当数据发生变化时,会向Dep
中的每个Watcher
发送通知。通过这样的方式,Watcher
可以主动去订阅任意一个数据的变化。为了便于理解,我们画出了其关系流程图,如下图:
4.4 总结
首先,我们通过Object.defineProperty
方法实现了对object
数据的可观测,并且封装了Observer
类,让我们能够方便的把object
数据中的所有属性(包括子属性)都转换成getter/seter
的形式来侦测变化。
接着,我们学习了什么是依赖收集?并且知道了在getter
中收集依赖,在setter
中通知依赖更新,以及封装了依赖管理器Dep
,用于存储收集到的依赖。
最后,我们为每一个依赖都创建了一个Watcher
实例,当数据发生变化时,通知Watcher
实例,由Watcher
实例去做真实的更新操作。
其整个流程大致如下:
Data
通过observer
转换成了getter/setter
的形式来追踪变化。- 当外界通过
Watcher
读取数据时,会触发getter
从而将Watcher
添加到依赖中。 - 当数据发生了变化时,会触发
setter
,从而向Dep
中的依赖(即Watcher)发送通知。 Watcher
接收到通知后,会向外界发送通知,变化通知到外界后可能会触发视图更新,也有可能触发用户的某个回调函数等。
Array的变化侦测
1.在哪收集依赖
Array型数据还是在getter中收集依赖
2.使Array型数据可观测
let arr = [1,2,3]
arr.push(4)
Array.prototype.newPush = function(val){
console.log('arr被修改了')
this.push(val)
}
arr.newPush(4)
在上面的例子中,针对原生push方法定义了一个newPush方法,这个newPush方法内部调用了原生push方法,这样就保证了新的newPush方法跟原生push方法具有相同的功能
3.数组方法拦截器
会在其vue中创建一个数组方法拦截器,拦截在数组实例与Array.prototype之间,在拦截器内重写了操作数组的一些方法,当数组实例使用操作数组方法时,其实使用的时拦截器重写的方法,就不再使用其Array.prototype上的原生方法。
源码中的拦截器的代码如下:
// 源码位置:/src/core/observer/array.js
const arrayProto = Array.prototype
// 创建一个对象作为拦截器
export const arrayMethods = Object.create(arrayProto)
// 改变数组自身内容的7个方法
const methodsToPatch = [
'push',
'pop',
'shift',
'unshift',
'splice',
'sort',
'reverse'
]
/**
* Intercept mutating methods and emit events
*/
methodsToPatch.forEach(function (method) {
const original = arrayProto[method] // 缓存原生方法
Object.defineProperty(arrayMethods, method, {
enumerable: false,
configurable: true,
writable: true,
value:function mutator(...args){
const result = original.apply(this, args)
return result
}
})
})
在上面的代码中,
1、首先创建了继承自Array
原型的空对象arrayMethods
,
2、接着在arrayMethods
上使用object.defineProperty
方法将那些可以改变数组自身的7个方法遍历逐个进行封装。
3、最后,当我们使用push
方法的时候,其实用的是arrayMethods.push
,而arrayMethods.push
就是封装的新函数mutator
,
总结:
实标上执行的是函数mutator
,而mutator
函数内部执行了original
函数,这个original
函数就是Array.prototype
上对应的原生方法。 那么,接下来我们就可以在mutato
r函数中做一些其他的事,比如说发送变化通知。
4.使用拦截器
当其拦截器做好之后需要将其挂在到数组实例与Array.prototype之间,这样拦截器才能进行生效,只需要把数据的_proto_属性设置为拦截器arrayMethods即可,源代码如下:
export class Observer {
constructor (value) {
this.value = value
if (Array.isArray(value)) {
const augment = hasProto
? protoAugment
: copyAugment
augment(value, arrayMethods, arrayKeys)
} else {
this.walk(value)
}
}
}
// 能力检测:判断__proto__是否可用,因为有的浏览器不支持该属性
export const hasProto = '__proto__' in {}
const arrayKeys = Object.getOwnPropertyNames(arrayMethods)
/**
* Augment an target Object or Array by intercepting
* the prototype chain using __proto__
*/
function protoAugment (target, src: Object, keys: any) {
target.__proto__ = src
}
/**
* Augment an target Object or Array by defining
* hidden properties.
*/
/* istanbul ignore next */
function copyAugment (target: Object, src: Object, keys: Array<string>) {
for (let i = 0, l = keys.length; i < l; i++) {
const key = keys[i]
def(target, key, src[key])
}
}
5.再谈依赖收集
5.1 把依赖收集到了哪里
object数组数据的依赖再getter中收集,而给数组数据添加getter/setter都是在observe类中完成的,所以我们也应该在observer类中收集依赖
export class Observer {
constructor (value) {
this.value = value
this.dep = new Dep() // 实例化一个依赖管理器,用来收集数组依赖
if (Array.isArray(value)) {
const augment = hasProto
? protoAugment
: copyAugment
augment(value, arrayMethods, arrayKeys)
} else {
this.walk(value)
}
}
}
5.2 如何收集依赖
数组的依赖也是在getter中收集,那么在getter中如何进行收集,需要在依赖管理器定义一个observer类,我们需要在getter中收集
总结:我们必须在getter中能访问到observer类中的依赖管理器,才能把依赖进行存进去
function defineReactive (obj,key,val) {
let childOb = observe(val)
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get(){
if (childOb) {
childOb.dep.depend()
}
return val;
},
set(newVal){
if(val === newVal){
return
}
val = newVal;
dep.notify() // 在setter中通知依赖更新
}
})
}
/**
* Attempt to create an observer instance for a value,
* returns the new observer if successfully observed,
* or the existing observer if the value already has one.
* 尝试为value创建一个0bserver实例,如果创建成功,直接返回新创建的Observer实例。
* 如果 Value 已经存在一个Observer实例,则直接返回它
*/
export function observe (value, asRootData){
if (!isObject(value) || value instanceof VNode) {
return
}
let ob
if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
ob = value.__ob__
} else {
ob = new Observer(value)
}
return ob
}
总结:
通过observe
函数为被获取的数据arr
尝试创建一个Observer
实例,在observe
函数内部,先判断当前传入的数据上是否有__ob__
属性,因为在上篇文章中说了,如果数据有__ob__
属性,表示它已经被转化成响应式的了,如果没有则表示该数据还不是响应式的,那么就调用new Observer(value)
将其转化成响应式的,并把数据对应的Observer
实例返回。
而在defineReactive
函数中,首先获取数据对应的Observer
实例childOb
,然后在getter
中调用Observer
实例上依赖管理器,从而将依赖收集起来
5.2 如何通知依赖
要想通知依赖,首先要能访问到依赖。要访问到依赖也不难,因为我们只要能访问到被转化成响应式的数据value
即可,因为vaule
上的__ob__
就是其对应的Observer
类实例,有了Observer
类实例我们就能访问到它上面的依赖管理器,然后只需调用依赖管理器的dep.notify()
方法,让它去通知依赖更新即可。源码如下:
/**
* Intercept mutating methods and emit events
*/
methodsToPatch.forEach(function (method) {
const original = arrayProto[method]
def(arrayMethods, method, function mutator (...args) {
const result = original.apply(this, args)
const ob = this.__ob__
// notify change
ob.dep.notify()
return result
})
})
上面代码中,由于我们的拦截器是挂载到数组数据的原型上的,所以拦截器中的this
就是数据value
,拿到value
上的Observer
类实例,从而你就可以调用Observer
类实例上面依赖管理器的dep.notify()
方法,以达到通知依赖的目的。
OK,以上就基本完成了Array
数据的变化侦测
6.深度侦测
在vue中,不论是object型数据还是Array型数据所实现的数据变化侦测都是深度侦测,深度侦测不但要侦测数据本身的变化买还是要侦测数据中子数据的变化
let arr = [
{
name:'NLRX',
age:'18'
}
]
数组中包含了一个对象,如果该对象的某个属性发生变化就会被侦测到,这就是深度侦测
7.数组新增元素的侦测
思路:需要拿到新增的这个元素,然后调用observe函数将其转换即可
/**
* Intercept mutating methods and emit events
*/
methodsToPatch.forEach(function (method) {
// cache original method
const original = arrayProto[method]
def(arrayMethods, method, function mutator (...args) {
const result = original.apply(this, args)
const ob = this.__ob__
let inserted
switch (method) {
case 'push':
case 'unshift':
inserted = args // 如果是push或unshift方法,那么传入参数就是新增的元素
break
case 'splice':
inserted = args.slice(2) // 如果是splice方法,那么传入参数列表中下标为2的就是新增的元素
break
}
if (inserted) ob.observeArray(inserted) // 调用observe函数将新增的元素转化成响应式
// notify change
ob.dep.notify()
return result
})
})
如果是push
或unshift
方法,那么传入参数就是新增的元素;如果是splice
方法,那么传入参数列表中下标为2的就是新增的元素,拿到新增的元素后,就可以调用observe
函数将新增的元素转化成响应式的了
缺点:
对于数组变化侦测是通过拦截器实现的,也就是说只要是通过数组原型上的方法对数组进行操作就都可以侦测到,但是别忘了,我们在日常开发中,还可以通过数组的下标来操作数据,如下:
let arr = [1,2,3]
arr[0] = 5; // 通过数组下标修改数组中的数据
arr.length = 0 // 通过修改数组长度清空数组
而使用上述例子中的操作方式来修改数组是无法侦测到的。Vue增加了两个全局API:
Vue.set和
Vue.delete
总结:
对于Array
型数据也在getter
中进行依赖收集;其次我们发现,当数组数据被访问时我们轻而易举可以知道,但是被修改时我们却很难知道,为了解决这一问题,我们创建了数组方法拦截器,从而成功的将数组数据变的可观测。接着我们对数组的依赖收集及数据变化如何通知依赖进行了深入分析;最后我们发现Vue
不但对数组自身进行了变化侦测,还对数组中的每一个元素以及新增的元素都进行了变化侦测,