这是笔者最近一段时间的学习收获,将其整理成文,希望能对各位有些许帮助。文章稍长,但绝对精粹。也算是笔者为各位献上的一份“元旦大礼”吧~~
(因文章过长,故将其整理为上、下两篇,之间连续贯通)
Vue运行机制全局预览
【初始化及挂载】=>【编译】(parse-optimize-generate)=>【render function渲染】(响应式)=>【Virtual DOM】=>【更新视图】
初始化及挂载
在new了vue之后,Vue会调用_init函数进行(全局)初始化。初始化生命周期、事件、props、methods、data、computed、watch等。其中最重要的是通过Object.defineProperty
设置setter和getter函数,用来实现【响应式】和【依赖收集】。
初始化后调用 $mount 挂载组件 —— 如果是运行时编译,即不存在 render function 但是存在templete的情况,(此后)还需进行【编译】步骤。编译
- parse:用正则等方法解析templete模板中的指令、class、style等数据,形成AST(抽象语法树——源代码的抽象语法结构的树状表现形式)
- optimize:主要为了标记static节点。这是vue的一处优化——后面当update更新界面时,会有一个 patch 的过程,diff算法会直接跳过静态节点,从而减少了比较的过程,优化了patch的性能
- generate:将AST转化为 render function 字符串的过程。得到 render & staticRenderFns 字符串
经历以上三个阶段后,组件中就会存在渲染VNode所需的render function了。
响应式
Vue的响应式中做出卓越贡献的也就getter和setter了。
当 render function 被渲染时,因为会读取所需对象的值,所以会触发getter进行【依赖收集】,其目的是将观察者Watcher对象存放到当前闭包中的订阅者Dep的subs中,形成如下关系:
在修改对象值时,会触发对应的setter,setter通知之前【依赖收集】得到的Dep中每一个Watcher,告诉他们自己的值改变了,需要重新渲染视图。这时候这些Watcher就开始调用update来更新视图 —— 当然,这中间还有一个patch的过程,以及使用队列来异步更新的策略。
Virtual DOM
前面说 render function 会转化为VNode节点。而Virtual DOM其实是一棵以JavaScript对象为基础的树。用对象属性描述节点。它实际上只是一层对真是DOM的抽象。
正是由于Virtual DOM是以JavaScript对象为基础而不依赖平台环境。所以使他拥有了跨平台的能力。
一个简单的例子:
渲染之后就得到:
这两段代码的逆向过程,其实就是一个HTML解析器解析标签的过程。让我们来逐步看看:
响应式系统
对vue稍有深究的人都一定知道,Vue的【响应式】是基于Object.defineProperty
实现的。
其使用方法:
比如,一般更喜欢这样写:
实现Observer
首先定义一个函数cb,用来模拟视图更新。内部是一些更新视图的方法:
然后我们定义一个defineReactive,这个方法通过Object.defineProperty
来实现对对象的【响应式】化,入参当然是obj(需要绑定的对象)、key(obj的一些属性)、val(具体值),经过defineReactive处理后,obj的key属性会在读的时候触发reactiveGetter方法,在写的时候触发reactiveSetter方法:
这些当然是不够的。我们需要在这上面再封装一层observer —— 它传入一个value(需要“响应式”化的对象)参数,通过遍历他所有属性的方式来对该对象的每一个属性做defineReactive处理:
最后,我们把它们封装到“vue”中:
这时,就可以“为所欲为了”:
这样代码就“完美”了吗?
响应式系统的依赖收集追踪原理
为什么要“追踪”?
假如我们现在有一个Vue对象:
然后我们这么做了:
如上,我们修改了text3的数据,但视图中并不需要text3,所以我们并不需要调用cb函数。
要解决这个问题,就需要大名鼎鼎的【订阅】 & 【观察者】模式了:
订阅者Dep —— 存放Watcher对象 (->其实这可以说成是一个“消息管理中心”)
观察者Watcher:
接下来要去修改一下defineReactive以及Vue的构造函数,来完成【依赖收集的注入】:(我们不再需要“cb”了)
我们在闭包中增加了一个Dep类的对象,用来收集Watcher对象。在对象被“读”的时候,会触发reactiveGetter,把当前Watcher对象(存放在Dep.target中)收集到Dep类中去;之后“写”的时候,触发reactiveSetter,通知类Dep调用notify来触发所有Watcher的update更新对应视图。