下面这段代码，vue内部做了什么操作？我去源码里面找找看

  1. new Vue({
  2.     el: '#app'
  3. })

入口

vue 的入口文件在 src/core/instance/index.js, 里面一进来就执行了很多初始化的操作。

  1. import { initMixin } from './init'
  2. import { stateMixin } from './state'
  3. import { renderMixin } from './render'
  4. import { eventsMixin } from './events'
  5. import { lifecycleMixin } from './lifecycle'
  6. import { warn } from '../util/index'
  8. function Vue (options) {
  9.   if (process.env.NODE_ENV !== 'production' &&
  10.     !(this instanceof Vue)
  11.   ) {
  12.     warn('Vue is a constructor and should be called with the `new` keyword')
  13.   }
  14.   this._init(options)
  15. }
  17. initMixin(Vue)
  18. stateMixin(Vue)
  19. eventsMixin(Vue)
  20. lifecycleMixin(Vue)
  21. renderMixin(Vue)
  23. export default Vue

进入 initMixin 方法看看，这个方法内部只做了一件事，定义 Vue.prototype._init , 这个 _init 方法又做了什么呢？

  1. ...
  2. // 各种初始化开始
  3. initProxy(vm)
  4. initLifecycle(vm)
  5. initEvents(vm)
  6. initRender(vm)
  7. callHook(vm, 'beforeCreate')
  8. initInjections(vm) // resolve injections before data/props
  9. initState(vm)
  10. initProvide(vm) // resolve provide after data/props
  11. callHook(vm, 'created')
  12. // 各种初始化完毕
  13. ...
  14. // 解析模板
  15. if (vm.$options.el) {
  16.   vm.$mount(vm.$options.el)
  17. }

解析

进入 src/platforms/web/entry-runtime-with-compiler.js 文件，看看 $mount 方法是怎么处理模板的。

  • 判断 el 是否为body或者html根节点，是的话，提示错误。
  1.   if (el === document.body || el === document.documentElement) {
  2.     process.env.NODE_ENV !== 'production' && warn(
  3.       `Do not mount Vue to <html> or <body> - mount to normal elements instead.`
  4.     )
  5.     return this
  6.   }
  • 如果没有render函数，则开始解析模板
  1. // 模板也分为多种
  2. 1，当使用 template 属性时，支持：
  3.     1.1, 字符串模板
  4.     1.2，一个script模板的id
  5.     1.3，一个dom对象
  7. 2，当使用 el 属性时，获取对应dom的outerHTML 作为template
  • 调用 src/compiler/index.js 对模板进行AST解析和静态优化，并重建render方法

对于模板解析，这篇文章分析的很详细 Vue 模板编译原理

  • 在解析完模板之后，调用的是 runtime/index.js 中的 $mount 方法。

而$mount 方法调用 src/core/instance/lifecycle.js 中的 mountComponent 方法

  1. mountComponent() {
  2.     // 1，经过上面的一系列初始化动作，render肯定已经有了，如果没有，返回一个节点并警告。
  3.     callHook(vm, 'beforeMount')
  4.     // 2，通过vm._render()方法把模板转化成vNode
  5.     // 3，通过vm._update()更新dom节点
  6.     callHook(vm, 'mounted')
  7. }

和VUE1的区别

在vue1.0种，模板的解析是通过 createDocumentFragment 对dom进行代理实现的，到了2.0时代，考虑到服务端渲染，采用了jquery作者开发的 html-parse 库进行字符串模板解析。

