Vue2.0原理-模板解析
下面这段代码，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原理-模板解析的更多相关文章
- 基于vue2.0原理-自己实现MVVM框架之computed计算属性
基于上一篇data的双向绑定,这一篇来聊聊computed的实现原理及自己实现计算属性. 一.先聊下Computed的用法 写一个最简单的小demo,展示用户的名字和年龄,代码如下: <body ...
- Vue2.0原理-指令
指令是 模板解析 的续章,本文会尝试从源码的角度来理解 指令 是如何被提取和应用的. 指令的提取 指令的提取过程是在parse阶段进行的,在 parseHTML 方法中,会解析字符串模板为如下的单个a ...
- vue1.0 与 Vue2.0的一些区别 及用法
1.Vue2.0的模板标记外必须使用元素包起来: eg:Vue1.0的写法 <!DOCTYPE html> <html> <head> <meta chars ...
- vue2.0 双向绑定原理分析及简单实现
Vue用了有一段时间了,每当有人问到Vue双向绑定是怎么回事的时候,总是不能给大家解释的很清楚,正好最近有时间把它梳理一下,让自己理解的更清楚,下次有人问我的时候,可以侃侃而谈. 一.首先介绍Obje ...
- PHP－－关于模板的原理和解析
此内容用作笔记,以备日后查看,此内容为学习李炎恢课程而来,并非自己所创,如有问题请私信~ 将PHP代码和静态HTML代码进行分离,使代码的可读性和维护性得到显著提高. 使用模板引擎: 我们所说的模板是 ...
- Vue2.0的变化 ，组件模板，生命周期，循环，自定义键盘指令，过滤器
组件模板: 之前: <template> <h3>我是组件</h3><strong>我是加粗标签</strong> </templat ...
- Android进阶：七、Retrofit2.0原理解析之最简流程【下】
紧接上文Android进阶:七.Retrofit2.0原理解析之最简流程[上] 一.请求参数整理 我们定义的接口已经被实现,但是我们还是不知道我们注解的请求方式,参数类型等是如何发起网络请求的呢? 这 ...
- PHP－－关于模板的原理和解析(php模板原理)
此内容用作笔记,以备日后查看,此内容为学习李炎恢课程而来,并非自己所创,如有问题请私信~ 将PHP代码和静态HTML代码进行分离,使代码的可读性和维护性得到显著提高. 使用模板引擎: 我们所说的模板是 ...
- 【Vuejs】351- 带你解析vue2.0的diff算法
前言 vue2.0加入了virtual dom,有向react靠拢的意思.vue的diff位于patch.js文件中,该算法来源于snabbdom,复杂度为O(n).了解diff过程可以让我们更高效的 ...
随机推荐
- 自定义配置编译linux内核
1 编译linux内核原因一般情况下,我们是不需要重新去编译linux内核的,但如果你发现你需要修改内核的某个部分或者说你需要的某个模块并没有编译进内核,那里你可以通过重新编译内核来满足你的需求,比如 ...
- 盒子模型之margin相关技巧！
废话不多说,直接进入主题,margin相关技巧. 1.设置元素水平居中:margin:x auto; 2.margin负值让元素位移及边框合并. 外边距合并 指当两个垂直外边距相遇时,它们将形成一个外 ...
- [AHOI2009]飞行棋
嘟嘟嘟 刚开始想这道题的时候确实很蒙,只想到矩形对边做对应的弧长相等,然后想办法凑出相等的弧长.其实正解很简单,不要去想边,应该想对角线,因为根据初中园的知识,这个矩形的对角线是圆的直径,而直径所对的 ...
- [USACO09MAR]Cow Frisbee Team
嘟嘟嘟 这个是一个很明显的dp,遇到这种倍数的问题的,就令dp[i][j]表示选到了第 i 只牛(不是选了 i 只牛),sum(Ri) % f == j 的方案数,则, dp[i][j] = dp[i ...
- 【转】iOS:AvPlayer设置播放速度不生效的解决办法
现象: 项目有一个需求是实现视频的慢速播放,使用的是封装的AvPlayer,但是设置时发现比如设置rate为0.5,0.1,0.01都是一样的速度,非常疑惑.后来经过查找资料,发现iOS10对这个AP ...
- Python学习之路 （三）爬虫（二）
通用爬虫和聚焦爬虫 根据使用场景,网络爬虫可分为 通用爬虫 和 聚焦爬虫 两种. 通用爬虫 通用网络爬虫 是 捜索引擎抓取系统(Baidu.Google.Yahoo等)的重要组成部分.主要目的是将互联 ...
- Core WebAPI 入门
官方文档地址 https://docs.microsoft.com/zh-cn/aspnet/?view=aspnetcore-2.2#pivot=core 使用 ASP.NET Core 构建 We ...
- ethereumjs/ethereumjs-common-2-API文档
https://github.com/ethereumjs/ethereumjs-common/blob/master/docs/index.md 该API的调用的详细例子可见ethereumjs/e ...
- $2018/8/19 = Day5$学习笔记 + 杂题整理
\(\mathcal{Morning}\) \(Task \ \ 1\) 容斥原理 大概这玩意儿就是来用交集大小求并集大小或者用并集大小求交集大小的\(2333\)? 那窝萌思考已知\(A_1,A_2 ...
- 故障排除--kubernetes 运维操作步骤 -- kubedns -- busybox -- nslookup 问题
1.node的扩容 在k8s中,对一个新的node的加入非常简单,只需要在node节点上安装docker.kubelet和kube-proxy服务,然后将kubelet和kube-proxy的启动参数 ...