vue实例属性之el，template，render

绝地灬酷狼 2021-10-13 02:41 352阅读 0赞

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

**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'
      }
    }