碰到是否有template选项时,会询问是否要对template进行编译:

template编译(渲染成UI)有一个过程。模板通过编译生成AST,再由AST生成Vue的渲染函数,渲染函数结合数据生成Virtual DOM树,对Virtual DOM进行diffpatch后生成新的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的编译过程的更多相关文章

  1. [Vue源码]一起来学Vue模板编译原理(一)-Template生成AST

    本文我们一起通过学习Vue模板编译原理(一)-Template生成AST来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫持和发布订阅 一起来学Vu ...

  2. [Vue源码]一起来学Vue模板编译原理(二)-AST生成Render字符串

    本文我们一起通过学习Vue模板编译原理(二)-AST生成Render字符串来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫持和发布订阅 一起来学V ...

  3. [译] 制作 Vue 3 的过程

    原文链接: https://increment.com/frontend/making-vue-3 在过去的一年里,Vue 团队一直在研究 Vue.js 的下一个主要版本,我们希望在 2020 年上半 ...

  4. Android工程的编译过程

    现在很多人想对Android工程的编译和打包进行自动化,比如建立每日构建系统.自动生成发布文件等等.这些都需要我们对Android工程的编译和打包有一个深入的理解,至少要知道它的每一步都做了什么,需要 ...

  5. GCC编译过程

    以下是C程序一般的编译过程: gcc的编译流程分为四个步骤,分别为:· 预处理(Pre-Processing) 对C语言进行预处理,生成*.i文件.· 编译(Compiling) 将上一步生成的*.i ...

  6. Linux系统GCC常用命令和GCC编译过程描述

    前言: GCC 原名为 GNU C 语言编译器(GNU C Compiler),因为它原本只能处理 C语言.GCC 很快地扩展,变得可处理 C++.后来又 扩展能够支持更多编程语言,如Fortran. ...

  7. Hadoop源码编译过程

    一.           为什么要编译Hadoop源码 Hadoop是使用Java语言开发的,但是有一些需求和操作并不适合使用java,所以就引入了本地库(Native Libraries)的概念,通 ...

  8. gcc编译过程简述

    在linux系统上,从源文件到目标文件的转化是由编译器完成的.以hello.c程序的编译为例,如下: dfcao@linux: gcc -o hello hello.c 在这里,gcc编译器读取源文件 ...

  9. android 编译过程

    引用:http://www.cnblogs.com/devinzhang/archive/2011/12/20/2294686.html http://blog.sina.com.cn/s/blog_ ...

随机推荐

  1. centos7 安装mongodb4.0笔记

    1,添加yum源 vim /etc/yum.repos.d/mongodb-4.0.repo 2,把下面内容加入,并:wq [mongodb-org-4.0] name=MongoDB Reposit ...

  2. centoss7下将命令加开机服务

    https://www.cnblogs.com/hxun/p/11075755.html

  3. java实现整数计算器

    计算器代码 package stack; import java.util.ArrayList; import java.util.List; import java.util.Scanner; im ...

  4. PythonDay16

    第十六章模块 今日内容 自定义模块 time模块 datetime模块 rendom模块 自定义模块 # import 模块 例:import time# 导入的是time模块中所有的内容(变量,函数 ...

  5. Django之AJAX传输JSON数据

    目录 Django之AJAX传输JSON数据 AJAX 中 JSON 数据传输: django响应JSON类型数据: django 响应 JSON 类型数据: Django之AJAX传输JSON数据 ...

  6. [wpf]wpf full screen.

    void window_KeyDown(object sender,KeyEventArgs e) { if(e.Key == Key.F11) { Window.ResizeMode = Resiz ...

  7. [Vue] vue-router-interview

    1.vue-router 怎么重定向页面? 路由中配置 redirect 属性 使用路由的别名来完成重定向 2.vue-router 怎么配置 404 页面? path: '*',放在最后一个 3.切 ...

  8. 剑指offer-2:斐波那契数列

    二.斐波那契数列 题目描述 大家都知道斐波那契数列,现在要求输入一个整数n,请你输出斐波那契数列的第n项(从0开始,第0项为0). n<=39 1.递归法 1). 分析 斐波那契数列的标准公式为 ...

  9. uni-app如何编写底部导航栏

    在pages.json中配置代码如下: { "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocat ...

  10. ABAP中TAB分隔符的使用

    在ABAP开发中,存在很多特殊字符,使用情况也不同,下面及时SAP中的TAB分隔符的使用案例: 46C以下的版本: DATA: gc_result(50) type c. constants: con ...