转载链接:https://www.cnblogs.com/camille666/p/vue_instance_prop_el_template_render.html

一、el,template,render属性优先性
当Vue选项对象中有render渲染函数时,Vue构造函数将直接使用渲染函数渲染DOM树,当选项对象中没有render渲染函数时,Vue构造函数首先通过将template模板编译生成渲染函数,然后再渲染DOM树,而当Vue选项对象中既没有render渲染函数,也没有template模板时,会通过el属性获取挂载元素的outerHTML来作为模板,并编译生成渲染函数。
换言之,在进行DOM树的渲染时,render渲染函数的优先级最高,template次之且需编译成渲染函数,而挂载点el属性对应的元素若存在,则在前两者均不存在时,其outerHTML才会用于编译与渲染。
1、写html文件

<div class="vapp-1">{{ info }}</div>
<div class="vapp-2">{{ info }}</div>
<div class="vapp-3">{{ info }}</div>

2、写js文件

new Vue({
el: '.vapp-1',
data: {
info: '这是通过el属性获取挂载元素的outerHTML方式渲染。'
},
template: '<div>这是template属性模板渲染。</div>',
render: function(h){
return h('div', {}, '这是render属性方式渲染。')
}
}) new Vue({
el: '.vapp-2',
data: {
info: '这是通过el属性获取挂载元素的outerHTML方式渲染。'
},
template: '<div>这是template属性模板渲染。</div>'
}) new Vue({
el: '.vapp-3',
data: {
info: '这是通过el属性获取挂载元素的outerHTML方式渲染。'
}
})

3、查看渲染结果
这是render属性方式渲染。
这是template属性模板渲染。
这是通过el属性获取挂载元素的outerHTML方式渲染。

二、独立构建和运行时构建
Vue.js 1.0,编译器需要依赖浏览器的DOM,所以无法将编译器和运行时分开。因此在Vue.js 1.0分发包中,编译器和运行时是打包在一起,都在浏览器端执行。
Vue.js 2.0,为了支持服务端渲染(server-side rendering),编译器不能依赖浏览器的DOM,所以必须将编译器和运行时分开。于是形成了独立构建(编译器 + 运行时)和运行时构建(仅运行时)。显而易见,运行时构建体积要小于独立构建。

1、模板编译器
模板编译器的职责是将模板字符串编译为纯JavaScript的渲染函数,即将<template>编译成render函数。
2、Vue.js的执行过程
包含编译过程和运行过程,在编译过程,编译器将字符串模板(template)编译为渲染函数(render)
在运行过程,调用渲染函数。
3、运行时构建
运行时构建指不能进行模板编译的Vue库。运行时构建不包含模板编译器,即不支持template选项,如果使用vue-loader和vueify预编译模板,只需要打包运行时,而不需要打包编译器。
运行时构建,可以用render选项,但它只在单文件组件中起作用,因为单文件组件的模板是在构建时预编译到render函数中,运行时构建只有独立构建大小的30%,只有16Kb min+gzip大小。

// 不需要编译器
new Vue({
render (h) {
return h('div', this.hello)
}
})

4、独立构建
独立构建指能够将template模板或者从el挂载元素提取的模板编译成渲染函数的Vue库,独立构建包含模板编译器,可以用template选项实时编译模板。

// 需要编译器
new Vue({
template: '<div>{{ hello }}</div>'
})

使用vue-cli生成项目时,会提醒使用哪种构建方式,npm包默认导出的是运行时构建,即runtime版本vue.runtime.common.js,如果想使用独立构建,需要在webpack.config.js中配置alias。

resolve: {
alias: {
vue: 'vue/dist/vue.js'
}
}

