原文链接我的blog,欢迎STAR。
首先安利一波福利,有没有用vscode的小伙伴?推荐一个神奇的字体,自从用了这个字体,敲代码效率简直上天了。先上图看看效果:
全等
箭头函数
小于等于
还有其他许多,就不一一列举出来了。 有没有看上了的? 没有我等下再来问。
Vue 和其他的 MVVM 思路是类似的:
主要是为了实现三个过程:
Object.defineProperty
, 将data里的每个属性全部转化为getter/setter,已遍拦截对象赋值与取值操作;
我们从 new Vue
开始,
上图即是官网给出的一张生命周期图,主要是四个过程:
现在,我们进入源码,分析具体的实现:
new vue()
的时候,会进入_init,
其中关键部分的代码如下:
可以看出在 beforeCreate
与 created
只有initState
, initState
是用于实现data observer
和 event/watcher
。
_init
最后,会运行 vm.$mount
方法:具体 vm.$mount
的分析,请看上篇。最后进行了 render()
, 从而会有Vnode
, 经过 DIFF 算法后会有真实 DOM ;
将以上用一张序列图表示也就是:
MVVM 框架有一个很重要的特征:就是当数据放生变化后,会自动更新对应的DOM节点。 Vue 是怎么实现的?
以上是来自官网的一张图。
前面提到在 beforeCreate
与 created
两个生命周期钩子函数之间会运行 initState()
方法。
initState() 源码里:
在这个方法里,会对props, data, computed
等属性利用 Object.defineProperty
将这些属性全部转化为 getter/setter
。
我们以 initData()
为例子进行分析:
这里有一个值得注意的地方,
proxy(vm, "_data", keys[i])
, 设置vm._data
为代理,具体作用是实现vm.a === vm._data.a
。
在 initData()
最后 会进行 observe(data, this)
。
在observe()里,既是转化为 getter/setter
。
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter () {
const value = getter ? getter.call(obj) : val
// 只有在有Dep.target时才说明是Vue内部依赖收集过程触发的getter
// 那么这个时候就需要执行dep.depend(),将watcher(Dep.target的实际值)添加到dep的subs数组中
// 对于其他时候,比如dom事件回调函数中访问这个变量导致触发的getter并不需要执行依赖收集,直接返回value即可
if (Dep.target) {
dep.depend()
if (childOb) {
// 如果value在observe过程中生成了ob实例,那么就让ob的dep也收集依赖
childOb.dep.depend()
}
if (isArray(value)) {
//如果数组元素也是对象,那么他们observe过程也生成了ob实例
dependArray(value)
}
}
return value
},
set: function reactiveSetter (newVal) {
var value = getter ? getter.call(obj) : val
if (newVal === value) {
return
}
if (setter) {
setter.call(obj, newVal)
} else {
val = newVal
}
// observe 这个新数据
childOb = observe(newVal)
// 通知到dep 进行数据更新。
dep.notify()
}
})复制代码
到这个时候,Observer 监听已经完成,如果数据更新,我们会进行 dep.notify()
方法:
dep.notify() , 方法里会执行update()
:
update() , 中会进行
queueWatcher()
方法:
queueWatcher()
, 目的是通过 nextTicker
来执行 run()
:
在 run()
里,其实就是执行 this.get()
方法:
在 get()
方法里,会运行 this.getter()
, 方法来更新 DOM 。
this.getter()
方法是啥?
再就是上文中所提到的new Watcher(), 的第二个参数。
vm._watcher = new Watcher(vm, () => {
vm._update(vm._render(), hydrating)
}, noop)复制代码
而在 new Watcher
构造完成后,会调用 this.get()
,触发 this.getter()
,方法触发 DOM 更新。
具体可以看watcher.js:
截一个关键代码部分的图:
以上,用一张序列图来表示,既就是:
对以上总结:
_init
,对属性利用 Object.defineProperty
,将属性转为 getter/setter
,在 setter
方法里,会调用 dep.notify()
。vm
设置 new Watcher
。data
变化时,进行数据跟新。完。