12-render函数

心已赠人 2023-10-08 18:07 56阅读 0赞

## render函数 ##

### 一、render的作用 ###

非单文件组件时，创建vm的写法：

new Vue({
        
        el: '#root',
        template: `<App></App>`,
        components: {
        App}
    })

但是该写法在脚手架中会报错。因为脚手架默认引入的是个残缺版的vue。

如果要避免报错，有2种解决方案：

1.  引入完整版的vue
2.  或者使用rander

在脚手架中，引入的Vue：

import Vue from 'vue'

实际引入的是`dist/vue.runtime.esm.js`，是一个不含模板解析器的js。

引入的js是配置在`vue`模块`package.json`的`module`配置项中。

如果要引入完整版的vue：

// 引入完整版的vue
    import Vue from 'vue/dist/vue.js'

这时就可以正常的在`new Vue`中使用`template`配置。

如果使用了残缺版的vue，就需要使用`render`替换`template`配置。

例如：

template: `<h1>Hello</h2>`

替换为：

render(createElement) {
        
        return createElement('h1', 'Hello')
    }

因为`render`没有用`this`，就可以简写为：

render:h => h('h1', 'Hello')

如果模板中的内容不是html标签，而是引入的组件，就可以写为：

render: h => h(App)

### 二、Vue库文件 ###

vue组价的`dist`下有很多vue库文件：

其中`vue.js`是最完整最原始的vue，包括了Vue的核心功能和模板解析；

`vue.runtime.xxxx.js`是运行时库，里面移除了模板解析功能。

`xxxx.esm.js`是使用ES6进行模块化的库（ES6 Module）

`xxxx.common.js`使用CommonJS进行模块化的库

因为`vue.runtime.xxx.js`没有模板解析器，所以不能使用`template`配置项，需要使用render函数接收到的createElement函数去指定具体内容。

对于`.vue`后缀的组件文件中使用标签配置的模板：

<template>
    	{
        {
        msg}}
    </template>

vue通过在`package.json`引入了`vue-template-compiler`来进行解析

**先赞后看，养成习惯！！！^ \_ ^ ❤️ ❤️ ❤️  
码字不易，大家的支持就是我的坚持下去的动力。点赞后不要忘了关注我哦！**

发表评论取消回复

表情：

评论列表（有 0 条评论，56人围观）

还没有评论，来说两句吧...

相关阅读

相关 12-render函数

render函数一、render的作用非单文件组件时，创建vm的写法： new Vue({ el: 'root',

心已赠人/ 2023年10月08日 18:07/ 0 赞/ 57 阅读

相关 vue render函数怎样使用

一般来说，vue提供了template，让我们写页面的时候非常方便 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text

痛定思痛。/ 2023年06月16日 10:41/ 0 赞/ 30 阅读

相关 vue 的 render 函数

import Vue from 'vue' import App from './App.vue' import store from "@/store

左手的ㄟ右手/ 2022年12月25日 11:50/ 0 赞/ 138 阅读

相关 VUE_render渲染函数基础使用，使用render函数创建自定义按钮

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

妖狐艹你老母/ 2022年11月04日 00:51/ 0 赞/ 372 阅读

相关 js render 函数

render() 渲染 /'rendə/ <div id="example"></div> 在此 div 中的所有内容都将由 React DOM 来管理，所

旧城等待，/ 2022年05月13日 04:18/ 0 赞/ 265 阅读

相关 render 函数初识

这是最初看到render函数的样子，完全不明白这是怎么回事，于是乎各种查资料，使用场景：web前端界面头布局中，可以重复使用来接收每一个级别的标题标签，在标题标签中添加

╰+攻爆jí腚メ/ 2022年04月01日 08:12/ 0 赞/ 247 阅读

相关 Render渲染函数-深入应用

渲染函数是vue中的一个非常重要的功能。基本在个性化的展示上都会使用到。所以需要对其有较为深入的理解才行。之前写过一篇关于渲染的，算是基础。在随后的使用过程中，发现还需要更

雨点打透心脏的1/2处/ 2021年10月15日 12:21/ 0 赞/ 376 阅读

相关 iview render函数常用总结（vue render函数）

iview 的render函数就是vue的render函数 iview常用在表格里面自定义内容 render函数常用的配置 h就是createdElement的简写

今天药忘吃喽~/ 2021年09月19日 00:30/ 0 赞/ 553 阅读

相关 Vue的render函数

回忆Vue的一些基本概念今天我们学习的目的是了解和学习Vue的`render`函数。如果想要更好的学习Vue的`render`函数相关的知识，我们有必要重温一下Vue中

冷不防/ 2021年09月07日 06:21/ 0 赞/ 412 阅读

相关 iview,用render函数渲染

<Table border :columns="discountColumns" :data="discountData.rows"></Table> disc...

红太狼/ 2021年05月02日 14:47/ 0 赞/ 568 阅读