vue实例属性之el,template,render--(转载)的更多相关文章

  1. vue实例属性之el,template,render

    一.el,template,render属性优先性当Vue选项对象中有render渲染函数时,Vue构造函数将直接使用渲染函数渲染DOM树,当选项对象中没有render渲染函数时,Vue构造函数首先通 ...

  2. Vue实例属性/方法/生命周期

    一 实例属性 var app = new Vue(); app.$el ===>返回当前挂在DOM对象. app.$data ===>返回当前实例data里面的数据 app.$option ...

  3. vue实例属性(vm.$els)

    不需要表达式 参数: id(必需) 用法: 为 DOM 元素注册一个索引,方便通过所属实例的 $els 访问这个元素. 注意: 因为 HTML 不区分大小写,camelCase 名字比如 v-el:s ...

  4. es6下 vue实例属性template不能使用

    esm模式下 不能使用template,需要引入非esm的vue.js,查看vue源码的包的dist目录下 文件标有esm是支持ems,没有标记,就是不支持(这个知识,怎么说了,应该属于webpack ...

  5. vue实例属性之methods和computed

    我们可以把同一函数放在methods或者computed中,区别在于computed有缓存,计算属性只有在它的相关依赖发生改变时才会重新求值,即数据改变才会执行函数.而methods每当触发重新渲染时 ...

  6. vue实例属性的方法

    1.$mount()   手动设置挂载点  eg:vm.$mount("#app") 2.$destroy()  销毁   eg:vm.$destroy(); 3.$forceUp ...

  7. Vue基础进阶 之 常用的实例属性

    Vue实例属性: vue实例直接调用的属性: 常用的实例属性: vm.$data:获取属性: vm.$el:获取实例挂载的元素: vm.$options:获取自定义选项/属性: vm.$refs:获取 ...

  8. Vue.js之Vue计算属性、侦听器、样式绑定

    前言 上一篇介绍了Vue的基本概念,这一篇介绍一下Vue的基本使用. 一.搭建一个Vue程序 1.1 搭建Vue环境 搭建Vue的开发环境总共有三种方法: 引入CDN <script src=& ...

  9. Vue学习之vue实例中的数据、事件和方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. HTML(一):语法结构

    HTML语法规范 基本语法概述 HTML标签是由尖括号包围的关键词,例如<html>. 2HTML标签通常是成对出现的,例如<html>和</html> ,我们称为 ...

  2. Java中获取类的运行时结构

    获取运行时类的完整结构 通过反射获取运行时类的完整结构 Field(属性).Method(方法).Constructor(构造器).Superclass(父类).Interface(接口).Annot ...

  3. Typescript进阶之路

    TypeScript 何为TypeScript 一.编程语言类型 动态类型语言(Dynamically Typed Language) 类型的检查是在运行时才做 例子---JavaScript.Rub ...

  4. Spring Cloud Gateway 扩展支持动态限流

    之前分享过 一篇 <Spring Cloud Gateway 原生的接口限流该怎么玩>, 核心是依赖Spring Cloud Gateway 默认提供的限流过滤器来实现 原生Request ...

  5. RE.从单链表开始的数据结构生活(bushi

    单链表 单链表中节点的定义 typedef struct LNode{ int data;//数据域 struct LNode *next;//定义一个同类型的指针,指向该节点的后继节点 }LNode ...

  6. 「HTML+CSS」--自定义加载动画【017】

    前言 Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 哈哈 自我介绍一下 昵称:海轰 标签:程序猿一只|C++选手|学生 简介:因C语言结识编程,随后转入计算机 ...

  7. Palindromes UVA - 401

    ​ A regular palindrome is a string of numbers or letters that is the same forward as backward. For e ...

  8. 集群,lvs负载均衡的四种工作模式

    集群 集群的三种分类以及用途 负载均衡: 分配流量(调度器),提升速度 高可用: 关键性业务 高性能: 开发算法,天气预报,国家安全 负载均衡的集群 lvs(适用于大规模) haproxy(适用于中型 ...

  9. 漫画 | 公司测试因提Bug不规范,锒铛入狱~

    互联网人罪状系列 1.上班第一天,前端把后端告上县衙,还列了 5 宗罪 2. 程序员状告产品经理八大罪状 (上) 3.程序员状告产品经理八大罪状(下) 开发人员与测试人员的关系,就如同程序员与产品经理 ...

  10. tp5 composer phpexcel使用方法

    1.compser 安装phpexcel.在windows命令行下输入:进入网站根目录,compser phpoffice/phpexcel 2.页面引入两个类: use PHPExcel_IOFac ...