第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函数去指定具体内容。
相关推荐
前端小巷子3 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹6 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器13 分钟前
指定阿里镜像原理
前端
枷锁—sha17 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha19 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜35 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
DanB241 小时前
html复习
javascript·microsoft·html
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹1 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss