Vue实例属性之el,template,render

2人阅读 评论(0) 收藏 举报
分类:

原帖: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 基本概念

有人在学习 Vue 过程中遇到一个奇怪的问题,并为之迷惑不已——为什么这么简单的一个项目都会出错。 这是一个简单到几乎不能再简单的 Vue 项目,在 index.html 的 body 中有一个 i...
  • csdn_yudong
  • csdn_yudong
  • 2017-03-01 16:02:30
  • 14138

Failed to mount component: template or render function not defined. 错误的解决方法

Vue.js 2 遇到 vue.runtime.common.js?d43f:511 [Vue warn]: Failed to mount component: template or render...
  • zhangchao19890805
  • zhangchao19890805
  • 2016-11-27 23:18:01
  • 15524

Vue中render方法的使用

先说一下对官网上demo的个人理解: Vue的render方法说明 hello world ...
  • yangyiboshigou
  • yangyiboshigou
  • 2017-07-05 17:23:27
  • 9051

vue的指令实例属性

所有的钩子函数将被复制到实际的指令对象中,钩子内 this 指向这个指令对象。这个对象暴露了一些有用的属性:   el: 指令绑定的元素。   vm: 拥有该指令的上下文 ViewMode...
  • Vanhukseter
  • Vanhukseter
  • 2016-10-03 20:18:28
  • 2646

Vue2+Webpack报错:Failed to mount component: template or render function not defined.

需要在webpack.config.js文件中添加以下配置: resolve: { /** * Vue v2.x之后NPM Package默认设置只会生成runti...
  • guoquanyou
  • guoquanyou
  • 2017-02-22 09:40:12
  • 10696

vue + webpack 起手式

介紹https://segmentfault.com/a/1190000005363030 2016-10-04 更新為使用 Vue.js 2.x 前端的世界變化之快速,從 2010 ...
  • sinat_17775997
  • sinat_17775997
  • 2016-10-07 20:29:32
  • 5972

VUE—简单认识

写在头头儿     知道vue的存在是刚刚出来工作时候,第一眼看到“哇”好巧哦,跟在家用的angular一样,上来就用超级开心的! 公司为什么选vue呢?先做个简单的对比吧!     ang...
  • aiTCR
  • aiTCR
  • 2017-12-24 21:35:42
  • 376

vuejs 学习(一)

1.安装vue.js// 全局安装 vue-cli $ npm install --global vue-cli // 创建一个基于 webpack 模板的新项目 $ vue init webpack...
  • a1943206465
  • a1943206465
  • 2017-03-01 13:19:56
  • 3256

VUE快速入门心得——render函数

近期公司工作较忙,更新一直上不来,望大家见谅。不废话,今天我们来看一下,vue的render函数。 很多朋友对于长篇大论看不下去,有的呢是有接触过这些,所以我们今天吧总结写在前边。需要的朋友可以往...
  • baidu_38492440
  • baidu_38492440
  • 2017-07-30 21:57:44
  • 4435

vue Render:h=>h(App) 解析

在学习Element-ui组件时,对组件的引入需要在main.js中写入如下代码: import Vue from 'vue' import ElementUI from 'element-ui' ...
  • knqiufan
  • knqiufan
  • 2018-02-06 09:48:36
  • 382
    个人资料
    持之以恒
    等级:
    访问量: 5万+
    积分: 1367
    排名: 3万+
    最新评论