第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函数去指定具体内容。
相关推荐
Dontla4 分钟前
流行的前端架构与后端架构介绍(Architecture)
前端·架构
muchan9213 分钟前
为什么“它”在业务逻辑上是最简单的?
前端·后端·面试
我是日安14 分钟前
从零到一打造 Vue3 响应式系统 Day 6 - 响应式核心:链表实装应用
前端·vue.js
艾小码14 分钟前
Vue模板进阶:这些隐藏技巧让你的开发效率翻倍!
前端·javascript·vue.js
浩浩kids17 分钟前
Web-birthday
前端
艾小码17 分钟前
还在手动加载全部组件?这招让Vue应用性能飙升200%!
前端·javascript·vue.js
方始终_18 分钟前
做一个图表MCP Server,分分钟的事儿?
前端·agent·mcp
yiyesushu18 分钟前
solidity front-ends(html+js+ethers v6)
前端
白袜队今年挖矿机18 分钟前
Spring事务基础概念
前端
三十_19 分钟前
【实录】多 SDK 日志乱象的解决方案:统一日志 SDK 设计分享
前端·javascript