vue模板编译
Vue 的模板编译是在 $mount 的过程中进行的,在 $mount 的时候执行了 compile 方法来将 template 里的内容转换成真正的 HTML 代码。
complie 最终生成 render 函数字符串,等待调用。这个方法分为三步:
- parse 函数解析 template
- optimize 函数优化静态内容
- generate 函数创建 render 函数字符串
parse解析
AST 的全称是 Abstract Syntax Tree,也就是所谓抽象语法树。每一个 AST 节点存放的就是我们的 HTML 元素、插值表达式或文本内容。AST 正是 parse 函数生成和返回的。
Optimize() 优化
会对 parse 生成的 AST 进行静态内容的优化。静态内容指的是和数据没有关系,不需要每次都刷新的内容。标记静态节点的作用是为了在后面做 Vnode 的 diff 时起作用,用来确认一个节点是否应该做 patch 还是直接跳过。optimize 的过程分为两步:
- 标记所有的静态和非静态结点
- 标记静态根节点
Generate()
Generate 函数的输入也是 AST,它递归了 AST 树,为不同的 AST 节点创建了不同的内部调用方法,等待后面的调用。生成 render 函数字符串。
经过解析后,接下来 Vue 做的事情就是 new watcher(),这个时候会对绑定的数据执行监听,render 函数就是数据监听的回调所调用的,其结果便是重新生成 vnode。
当这个 render 函数字符串在第一次 mount、或绑定的数据更新的时候,都会被调用,生成 Vnode。
如果是数据的更新,那么 Vnode 会与数据改变之前的 Vnode 做 diff,对内容做改动之后,就会更新到我们真正的 DOM 上。
vue模板编译的更多相关文章
- [Vue源码]一起来学Vue模板编译原理(一)-Template生成AST
本文我们一起通过学习Vue模板编译原理(一)-Template生成AST来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫持和发布订阅 一起来学Vu ...
- [Vue源码]一起来学Vue模板编译原理(二)-AST生成Render字符串
本文我们一起通过学习Vue模板编译原理(二)-AST生成Render字符串来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫持和发布订阅 一起来学V ...
- Vue模板内容
前面的话 如果只使用Vue最基础的声明式渲染的功能,则完全可以把Vue当做一个模板引擎来使用.本文将详细介绍Vue模板内容 概述 Vue.js使用了基于HTML的模板语法,允许声明式地将DOM绑定至底 ...
- 学习一个Vue模板项目
最开始学习Vue的时候,不建议直接使用模板,而应该自己从头写起.模板都是人写的,要坚信"人能我能".只有自己亲自实践,才能促进自己主动思考,才能对模板.框架有深刻的理解. 在Git ...
- vue模板语法
Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...
- 【转】【Html】Vuejs2.0学习之二(Render函数,createElement,vm.$slots,函数化组件,模板编译,JSX)
1.Render函数 所以直接来到Render,本来也想跳过,发现后面的路由貌似跟它还有点关联.先来看看Render 1.1 官网一开始就看的挺懵的,不知道讲的是啥,动手试了一下,一开头讲的是Rend ...
- es6实现简单模板编译
现在有各种框架,其中一个主要模块就是关于template.最火的vue.react等框架,在这一块上也是是下足了功夫.我也想写一个自己的模板编译工具,所以就做了个简单的实现,主要是使用es6的反引号编 ...
- Vuejs2.0学习之二(Render函数,createElement,vm.$slots,函数化组件,模板编译,JSX)
时隔一周多,因为一些别的事情绊住了,下面接着写.中间这段时间也有看官方文档,发现正如他所说90%的基础内容都一样,所以这里直接跳到我比较关注的东东上,要是想看看哪些不一样,可以参考这个http://v ...
- Vue模板语法与常用指令
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数,结合相应系统,在应用状态改变时 ...
随机推荐
- scrapy selenium 登陆zhihu
# -*- coding: utf-8 -*- # 导入依赖包 import scrapy from selenium import webdriver import time import json ...
- Docker学习笔记之docker volume 容器卷的那些事(一)
预览目录 volume 方式 相关用例 使用方式 使用 volume driver bind mount 方式 相关用例 使用方式 配置selinux标签 配置macOS的安装一致性 tmpfs 方式 ...
- JDK源码之HashSet
1.定义 HashSet继承AbstractSet类,实现Set,Cloneable,Serializable接口.Set 接口是一种不包括重复元素的 Collection,它维持它自己的内部排序,所 ...
- 一键PHP/JAVA安装工具
OneinStack是一键PHP/JAVA安装脚本工具,包含lnmp,lamp,lnmpa,ltmp,lnmh,MySQL,PostgreSQL,MongoDB等 建议使用 PHP7.1+MYSQL5 ...
- TCP 之 RST 原因分析
5. 往一个对端已经关闭的套接字上写入数据会收到一个RST信号 1.发送端的 发送缓冲区还有数据,但接收端tcp的接收通道已关闭 2. SYN到达某端口但此端口上没有正在监听的服务器.对于UDP,当一 ...
- android学习:apiDemos导入时R.java无法生成的问题
准备导入apiDemos研究一下别人的代码,发现导入后不能正常build,无法生成R.java,发现res/layout/progressbar_2.xml里有几个 <ProgressBar a ...
- 复选框批量删除操作-jquery方式
1.首先在页面添加一个批量删除的按钮:<li class="btns"><input id="deleteSubmit" class=&quo ...
- 【python36--对象】
1.对象=属性+方法 2.实例化对象 #类名称首字母大写 class Turle: #属性 color = 'green' weight = 10 legs = 4 shell = True mout ...
- Mysql的唯一性索引unique
目录 唯一性索引unique影响: unique与primary key的区别: 存在唯一键冲突时,避免策略: insert ignore: replace into: insert on dupli ...
- 在 JSDOM v11 中使用jQuery
在JSDOM v11中使用jQuery 从v10开始,jsdom提供了更灵活的API. https://swashata.me/blog/use-jquery-jsdom-v11/ const tes ...