专栏首页王鹤的专栏Vue.js 2.0源码解析之前端渲染篇
原创

Vue.js 2.0源码解析之前端渲染篇

作者介绍:王鹤,腾讯前端高级工程师,参与过QQ情侣、QQ星影联盟、QQ个性化装扮等项目的研发工作。秉承「不想当产品经理的程序员,不是好的设计师」。除敲敲代码外,对产品、设计、摄影也有一定的兴趣。

一、前言

Vue.js框架是目前比较火的MVVM框架之一,简单易上手的学习曲线,友好的官方文档,配套的构建工具,让Vue.js在2016大放异彩,大有赶超React之势。前不久Vue.js 2.0正式版已出,在体积优化(相比1.0减少了50%)、性能提升(相比1.0提升60%)、API优化等各方面都更上一层楼。

本文是系列文章,主要想通过对于Vue.js 2.0源码的分析,从代码层面解析Vue.js的实现原理,帮助读者能够更深入地理解整个框架的思想。此篇文章主要介绍前端渲染部分。

不足之处还请批评指正,欢迎一起交流学习。

二、Vue的初始化

我们在使用Vue.js的时候,最基本的一个使用,就是在HTML引入Vue.js的库文件,并写如下一段代码:

1.var app = new Vue({
2.  el: '#app',
3.  data: {
4.    message: 'Hello Vue!'
5.  }
6.})

new Vue,本质就是生成一个Vue的对象,我们来了解一下这个生成Vue对象的过程是怎样的:

首先,Vue的入口是/src/entries/web-runtime-with-compiler.js,这是由config.js配置文件决定的。

这个入口文件中import了很多文件,其中有一条主要的脉络:

/src/entries/web-runtime-with-compiler.js 引用了/src/entries/web-runtime.js 引用了/src/core/index.js 引用了/src/core/instance/index.js

其中/src/core/instance/index.js是最核心的初始化代码,其中:

红框部分,就是整个Vue的类的核心方法。其含义给读者解读一下:

1.//初始化的入口,各种初始化工作
2.initMixin(Vue) 
3.//数据绑定的核心方法,包括常用的$watch方法
4.stateMixin(Vue)
5.//事件的核心方法,包括常用的$on,$off,$emit方法
6.eventsMixin(Vue)
7.//生命周期的核心方法
8.lifecycleMixin(Vue)
9.//渲染的核心方法,用来生成render函数以及VNode
10.renderMixin(Vue)

其中new Vue就是执行下面的这个函数:

_init方法就是initMixin中的_init方法。

至此,程序沿着这个_init方法继续走下去。

三、Vue的渲染逻辑——Render函数

在定义完成Vue对象的初始化工作之后,本文主要是讲渲染部分,那么我们接上面的逻辑,看Vue.js是如何渲染页面的。在上图中我们看到有一个initRender的方法:

在该方法中会执行红框部分的内容:

$mount方法就是整个渲染过程的起始点。具体定义是在/src/entries/web-runtime-with-compiler.js中,根据代码整理成流程图:

由此图可以看到,在渲染过程中,提供了三种渲染模式,自定义Render函数、template、el均可以渲染页面,也就是对应我们使用Vue时,三种写法:

1. 自定义Render函数

1.Vue.component('anchored-heading', {
2.    render: function (createElement) {
3.        return createElement(
4.            'h' + this.level,   // tag name 标签名称
5.            this.$slots.default // 子组件中的阵列
6.        )
7.    },
8.    props: {
9.        level: {
10.            type: Number,
11.            required: true
12.        }
13.    }
14.})

2.template写法

1.var vm = new Vue({
2.    data: {
3.        // 以一个空值声明 `msg`
4.        msg: ''
5.    },
6.    template: '<div>{{msg}}</div>'
7.})

3.el写法(这个就是入门时最基本的写法)

1.var app = new Vue({
2.    el: '#app',
3.    data: {
4.        message: 'Hello Vue!'
5.    }
6.})

