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

new Vue({

    el: '#app'

})

入口

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

import { initMixin } from './init'

import { stateMixin } from './state'

import { renderMixin } from './render'

import { eventsMixin } from './events'

import { lifecycleMixin } from './lifecycle'

import { warn } from '../util/index'

function Vue (options) {

  if (process.env.NODE_ENV !== 'production' &&

    !(this instanceof Vue)

  ) {

    warn('Vue is a constructor and should be called with the `new` keyword')

  }

  this._init(options)

}

initMixin(Vue)

stateMixin(Vue)

eventsMixin(Vue)

lifecycleMixin(Vue)

renderMixin(Vue)

export default Vue

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

...

// 各种初始化开始

initProxy(vm)

initLifecycle(vm)

initEvents(vm)

initRender(vm)

callHook(vm, 'beforeCreate')

initInjections(vm) // resolve injections before data/props

initState(vm)

initProvide(vm) // resolve provide after data/props

callHook(vm, 'created')

// 各种初始化完毕

...

// 解析模板

if (vm.$options.el) {

  vm.$mount(vm.$options.el)

}

解析

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

  • 判断 el 是否为body或者html根节点，是的话，提示错误。
  if (el === document.body || el === document.documentElement) {

    process.env.NODE_ENV !== 'production' && warn(

      `Do not mount Vue to <html> or <body> - mount to normal elements instead.`

    )

    return this

  }
  • 如果没有render函数，则开始解析模板
// 模板也分为多种

1，当使用 template 属性时，支持：

    1.1, 字符串模板

    1.2，一个script模板的id

    1.3，一个dom对象

2，当使用 el 属性时，获取对应dom的outerHTML 作为template
  • 调用 src/compiler/index.js 对模板进行AST解析和静态优化，并重建render方法

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

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

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

mountComponent() {

    // 1，经过上面的一系列初始化动作，render肯定已经有了，如果没有，返回一个节点并警告。

    callHook(vm, 'beforeMount')

    // 2，通过vm._render()方法把模板转化成vNode

    // 3，通过vm._update()更新dom节点

    callHook(vm, 'mounted')

}

和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. Linux--面试题-01

    1. 在Linux系统中,以 文件 方式访问设备 . 2. Linux内核引导时,从文件 /etc/fstab 中读取要加载的文件系统. 3. Linux文件系统中每个文件用 i节点 来标识. 4. ...

  2. 理解活在Iphone中的那些App （二）

    app是什么,为什么而存在 存在即合理的说法,已经被批臭批烂了.所以,作为一个程序员不能简简单单的因为上面来了一个需求,就完成一个需求.让做一个app就做一个app,只是简单的认为存在即合理,头让写就 ...

  3. ab网站压力测试命令的参数、输出结果的中文注解

    ab命令原理 Apache的ab命令模拟多线程并发请求,测试服务器负载压力,也可以测试nginx.lighthttp.IIS等其它Web服务器的压力. ab命令对发出负载的计算机要求很低,既不会占用很 ...

  4. 1059. [ZJOI2007]矩阵游戏【二分图】

    Description 小Q是一个非常聪明的孩子,除了国际象棋,他还很喜欢玩一个电脑益智游戏——矩阵游戏.矩阵游戏在一个N *N黑白方阵进行(如同国际象棋一般,只是颜色是随意的).每次可以对该矩阵进行 ...

  5. 【洛谷】【动态规划/背包】P1833 樱花

    [题目描述:] 爱与愁大神后院里种了n棵樱花树,每棵都有美学值Ci.爱与愁大神在每天上学前都会来赏花.爱与愁大神可是生物学霸,他懂得如何欣赏樱花:一种樱花树看一遍过,一种樱花树最多看Ai遍,一种樱花树 ...

  6. Odoo前端页面模版渲染引擎——Jinja2用法教程

    转载请注明原文地址:https://www.cnblogs.com/cnodoo/p/9307200.html  一:渲染模版 要渲染一个qweb模板文件,通过render_template方法即可. ...

  7. django restframework 简单总结

    官方文档:http://www.django-rest-framework.org/ model.py class Snippet(models.Model): created = models.Da ...

  8. Rserve详解,R语言客户端RSclient【转】

    R语言服务器程序 Rserve详解 http://blog.fens.me/r-rserve-server/ Rserve的R语言客户端RSclient https://blog.csdn.net/u ...

  9. vs未能正确加载XXX包，编译时停止工作问题

    出现这个问题的原因可能是配置更改或安装了另一个扩展,幸好之前用的不多,重新进行用户配置代价也不高,打开Visual Studio Tools:  选择VS2013 开发人员命令提示:  输入deven ...

  10. 《数据结构算法分析C描述》引论：选择问题，字谜游戏问题

    #include <stdio.h> #include <stdlib.h> // 第一题 // 找出N个数的第k个最大者 // 方法1:排序(冒泡),降序找出第k个值 // ...