第17集丨Vue中的render函数

目录

一、脚手架中不能使用template配置

javascript 复制代码
// 引入vue
import Vue from 'vue'
import App from './App'

new Vue({
    el:'#app',
    template:'<h1>hhh</h1>',
    comments:{
        App
    },
    
})

上面案例中,配置了template属性,就会报错,如下图所示:

从上图的错误中,我们知道,处理方式有两种

  • 一种,使用带有模板编译器的vue
  • 第二种,使用render

因为Vue默认引用的是:dist/vue.runtime.esm.js

二、基本使用

render函数里没有用到this,所以可以简写为箭头函数,只有一个参数可以省略小括号,函数体中只有一个返回值语句,可以省略花括号{}。因此

javascript 复制代码
render(createElement){
      return createElement('h1','hhh')
  }

可以简写为:

javascript 复制代码
render: createElement => createElement('h1','hhh')

案例如下:

javascript 复制代码
// 引入vue
import Vue from 'vue'
import App from './App'

new Vue({
    el:'#app',
    // template:'<h1>hhh</h1>',
    comments:{
        App
    },
    // 将App组件放入容器中
   render: h => h(App),
})

三、关于不同版本的Vue

  • vue.jsvue.runtime.xxx.js的区别:
    (1). vue.is是完整版的Vue,包含:核心功能+模板解析
    (2). vue.runtime.xxx.js是运行版的Vue,只包含:核心功能,没有模板解析器。
  • 因为vue.runtime.xxx.js没有模板解析器,所以不能使用template配置项,需要使用render函数接收到的createElement函数去指定具体内容。
相关推荐
光影少年10 小时前
angular生态及学习路线
前端·学习·angular.js
記億揺晃着的那天12 小时前
Vue + Element UI 表格自适应高度如何做?
javascript·vue.js·ui
无尽夏_12 小时前
HTML5(前端基础)
前端·html·html5
Jagger_12 小时前
敏捷开发流程-精简版
前端·后端
FIN666812 小时前
昂瑞微冲刺科创板:创新驱动,引领射频芯片国产化新征程
前端·安全·前端框架·信息与通信·芯片
GISer_Jing12 小时前
ByteDance——jy真题
前端·javascript·面试
睡美人的小仙女12713 小时前
浏览器为何屏蔽本地文件路径?
前端
真的想不出名儿13 小时前
Vue 中 props 传递数据的坑
前端·javascript·vue.js
FIN666813 小时前
昂瑞微:深耕射频“芯”赛道以硬核实力冲刺科创板大门
前端·人工智能·科技·前端框架·信息与通信·智能
阳光阴郁大boy13 小时前
星座运势网站技术解析:从零打造现代化Web应用
前端·javascript