这三种渲染模式最终都是要得到Render函数。只不过用户自定义的Render函数省去了程序分析的过程,等同于处理过的Render函数,而普通的template或者el只是字符串,需要解析成AST,再将AST转化为Render函数。

记住一点,无论哪种方法,都要得到Render函数。

我们在使用过程中具体要使用哪种调用方式,要根据具体的需求来。

  • 如果是比较简单的逻辑,使用template和el比较好,因为这两种都属于声明式渲染,对用户理解比较容易,但灵活性比较差,因为最终生成的Render函数是由程序通过AST解析优化得到的;
  • 而使用自定义Render函数相当于人已经将逻辑翻译给程序,能够胜任复杂的逻辑,灵活性高,但对于用户的理解相对差点。

四、Vue的渲染逻辑——VNode对象&patch方法

根据上面的结论,我们无论怎么渲染,最终会得到Render函数,而Render函数的作用是什么呢?我们看到在/src/core/instance/lifecycle.js中有这么一段代码:

1.vm._watcher = new Watcher(vm, () => {
2.    vm._update(vm._render(), hydrating)
3.}, noop);

意思就是,通过Watcher的绑定,每当数据发生变化时,执行_update的方法,此时会先执行vm._render(),在这个vm._render()中,我们的Render函数会执行,而得到VNode对象。

VNode对象是什么?VNode就是Vue.js 2.0中的Virtual DOM,在Vue.js 2.0中,相较Vue.js 1.0引入了Virtual DOM的概念,这也是Vue.js 2.0性能提升的一大关键。Virtual DOM有多种实现方式,但基本思路都是一样的,分为两步:

1. Javascript模拟DOM模型树

在Vue.js 2.0中Javascript模拟DOM模型树就是VNode,Render函数执行后都会返回VNode对象,为下一步操作做准备。在/src/core/vdom/vnode.js中,我们可以看到VNode的具体数据结构:

VNode的数据结构中还有VNodeData、VNodeDirective、VNodeComponentOptions,这些数据结构都是对DOM节点的一些描述,本文不一一介绍。读者可以根据源码来理解这些数据结构。(PS:Vue.js使用了flow,标识了参数的静态类型,对理解代码很有帮助^_^)

2. DOM模型树通过DOM Diff算法查找差异,将差异转为真正DOM节点

我们知道Render函数执行生成了VNode,而VNode只是Virtual DOM,我们还需要通过DOM Diff之后,来生成真正的DOM节点。在Vue.js 2.0中,是通过/src/core/vdom/patch.js中的patch(oldVnode, vnode ,hydrating)方法来完成的。

该方法有三个参数oldVnode表示旧VNode,vnode表示新VNode,hydrating表示是否直接使用服务端渲染的DOM元素,这个本文不作讨论,在服务端渲染篇再详细介绍。

其主要逻辑为当VNode为真实元素或旧的VNode和新的VNode完全相同时,直接调用createElm方法生成真实的DOM树,当VNode新旧存在差异时,则调用patchVnode方法,通过比较新旧VNode节点,根据不同的状态对DOM做合理的添加、删除、修改DOM(这里的Diff算法有兴趣的读者可以自行阅读patchVnode方法,鉴于篇幅不再赘述),再调用createElm生成真实的DOM树。

五、Vue的渲染小结

回过头来看,这里的渲染逻辑并不是特别复杂,核心关键的几步流程还是非常清晰的:

  1. new Vue,执行初始化
  2. 挂载$mount方法,通过自定义Render方法、template、el等生成Render函数
  3. 通过Watcher监听数据的变化
  4. 当数据发生变化时,Render函数执行生成VNode对象
  5. 通过patch方法,对比新旧VNode对象,通过DOM Diff算法,添加、修改、删除真正的DOM元素

至此,整个new Vue的渲染过程完毕。

