摘要:可能会有理解存在偏差的地方,欢迎提指出,共同学习,共同进步。这样做减少了很多不需要的操作,大大提高了性能。当上已经绑定的时候,代表该对象已经被过了,所以创建一个空节点。
写在前面
因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出。
文章的原地址:https://github.com/answershuto/learnVue。
在学习过程中,为Vue加上了中文的注释https://github.com/answershuto/learnVue/tree/master/vue-src,希望可以对其他想学习Vue源码的小伙伴有所帮助。
可能会有理解存在偏差的地方,欢迎提issue指出,共同学习,共同进步。
在刀耕火种的年代,我们需要在各个事件方法中直接操作Dom来达到修改视图的目的。但是当应用一大就会变得难以维护。
那我们是不是可以把真实Dom树抽象成一棵以javascript对象构成的抽象树,在修改抽象树数据后将抽象树转化成真实Dom重绘到页面上呢?于是虚拟Dom出现了,它是真实Dom的一层抽象,用属性描述真实Dom的各个特性。当它发生变化的时候,就会去修改视图。
但是这样的javascript操作Dom进行重绘整个视图层是相当消耗性能的,我们是不是可以每次只更新它的修改呢?所以Vue.js将Dom抽象成一个以javascript对象为节点的虚拟Dom树,以VNode节点模拟真实Dom,可以对这颗抽象树进行创建节点、删除节点以及修改节点等操作,在这过程中都不需要操作真实Dom,只需要操作javascript对象,大大提升了性能。修改以后经过diff算法得出一些需要修改的最小单位,再将这些小单位的视图进行更新。这样做减少了很多不需要的Dom操作,大大提高了性能。
Vue就使用了这样的抽象节点VNode,它是对真实Dom的一层抽象,而不依赖某个平台,它可以是浏览器平台,也可以是weex,甚至是node平台也可以对这样一棵抽象Dom树进行创建删除修改等操作,这也为前后端同构提供了可能。
VNode基类先来看一下Vue.js源码中对VNode类的定义。
export default class VNode { tag: string | void; data: VNodeData | void; children: ?Array; text: string | void; elm: Node | void; ns: string | void; context: Component | void; // rendered in this component"s scope functionalContext: Component | void; // only for functional component root nodes key: string | number | void; componentOptions: VNodeComponentOptions | void; componentInstance: Component | void; // component instance parent: VNode | void; // component placeholder node raw: boolean; // contains raw HTML? (server only) isStatic: boolean; // hoisted static node isRootInsert: boolean; // necessary for enter transition check isComment: boolean; // empty comment placeholder? isCloned: boolean; // is a cloned node? isOnce: boolean; // is a v-once node? constructor ( tag?: string, data?: VNodeData, children?: ?Array , text?: string, elm?: Node, context?: Component, componentOptions?: VNodeComponentOptions ) { /*当前节点的标签名*/ this.tag = tag /*当前节点对应的对象,包含了具体的一些数据信息,是一个VNodeData类型,可以参考VNodeData类型中的数据信息*/ this.data = data /*当前节点的子节点,是一个数组*/ this.children = children /*当前节点的文本*/ this.text = text /*当前虚拟节点对应的真实dom节点*/ this.elm = elm /*当前节点的名字空间*/ this.ns = undefined /*编译作用域*/ this.context = context /*函数化组件作用域*/ this.functionalContext = undefined /*节点的key属性,被当作节点的标志,用以优化*/ this.key = data && data.key /*组件的option选项*/ this.componentOptions = componentOptions /*当前节点对应的组件的实例*/ this.componentInstance = undefined /*当前节点的父节点*/ this.parent = undefined /*简而言之就是是否为原生HTML或只是普通文本,innerHTML的时候为true,textContent的时候为false*/ this.raw = false /*静态节点标志*/ this.isStatic = false /*是否作为跟节点插入*/ this.isRootInsert = true /*是否为注释节点*/ this.isComment = false /*是否为克隆节点*/ this.isCloned = false /*是否有v-once指令*/ this.isOnce = false } // DEPRECATED: alias for componentInstance for backwards compat. /* istanbul ignore next https://github.com/answershuto/learnVue*/ get child (): Component | void { return this.componentInstance } }
这是一个最基础的VNode节点,作为其他派生VNode类的基类,里面定义了下面这些数据。
tag: 当前节点的标签名
data: 当前节点对应的对象,包含了具体的一些数据信息,是一个VNodeData类型,可以参考VNodeData类型中的数据信息
children: 当前节点的子节点,是一个数组
text: 当前节点的文本
elm: 当前虚拟节点对应的真实dom节点
ns: 当前节点的名字空间
context: 当前节点的编译作用域
functionalContext: 函数化组件作用域
key: 节点的key属性,被当作节点的标志,用以优化
componentOptions: 组件的option选项
componentInstance: 当前节点对应的组件的实例
parent: 当前节点的父节点
raw: 简而言之就是是否为原生HTML或只是普通文本,innerHTML的时候为true,textContent的时候为false
isStatic: 是否为静态节点
isRootInsert: 是否作为跟节点插入
isComment: 是否为注释节点
isCloned: 是否为克隆节点
isOnce: 是否有v-once指令
打个比方,比如说我现在有这么一个VNode树
{ tag: "div" data: { class: "test" }, children: [ { tag: "span", data: { class: "demo" } text: "hello,VNode" } ] }
渲染之后的结果就是这样的
生成一个新的VNode的方法hello,VNode
下面这些方法都是一些常用的构造VNode的方法。
createEmptyVNode 创建一个空VNode节点/*创建一个空VNode节点*/ export const createEmptyVNode = () => { const node = new VNode() node.text = "" node.isComment = true return node }createTextVNode 创建一个文本节点
/*创建一个文本节点*/ export function createTextVNode (val: string | number) { return new VNode(undefined, undefined, undefined, String(val)) }createComponent 创建一个组件节点
// plain options object: turn it into a constructor https://github.com/answershuto/learnVue if (isObject(Ctor)) { Ctor = baseCtor.extend(Ctor) } // if at this stage it"s not a constructor or an async component factory, // reject. /*Github:https://github.com/answershuto*/ /*如果在该阶段Ctor依然不是一个构造函数或者是一个异步组件工厂则直接返回*/ if (typeof Ctor !== "function") { if (process.env.NODE_ENV !== "production") { warn(`Invalid Component definition: ${String(Ctor)}`, context) } return } // async component /*处理异步组件*/ if (isUndef(Ctor.cid)) { Ctor = resolveAsyncComponent(Ctor, baseCtor, context) if (Ctor === undefined) { // return nothing if this is indeed an async component // wait for the callback to trigger parent update. /*如果这是一个异步组件则会不会返回任何东西(undifiened),直接return掉,等待回调函数去触发父组件更新。s*/ return } } // resolve constructor options in case global mixins are applied after // component constructor creation resolveConstructorOptions(Ctor) data = data || {} // transform component v-model data into props & events if (isDef(data.model)) { transformModel(Ctor.options, data) } // extract props const propsData = extractPropsFromVNodeData(data, Ctor, tag) // functional component if (isTrue(Ctor.options.functional)) { return createFunctionalComponent(Ctor, propsData, data, context, children) } // extract listeners, since these needs to be treated as // child component listeners instead of DOM listeners const listeners = data.on // replace with listeners with .native modifier data.on = data.nativeOn if (isTrue(Ctor.options.abstract)) { // abstract components do not keep anything // other than props & listeners data = {} } // merge component management hooks onto the placeholder node mergeHooks(data) // return a placeholder vnode const name = Ctor.options.name || tag const vnode = new VNode( `vue-component-${Ctor.cid}${name ? `-${name}` : ""}`, data, undefined, undefined, undefined, context, { Ctor, propsData, listeners, tag, children } ) return vnode }cloneVNode 克隆一个VNode节点
export function cloneVNode (vnode: VNode): VNode { const cloned = new VNode( vnode.tag, vnode.data, vnode.children, vnode.text, vnode.elm, vnode.context, vnode.componentOptions ) cloned.ns = vnode.ns cloned.isStatic = vnode.isStatic cloned.key = vnode.key cloned.isCloned = true return cloned }createElement
// wrapper function for providing a more flexible interface // without getting yelled at by flow export function createElement ( context: Component, tag: any, data: any, children: any, normalizationType: any, alwaysNormalize: boolean ): VNode { /*兼容不传data的情况*/ if (Array.isArray(data) || isPrimitive(data)) { normalizationType = children children = data data = undefined } /*如果alwaysNormalize为true,则normalizationType标记为ALWAYS_NORMALIZE*/ if (isTrue(alwaysNormalize)) { normalizationType = ALWAYS_NORMALIZE } /*Github:https://github.com/answershuto*/ /*创建虚拟节点*/ return _createElement(context, tag, data, children, normalizationType) } /*创建虚拟节点*/ export function _createElement ( context: Component, tag?: string | Class| Function | Object, data?: VNodeData, children?: any, normalizationType?: number ): VNode { /* 如果data未定义(undefined或者null)或者是data的__ob__已经定义(代表已经被observed,上面绑定了Oberver对象), https://cn.vuejs.org/v2/guide/render-function.html#约束 那么创建一个空节点 */ if (isDef(data) && isDef((data: any).__ob__)) { process.env.NODE_ENV !== "production" && warn( `Avoid using observed data object as vnode data: ${JSON.stringify(data)} ` + "Always create fresh vnode data objects in each render!", context ) return createEmptyVNode() } /*如果tag不存在也是创建一个空节点*/ if (!tag) { // in case of component :is set to falsy value return createEmptyVNode() } // support single function children as default scoped slot /*默认默认作用域插槽*/ if (Array.isArray(children) && typeof children[0] === "function") { data = data || {} data.scopedSlots = { default: children[0] } children.length = 0 } if (normalizationType === ALWAYS_NORMALIZE) { children = normalizeChildren(children) } else if (normalizationType === SIMPLE_NORMALIZE) { children = simpleNormalizeChildren(children) } let vnode, ns if (typeof tag === "string") { let Ctor /*获取tag的名字空间*/ ns = config.getTagNamespace(tag) /*判断是否是保留的标签*/ if (config.isReservedTag(tag)) { // platform built-in elements /*如果是保留的标签则创建一个相应节点*/ vnode = new VNode( config.parsePlatformTagName(tag), data, children, undefined, undefined, context ) } else if (isDef(Ctor = resolveAsset(context.$options, "components", tag))) { // component /*从vm实例的option的components中寻找该tag,存在则就是一个组件,创建相应节点,Ctor为组件的构造类*/ vnode = createComponent(Ctor, data, context, children, tag) } else { // unknown or unlisted namespaced elements // check at runtime because it may get assigned a namespace when its // parent normalizes children /*未知的元素,在运行时检查,因为父组件可能在序列化子组件的时候分配一个名字空间*/ vnode = new VNode( tag, data, children, undefined, undefined, context ) } } else { // direct component options / constructor /*tag不是字符串的时候则是组件的构造类*/ vnode = createComponent(tag, data, context, children) } if (isDef(vnode)) { /*如果有名字空间,则递归所有子节点应用该名字空间*/ if (ns) applyNS(vnode, ns) return vnode } else { /*如果vnode没有成功创建则创建空节点*/ return createEmptyVNode() } }
createElement用来创建一个虚拟节点。当data上已经绑定__ob__的时候,代表该对象已经被Oberver过了,所以创建一个空节点。tag不存在的时候同样创建一个空节点。当tag不是一个String类型的时候代表tag是一个组件的构造类,直接用new VNode创建。当tag是String类型的时候,如果是保留标签,则用new VNode创建一个VNode实例,如果在vm的option的components找得到该tag,代表这是一个组件,否则统一用new VNode创建。
关于作者:染陌
Email:answershuto@gmail.com or answershuto@126.com
Github: https://github.com/answershuto
Blog:http://answershuto.github.io/
知乎专栏:https://zhuanlan.zhihu.com/ranmo
掘金: https://juejin.im/user/58f87ae844d9040069ca7507
osChina:https://my.oschina.net/u/3161824/blog
转载请注明出处,谢谢。
欢迎关注我的公众号
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/88493.html
摘要:根据树生成所需的内部包含与首先会将模板进行得到一个语法树,再通过做一些优化,最后通过得到以及。会用正则等方式解析模板中的指令等数据,形成语法树。是将语法树转化成字符串的过程,得到结果是的字符串以及字符串。 写在前面 这篇文章算是对最近写的一系列Vue.js源码的文章(https://github.com/answershuto/learnVue)的总结吧,在阅读源码的过程中也确实受益匪...
摘要:如果以上情况均不符合,则通过会得到一个,里面存放了一个为旧的,为对应序列的哈希表。从这个哈希表中可以找到是否有与一致的旧的节点,如果同时满足,的同时会将这个真实移动到对应的真实的前面。 写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出。文章的原地址:https://github.com/ans...
摘要:的算法是基于的实现,并在些基础上作了很多的调整和改进。此时和之间的是新增的,调用,把这些虚拟全部插进的后边,可以认为新节点先遍历完。 虚拟dom 为什么出现:浏览器解析一个html大致分为五步:创建DOM tree –> 创建Style Rules -> 构建Render tree -> 布局Layout –> 绘制Painting。每次对真实dom进行操作的时候,浏览器都会从构建...
摘要:为的组件将不会被缓存。通过这两种方式分别检测是否匹配当前组件。修正取出中的不符合条件的,同时不是目前渲染的时,销毁对应的组件实例实例,并从中移除销毁对应的组件实例实例遍历中的所有项,如果不符合指定的规则的话,则会执行。 写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出。 文章的原地址:http...
摘要:函数通过参数来创建虚拟,结构精简。其中,访问的用法,使用场景集中在函数。使用代替模板功能在函数中,不再需要内置的指令,比如。方法时快速改变数组结构,返回一个新数组。 学习笔记:Render函数 Render函数 Vue2与Vue1最大的区别就在于Vue2使用了虚拟DOM来更新DOM节点,提升渲染性能。 Vue2与Vue1最大的区别就在于Vue2使用了虚拟DOM来更新DOM节点,提升...
阅读 522·2023-04-26 02:59
阅读 673·2023-04-25 16:02
阅读 2136·2021-08-05 09:55
阅读 3489·2019-08-30 15:55
阅读 4560·2019-08-30 15:44
阅读 1782·2019-08-30 13:02
阅读 2166·2019-08-29 16:57
阅读 2262·2019-08-26 13:35