Vue2.0原理-模板解析的更多相关文章

  1. 基于vue2.0原理-自己实现MVVM框架之computed计算属性

    基于上一篇data的双向绑定,这一篇来聊聊computed的实现原理及自己实现计算属性. 一.先聊下Computed的用法 写一个最简单的小demo,展示用户的名字和年龄,代码如下: <body ...

  2. Vue2.0原理-指令

    指令是 模板解析 的续章,本文会尝试从源码的角度来理解 指令 是如何被提取和应用的. 指令的提取 指令的提取过程是在parse阶段进行的,在 parseHTML 方法中,会解析字符串模板为如下的单个a ...

  3. vue1.0 与 Vue2.0的一些区别 及用法

    1.Vue2.0的模板标记外必须使用元素包起来: eg:Vue1.0的写法 <!DOCTYPE html> <html> <head> <meta chars ...

  4. vue2.0 双向绑定原理分析及简单实现

    Vue用了有一段时间了,每当有人问到Vue双向绑定是怎么回事的时候,总是不能给大家解释的很清楚,正好最近有时间把它梳理一下,让自己理解的更清楚,下次有人问我的时候,可以侃侃而谈. 一.首先介绍Obje ...

  5. PHP－－关于模板的原理和解析

    此内容用作笔记,以备日后查看,此内容为学习李炎恢课程而来,并非自己所创,如有问题请私信~ 将PHP代码和静态HTML代码进行分离,使代码的可读性和维护性得到显著提高. 使用模板引擎: 我们所说的模板是 ...

  6. Vue2.0的变化 ，组件模板，生命周期，循环，自定义键盘指令，过滤器

    组件模板: 之前: <template> <h3>我是组件</h3><strong>我是加粗标签</strong> </templat ...

  7. Android进阶：七、Retrofit2.0原理解析之最简流程【下】

    紧接上文Android进阶:七.Retrofit2.0原理解析之最简流程[上] 一.请求参数整理 我们定义的接口已经被实现,但是我们还是不知道我们注解的请求方式,参数类型等是如何发起网络请求的呢? 这 ...

  8. PHP－－关于模板的原理和解析(php模板原理)

    此内容用作笔记,以备日后查看,此内容为学习李炎恢课程而来,并非自己所创,如有问题请私信~ 将PHP代码和静态HTML代码进行分离,使代码的可读性和维护性得到显著提高. 使用模板引擎: 我们所说的模板是 ...

  9. 【Vuejs】351- 带你解析vue2.0的diff算法

    前言 vue2.0加入了virtual dom,有向react靠拢的意思.vue的diff位于patch.js文件中,该算法来源于snabbdom,复杂度为O(n).了解diff过程可以让我们更高效的 ...

随机推荐

  1. IDEA 使用技巧 Update

    IDEA使用起来和Eclipse很大区别. 1.快捷键. 因为一个个熟悉起来费时间,就直接在Preferences—keymap里选择了Eclipse OS X,这样快捷键就转换到了Mac下Eclip ...

  2. Java基础知识强化107：DecimalFormat

    1. 引入: 如何控制输出数据的精度? >1. 使用Math.round方法 (1)Java如何把一个float(double)四舍五入到小数点后2位,4位,或者其它指定位数 ? 答:比如,如下 ...

  3. ubuntu18.04 mariadb start失败

    在Ubuntu 安装mariadb 再restart 后出现错误 journalctl -xe 发现 apparmor权限问题 AppArmor 是一款与SeLinux类似的安全框架/工具,其主要作用 ...

  4. 为什么会有object这么一个根基类

    先问一个问题,为什么需要有一个统一的基类:Object?甚至,我们在编程语言中也常常见到这种模式,比如Java中的object.C#的object,甚至一些纯对象的脚本语言(Ruby里连数字123都是 ...

  5. leetcode566. Reshape the Matrix

    https://leetcode.com/problems/reshape-the-matrix/description/ public int[][] matrixReshape(int[][] n ...

  6. Spring整合MyBatis（一）MyBatis独立使用

    摘要: 本文结合<Spring源码深度解析>来分析Spring 5.0.6版本的源代码.若有描述错误之处,欢迎指正. MyBatis本是Apache的一个开源项目iBatis,2010年这 ...

  7. 最近邻规则分类(k-Nearest Neighbor )机器学习算法python实现

    综述 Cover和Hart在1968年提出了最初的近邻算法 是分类(classification)算法 输入基于实例的学习(instance-based learning),惰性学习(lazy lea ...

  8. http协议中的keeplive是做什么的？它的适应场景是什么？

    1.Http底层也是通过TCP传输的. 2.HTTP keep-alive Http是一个”请求-响应”协议,它的keep-alive主要是为了让多个http请求共享一个Tcp连接,以避免每个Http ...

  9. Android working with Volley Library

    Volley提供了优美的框架,使得Android应用程序网络访问更容易和更快.Volley抽象实现了底层的HTTP Client库,让你不关注HTTP Client细节,专注于写出更加漂亮.干净的RE ...

  10. unlink与close关系

    close和unlink.以前时候总是不太理解两者的区别,最近看到一篇博客比较详细地描述了二者的本质区别,这里我引用了它的原文.         “每一个文件,都可以通过一个struct stat的结 ...