vue实例属性之el，template，render

一、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相关推荐

[vue] 说说你对选项el,template,render的理解
[vue] 说说你对选项el,template,render的理解 el: 把当前实例挂载在元素上 template: 实例模版, 可以是.vue中的template, 也可以是template选项, ...
Vue 实例之全局API，实例属性，全局配置，组件进阶
文章目录写在前面 Vue 全局 API Vue.directive Vue.use Vue.extend Vue.set Vue.mixin Vue 实例属性 vm.$props vm.$optio ...
计算属性与监听器、Vue 实例的生命周期
本文是我在学习过程中记录学习的点点滴滴,仅仅为了学完之后巩固一下,日后忘记了也可以方便快速的复习. 计算属性与监听器.Vue 实例的生命周期前言一.计算属性 1.1.计算属性初步理解 1.2.计算 ...
Vue 实例之数据绑定，事件，组件，生命周期！！！
文章目录关于 vue 设计模式的简介 1.Vue实例创建简单 vue 实例 el 唯一根标签: data: methods: computed: watch: filters: 2.Vue 数据绑 ...
Vue01-创建Vue实例以及各选项含义
1.创建Vue实例 Vue实例:通过new关键字实例化Vue({})构造函数 <script>var vm = new Vue({//选项 }); Vue实例配置对象: data:Vue实 ...
Vue 实例生命周期
一.生命周期 Vue 应用都是通过 Vue 实例(ViewModel)完成的,Vue 创建实例需要一系列的初始化动作,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等. ...
Vue2.x源码学习笔记-Vue实例的属性和方法整理
还是先从浏览器直观的感受下实例属性和方法. 实例属性: 对应解释如下: vm._uid // 自增的id vm._isVue // 标示是vue对象,避免被observe vm._renderProx ...
vue-router路由、mixin混入、vue-resource、axios、计算属性watch、moment.js、vuex、vue-cli、数据双向绑定、搭建vue环境、vue实例、配置启动项
路由vue-router介绍: // 1.前端路由核心:锚点值的改变,根据不同的锚点值,渲染指定dom位置的不同数据.// 2.vue中,模板数据不是通过ajax请求的,而是调用函数获取到模板内容// ...
Vue实例的属性及模板渲染
Vue实例的属性及模板渲染 1 概述 2 el:与DOM元素绑定 3 data:定义双向绑定的数据 4 computed:计算属性 5 methods:定义Vue实例的方法 6 Vue中的三种模板 6 ...

vue实例属性之el，template，render

vue实例属性之el，template，render相关推荐

最新文章

热门文章