写文章不容易,点个赞呗兄弟
专注 Vue 源码分享,文章分为白话版和 源码版,白话版助于理解工作原理,源码版助于了解内部详情,让我们一起学习吧
研究基于 Vue版本 【2.5.17】
如果你觉得排版难看,请点击 下面链接 或者 拉到 下面关注公众号也可以吧
【Vue原理】从模板到DOM的简要流程
今天的计划是,探索Vue模板挂载到页面是怎么样的一个流程,内容是指 正常 HTML 标签的模板挂载,这部分内容很重要。
而这部分内容也是为了 讲解 Component 作为铺垫,因为到最后 Component 必然也是作为一个正常标签去挂载,所以先把这部分抽出来讲
首先,这个流程,个人认为可以分为两大部分,分别是 init 和 mount
顾名思义,init 必定是和初始化有关,mount 和 挂载DOM 有关
Init
首先,当你开始调用 Vue 的时候,比如这样
// js
new Vue({
el: document.getElementsByTagName("div")[0],
})
// html,够简洁了吧
那么,先进入的肯定是 Vue 这个构造函数,呈上来!
function Vue(options) {
this._init(options);
}
Vue.prototype._init = function(options) {
// 初始化 选项,computed,data 之类的
// 初始化实例,给实例绑定些方法
// 触发 beforeCreated,created 钩子
}
这个 _init 方法,是构建Vue 实例的时候调用的,而创建Vue 实例,并非只有通过 new Vue 创建,有可能是 Vue 内部创建的,比如 component
所以,才需要提取出一个 init 方法
然后,init 到这里就结束了,下面就到了另一个流程 mount
Mount
init 结束,就开始解析模板啦,生成DOM 啦,挂载DOM 啦 之类的
开始正文,首先,从什么时候开始?此时需要亮出 _init 方法,没错,就是上面出现的方法
其实在这个方法的最后,有一个调用执行挂载DOM 的方法,如下
Vue.prototype._init = function(options) {
.....
if (vm.$options.el) {
vm.$mount(vm.$options.el);
}
}
可以看到一句代码,vm.$mount ,没错,就在这里开启了 DOM 挂载的 里程碑
但是,等等,有限制条件 vm.$options.el,也就是,必须有传入 el 才会在 最后调用 挂载DOM
所以,并不是所有的 Vue 实例新建都会在 init 结尾调用 vm.$mount 去挂载DOM,比如 component 两个过程就是分开的
我们还是先来看看 vm.$mount 吧
Vue.prototype.$mount = function(el) {
return mountComponent(this, query(el))
};
var mount = Vue.prototype.$mount;
Vue.prototype.$mount = function(el) {
...解析模板,生成模板渲染函数,保存渲染函数到 options
return mount.call(this, el)
}
原样呈现了,Vue 中有两个 $mount 函数,第一个的作用是给第二个 调用......如果大家看源码,不要搞混了喂
其中涉及到一个函数,mountComponent,速看
function mountComponent(vm, el) {
new Watcher(vm, function() {
vm._update(vm._render()
})
return v
}
function Watcher(vm, expOrFn) {
this.getter = expOrFn;
this.get();
}
Watcher.prototype.get = function() {
value = this.getter(vm);
}
上面代码的作用可以说是,为 Vue 实例新建监听者 watcher,并设置一个更新函数
而这个更新函数,会在新建 watcher后 马上执行,就是马上执行了一遍这行代码
vm._update(vm._render())
1、vm._render
这个函数的作用是,执行之前解析得到的【渲染函数】,渲染函数执行完会返回一个 模板对应的 【VNode】
vm._render 再把这个 vnode 返回
于是就把这个 vnode,传给了 vm._update 中当做了第一个参数
render 函数的内容其实非常的多,但是这里一笔带过,只用知道是用来生成Vnode 就好了,具体的内容会有具体的文章讲解
Vue.prototype._render = function() {
vnode = render();
return vnode
}
2、vm._update
这个函数的作用是,对比 vnode,挂载更新DOM
1、如果存在旧 vnode,那么会对比旧 vnode 和 刚传入的新 vnode,不断地 patch 得到最小变化单位,从而只更新这部分DOM
2、如果不存在旧 vnode,那么就直接把 vnode 转换为 dom 挂载到页面
其中,生成DOM 和 挂载DOM 用到的方法是 createElm
方法很简单,无非就是通过 标签名创建DOM,然后插入到页面中
function createElm(vnode, parentElm, refElm) {
var children = vnode.children;
var tag = vnode.tag;
vnode.elm = document.createElement(tag);
// 不断递归遍历子节点
createChildren(vnode, children);
// 插入DOM 节点
insert(parentElm, vnode.elm, refElm);
}
function createChildren(vnode, children) {
if (Array.isArray(children)) {
for (var i = 0; i < children.length; ++i) {
createElm(children[i], vnode.elm, null);
}
}
}
function insert(parent, elm, ref) {
if (parent) {
// 如果存在兄弟节点,就查到兄弟前面
if (ref) {
// 兄弟节点的父节点和 本节点父节点相同
if (ref.parentNode === parent) {
parent.insertBefore(elm, ref);
}
}
// 如果没有兄弟节点,就直接查到父节点最后
else {
parent.appendChild(elm);
}
}
}
总结
两个过程如下
init
1、初始化选项
2、初始化实例
mount
1、解析模板,生成并保存渲染函数
2、新建 watcher 并立即执行更新函数 vm._update(vm._render)
3、vm._render 调用渲染函数生成 VNode,传给 vm._update
4、调用 vm._update,根据 VNode 生成 DOM 并挂载