Vue学习笔记:编译过程
碰到是否有template
选项时,会询问是否要对template
进行编译:
在template
编译(渲染成UI)有一个过程。模板通过编译生成AST,再由AST生成Vue的渲染函数,渲染函数结合数据生成Virtual DOM树,对Virtual DOM进行diff
和patch
后生成新的UI。将上图细化一下,也就是template
编译的过程如下图所示:
在深入一点,如下:
有关于Vue中
template
的渲染的详细过程,可以阅读《Vue的模板》一文。
简理的理解就是Vue中的template
编译成浏览器可识的过程会经过不少的过程。言外之意,最终在浏览器中呈现的并不是<template>
,而是会解析成标准的HTML,然后将组件的标签替换为对应的HTML片段。用个小示例来举例:
Vue将会通过其自身的编译机制(如前图所示的过程),将<my-component>
编译成让浏览器可以识别的HTML代码。可以借助浏览器开发者工具一探究竟:
我的理解是这样的。上面的示例通过new Vue()
创建一下人Vue的实例,并且将这个实例挂载到div#app
的元素下,然后把组件<my-component>
编译成HTML,最终渲染所需要的UI效果。继续用张图来描述这个过程,一图胜过千言万语嘛。
我们要说的是模板编译的作用域,在Vue中,组件是有一个作用域的:组件模板(<template>
)内的就是组件作用域,而其之外的就不是组件的作用域了,比如上面的示例,my-component
组件的作用域就是下面这部分:
通俗地讲,在子组件中定义的数据,只能用在子组件的模板。在父组件中定义的数据,只能用在父组件的模板。如果父组件的数据要在子组件中使用,则需要子组件定义props
Vue学习笔记:编译过程的更多相关文章
- Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习
一 使用环境: windows 7 64位操作系统 二 IDE:VSCode/PyCharm 三 Vue.js官网: https://cn.vuejs.org/ 四 下载安装引用 方式1:直接 ...
- Vue学习笔记-2
前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...
- Vue学习笔记-1
前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...
- vue 学习笔记(二)
最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...
- JVM学习笔记——类加载过程
JVM学习笔记——类加载过程 类加载模型——双亲委派模型(Parents Delegation Model)也可称为“溯源委派加载模型” Java的类加载器是一个运行时核心基础设施模块,主要是启动之初 ...
- Vue学习笔记-Vue.js-2.X 学习(四)===>脚手架Vue-CLI(基本工作和创建)
(五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二 Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...
- Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级
(四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...
- (二)我的Makefile学习冲动&&编译过程概述
前言 一 年轻的冲动 二 学习曲线 1 Makefile基本语法 2 bash基础 3 world 三 编译过程概述 1 主机预装工具 2 编译host工具 3 编译交叉工具链 4 编译内核模块 5 ...
- vue学习笔记之:为何data是一个方法
vue学习笔记之:为何data是一个方法 在vue开发中,我们可以发现,data中的属性值是在function中return出来的.可为何data必须是一个函数呢?我们先看官方的解释: 当一个组件被定 ...
- vue学习笔记(八)组件校验&通信
前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...
随机推荐
- Javascript实例 -- 计时器, 搜索框,selected联动
计时器: <body> <input type="text" id="i1"> <input type="button& ...
- “全栈2019”Java多线程第四章:设置和获取线程名称
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java多 ...
- iOS仿UC浏览器顶部频道滚动效果
很喜欢用UC浏览器上网,当然不是给UC打广告,里面有很多酷炫的效果,值的学习,这次分享的是频道滚动的效果.动画效果如下: 实现的这个效果的关键是绘制,重写顶部Label的drawRect方法 gith ...
- 如何给LOJ补全special judge
首先你要会写一个叫$data.yml$的东西, 这里面记录了这道题的$subtask$计分策略 也告诉了评测姬这道题是提交答案还是$spj$还是交互题 那么,$YAML$语言是啥啊? 别问我,我也不会 ...
- sele nium 模块
python3 web测试模块selenium 阅读目录 1.selenium安装配置 2.Selenium的基本使用 (1)声明浏览器对象 (2)定位元素 (3)元素对象(element) (4 ...
- Linux之解决命令行cat命令中文乱码
临时解决cat中文乱码 cat test.txt | iconv -f GBK -t UTF-8
- mongodb锁
锁住写操作 > db.fsyncLock(); { "info" : "now locked against writes, use db.fsyncUnlock( ...
- flask _bootstrap中使用flash
在模板中获取flash闪现的那段代码要和内容块放在同一级别上.不然网页上是看不到闪现的内容的. 比如在基模板里定义一个content block ,里面一个是get_flashed_messages代 ...
- F6&F7adjust the volume
Windows Registry Editor Version 5.00[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Keyboard La ...
- Smarty <= 3.1.32 Remote Code execution(CVE-2017-1000480)
Smarty介绍 smarty是一个php模板引擎,其项目地址:https://github.com/smarty-php/smarty 测试环境搭建 下载:https://github.co ...