文章来源公众号 小时光茶社(Tech Teahouse)

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 腾讯工程师们怎么玩 Vue.js?

    Vue.js 是国人尤雨溪开发的一套前端框架。从去年开始,就火遍了国内外。本文精选了腾云阁中分享的相关优质技术文章,从入门、实战、源码、优化等多个方面进行了阐述...

    云加社区
  • Vue.js 源码⽬录设计

    包括把模板解析成 ast 语法树,ast 语法树优化,代码生成等功能 编译的工作可以在构建时做(借助 webpack、vue-loader 等辅助插件);...

    Leophen
  • Vue 源码分析—— 目录结构

     1.compiler 目录包含Vue.js 所有编译相关的代码。它包括把所有模板解析成ast 语法树, ast 语法树优化等功能。

    用户1197315
  • Vue 2.0 正式发布了!

    时见疏星
  • Announcing Vue.js 2.0

    时见疏星
  • Vue源码探秘(一)

    Vue作为当前前端开发中比较重要的框架,在企业级开发中应用十分广泛。目前也是我的主要技术栈之一。在接下来的系列文章中,我将带大家一起探秘Vue.js底层源码。

    一只图雀
  • 为什么现在的开发者总是拿 Vue.js 和 JavaScript 巨头 Angular、React 比较?

    Vue.js 是一个用来构建 web UI 的 JavaScript 库,基于 MIT 开源协议。Vue.js 于 2013 年首次分布,但是在接下来的两年内,...

    疯狂的技术宅
  • ​Vue + SpringCloud前后端分离项目3个月项目实战经验分享(下)

    上篇文章总结了三个月的后端开发。本篇主要对3个个月前端开发做个总结。最开始我想着我主要负责好后端的开发。没后端接口开发完成与前台的同事调接口。由于前端严重缺人,...

    不安分的猿人
  • 2021年,vue3.0 面试题分析(干货满满,内容详尽)

    2020年09月18日,vue3.0正式发布。随着它的发布,Vue.js再次被推上了前端的风口浪尖。 同时,面试官的提问也将加入一些有关Vue3.0的新元素(...

    winty
  • Vue.js——60分钟快速入门(转载) Vue.js介绍声明该文是转载的,欢迎转载,支持尊重版权,原文作者:keepfool,原文地址:http://www.cnblogs.com/keepfo

    Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。相比于Angular.js,Vue.js提供了更加简洁、更易于...

    lin_zone
  • vue[0x02] -- 基础特性

    你会发现这样一个现象,我本来时挂载到id为app的div上的,但是它并没有这么做。

    江涛同志
  • Vue.js 2 入门与提高(一)

    Vue.js作为一个后起的前端框架,借鉴了Angular 、React等现代前端框架/库的诸多特点,并且 取得了相当不错的成绩。

    笔阁
  • Vue.js前端开发快速入门与专业应用

    1.一个Vue实例相当于一个MVVM模式中的ViewModel,在实例化的时候,我们可以传入一个选项对象,包含数据、模板、挂载元素、方法、生命周期勾子等选项

    硬核项目经理
  • 前后端通吃,vue大全Mark一下

    仓库地址:https://github.com/opendigg/awesome-github-vue

    java乐园
  • Vue.js渐进式JavaScript框架

    vue.js拥有更小的体积,压缩后的vue.js就只有33k;vue.js拥有更高的运行效率,vue.js是基于虚拟dom的,虚拟dom是一种可以预先通过Jav...

    达达前端
  • Vue.js笔试题解决业务中常见问题

    如果你遇到h5页面这个问题,当输入框在最底部,点击软键盘后输入框会被遮挡,可以如下解决问题:

    达达前端
  • Vue PC端框架

    Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 中文文档 | github地址

    grain先森
  • 2018 年最值得关注的 30 个 Vue 开源项目

    在过去的一年中,我比较了近 3000 个 Vue.js 开源项目,选出 30 强(1%的比例)。

    Fundebug
  • 前端-小程序开发实践总结

    css样式不能引用本地图片资源,只能引用线上资源(background-image),引用本地图片资源只能用<image>标签。

    grain先森

扫码关注云+社区

领取腾讯云代金券