main.js 中的 render函数

按照之前的单组件文件中的写法,我们的写法应该是这样的

import App from './App.vue'new Vue({el: '#app',templete: `<App></App>`,components: {App},
})

1、定义el根节点。2、注册App组件。3、渲染 templete 模板

但是在脚手架工程中,他是这样的

import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = falsenew Vue({render: h => h(App),
}).$mount('#app')

其他的都没啥问题,之前的文章中都有讲过,但是这个render函数是用来干啥的?

为了解析这个 render 我们一步一步来,如果说我们在脚手架中,使用之前的单组件文件中的写法,

import Vue from 'vue'
import App from './App.vue'new Vue({el: '#app',templete: `<App></App>`,components: {App},
})

这么一看应该是没啥问题的对吧,毕竟要素都有了,那我们运行工程试试看。

哦豁,页面一片空白,控制台报错了

这个报错翻译过来就是:您正在使用Vue的仅运行时构建,其中模板编译器不可用。要么将模板预编译为呈现函数,要么使用包含编译器的构建。

说成大白话就是,我们现在使用的 Vue 是阉割版的,不包含模板编译器,这是因为 vue-cli 在搭建项目的时候,用的就是不带编译模板的Vue.js。后面也给了解决方案,要么使用完整版的带解析器的Vue,要么使用 render 函数来编译模板

那如果简单解释一下就是: render 这个函数的作用就是 用来编译模板的。

render的作用

我们现在 main.js 中看看 引入的Vue到底是个啥文件。在报错信息后面有个文件名称,发现是

vue.runtime.esm.js 文件,代表的就是仅运行时的Vue文件

 如果想验证一下的话,找到这个文件,在最前面 加一个 console.log ,

然后重启项目在页面上看看效果

说明确实是使用的这个Vue文件,至于报错啥的就暂时先别管,后面再说。

我们按照上面的解决办法一个个试试。

1、引入一个完整版的Vue.js 。

在同一个目录下,找到 Vue.js 这个就是最完整的 Vue,包含了Vue 的所有功能。将main.js中的Vue文件替换

import Vue from "vue/dist/vue.js";

重启项目看看效果

发现在更换完整版的 Vue.js 之后,报错不存在了,这就验证了第一个解决办法

2、使用 render 函数来解析模板

main.js 中的 render 是一个函数,而且写的很精简,完全看不懂,我们把它仔细分析一下看看

new Vue({render() {console.log("render");return null},
}).$mount("#app");

首先,我们看这个函数调用没有,调用了就 console 一下。此时你会发现,render 函数报错了,页面上也报错了,这是因为 render 函数需要有一个返回值。我们加上一个 return null 就会发现 页面展示正常

然后,在初始的 render 函数中 是存在一个参数的,简写的是 h,但是在文档中写的是 createElement ,顾名思义也能够大概理解这个参数的作用是个啥。但是我们还是看看这个参数到底是个啥

createElement 是一个函数,且这个函数存在四个参数,这个函数同样返回了 一个 函数,我们暂时就不纠结 返回的 createElement$1 函数 是个啥了,可以去看看官方文档 createElement-参数

 我们通过render函数来渲染一个h1标签,标签内容是你好

new Vue({render(createElement) {return createElement('h1','你好');},
}).$mount("#app");

 那如果我们直接渲染App组件会是什么情况呢?

new Vue({render(createElement) {return createElement(App);},
}).$mount("#app");

既然可以渲染成功,那么我们把render函数精简一下,写成箭头函数,参数用任意字母代替,那是不是就和初始的render函数基本一致了?

至于为啥 脚手架会引入一个 运行时的 Vue 而不是 使用一个完整版的Vue,这是因为,当我们开发完毕之后,通过webpack打包之后,生成的都是可以直接让浏览器识别的 html、js、css文件,不需要 模板编译器这玩意,在打包的时候也可以节省一点 Vue 包的体积。

总结

Vue.js 与 Vue.runtime.esm.js 的区别

        (1)、Vue.js 是完整版,包括 Vue核心功能 + Vue 模板编译器

        (2)、Vue.runtime.esm.js 是仅运行时版本,只包括 Vue 核心功能,不包括 Vue 模板编译器

因为 Vue.runtime.esm.js 不包含模板编译器,所以在main.js 的 new Vue 中,不能使用 templete 配置项,只能使用 render 函数 接收到的 createElement 函数 来指定需要编译的具体内容

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/146219.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java 之拼图小游戏

声明 此项目为java基础的阶段项目,此项目涉及了基础语法,面向对象等知识,具体像语法基础如判断,循环,数组,字符串,集合等…; 面向对象如封装,继承,多态,抽象类,接口,内部类等等…都有涉及。此项目涉及的内容比较多,作为初学者可以很好的将前面的知识串起来。此项目拿来练手以及…

汇总区间问题

给定一个 无重复元素 的 有序 整数数组 nums 。 返回 恰好覆盖数组中所有数字 的 最小有序 区间范围列表 。也就是说&#xff0c;nums 的每个元素都恰好被某个区间范围所覆盖&#xff0c;并且不存在属于某个范围但不属于 nums 的数字 x 。 列表中的每个区间范围 [a,b] 应该按…

飞书开发学习笔记(七)-添加机器人及发送webhook消息

飞书开发学习笔记(七)-添加机器人及发送webhook消息 一.添加飞书机器人 1.1 添加飞书机器人过程 在群的右上角点击折叠按键…选择 设置 群机器人中选择 添加机器人 选择自定义机器人&#xff0c;通过webhook发送消息 弹出的信息中有webhook地址&#xff0c;选择复制。 安…

电子学会C/C++编程等级考试2021年09月(一级)真题解析

C/C++等级考试(1~8级)全部真题・点这里 第1题:数字判断 输入一个字符,如何输入的字符是数字,输出yes,否则输出no 输入 一个字符 输出 如何输入的字符是数字,输出yes,否则输出no 样例1输入 样例1输入 5样例1输出 yes样例2输入 A 样例2输出 …

MySQL中全文索引和普通索引的区别

MySQL中的全文索引&#xff08;Full-Text Index&#xff09;和普通索引&#xff08;比如B-Tree索引&#xff09;是为了提高查询效率而设计的&#xff0c;但它们适用于不同的场景和查询类型。 普通索引&#xff08;如B-Tree索引&#xff09; 适用场景&#xff1a;普通索引适用于…

Ubuntu搭建FTP服务

在Ubuntu上配置FTP服务通常使用vsftpd&#xff08;Very Secure FTP Daemon&#xff09;是一种常见的选择。以下是在Ubuntu上配置vsftpd的基本步骤&#xff1a; 步骤 1&#xff1a;安装vsftpd 打开终端&#xff0c;并运行以下命令以安装vsftpd&#xff1a; sudo apt-get upda…

【算法】算法题-20231118

这里写目录标题 一、16.17. 连续数列二、合并两个有序数组&#xff08;力扣88&#xff09;三、存在重复元素&#xff08;217&#xff09;四、有效的字母异位词&#xff08;242&#xff09; 一、16.17. 连续数列 简单 给定一个整数数组&#xff0c;找出总和最大的连续数列&…

golang学习笔记——编写 FizzBuzz 程序

编写 FizzBuzz 程序 首先&#xff0c;编写一个用于输出数字&#xff08;1 到 100&#xff09;的程序&#xff0c;其中有以下变化&#xff1a; 如果数字可被 3 整除&#xff0c;则输出 Fizz。 如果数字可被 5 整除&#xff0c;则输出 Buzz。 如果数字可同时被 3 和 5 整除&…

暖阳脚本_ 定制企业软件开发的4个趋势:AI、RPA、云应用、边缘计算

根据 Statista 的统计数据显示&#xff0c;企业级软件市场在全球范围内占据了领先地位&#xff0c;预测到2028年&#xff0c;市场规模将接近3760亿美元。企业应用软件市场的稳健增长&#xff0c;甚至在经济不景气的时候也能持续&#xff0c;这充分表明软件解决方案对于提升企业…

Git新建分支

修改代码之Git策略思考&#xff1a; 有三种办法&#xff1a; 需要在主分支上新建一个分支&#xff0c;不合并新建版本。其实也是先新建一个分支&#xff0c;然后合并到主分支&#xff0c;再删除分支。直接新建远程仓库。 考虑&#xff0c;3&#xff09;最浪费&#xff0c;其…

直接插入排序

一.介绍. 其基本思想为数据元素被已经放入一个已经排好的有序数组中&#xff0c;现插入一个元素进入该数组&#xff0c;按顺序&#xff08;即大小关系&#xff09;放进适当位置&#xff0c;并且其后面的元素都向后移动移位。 如图&#xff1a; 对于上述问题&#xff1a; 代码…

【Java】ExcelWriter自适应宽度工具类(支持中文)

工具类 import org.apache.poi.ss.usermodel.Cell; import org.apache.poi.ss.usermodel.CellType; import org.apache.poi.ss.usermodel.Row; import org.apache.poi.ss.usermodel.Sheet;/*** Excel工具类** author xiaoming* date 2023/11/17 10:40*/ public class ExcelUti…

云计算的发展趋势

云计算的发展一直是一个极具活力和创新的领域。随着技术的不断进步和应用场景的拓展&#xff0c;云计算将在未来继续发挥重要作用。以下是云计算发展的一些趋势&#xff1a; 边缘计算的崛起&#xff1a; 随着物联网设备的普及和应用场景的增多&#xff0c;边缘计算成为一个重要…

在Linux系统上检测GPU显存和使用情况

在Linux系统上&#xff0c;你可以使用一些命令行工具来检测GPU显存和使用情况。以下是一些常用的方法&#xff1a; 1. 使用nvidia-smi&#xff08;仅适用于NVIDIA GPU&#xff09; 如果你使用的是NVIDIA的显卡&#xff0c;你可以使用nvidia-smi命令来获取显卡信息&#xff0c…

【Spring】使用三方包进行数据源对象(数据库)管理

在这里使用alibaba的druid来连接数据库&#xff0c;然后再Spring Config下配置数据库 目录 第一步&#xff1a;在pom.xml中导入坐标第二步&#xff1a;在bean中配置连接注 第一步&#xff1a;在pom.xml中导入坐标 在dependencies下写&#xff1a; <dependency><grou…

C#WPF属性触发器实例

本文讲解C#WPF属性触发器的实例 在属性触发器中,当一个属性发生更改时,它将立即或动画更改另一个属性 实例 <Windowx:Class="TriggerDemo.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://sch…

汇编-间接寻址(处理数组)

直接寻址很少用于数组处理&#xff0c;因为用常数偏移量来寻址多个数组元素时&#xff0c;直接寻址并不实用。取而代之的是使用寄存器作为指针(称为间接寻址(indirect addressing) ) 并控制该寄存器的值。如果一个操作数使用的是间接寻址&#xff0c; 就称之为间接操作数(indie…

Android 9.0 屏蔽设备的定位功能

Android 9.0 屏蔽设备的定位功能 最近收到客户需求想要屏蔽设备的定位功能&#xff0c;具体修改参照如下&#xff1a; /vendor/mediatek/proprietary/packages/apps/MtkSettings/res/xml/security_dashboard_settings.xml - <Preference<!--Preferenceandroid:…

GB28181学习(十六)——基于jrtplib实现tcp被动和主动收流

前言 GB/T28181-2022实时流的传输方式介绍&#xff1a;https://blog.csdn.net/www_dong/article/details/134255185 tcp passive收流 流程图 注意&#xff1a; m字段指定传输方式为TCP/RTP/AVP&#xff1b;sdp信息中增加"asetup:passive"&#xff1b;SIP服务器启…

AWS实战(一)-创建S3 存储桶

1&#xff09;登录AWS账号&#xff0c;选择服务—>存储—>S3。 2&#xff09;查看存储桶列表 3&#xff09;点击"创建存储桶"创建bucket。 4&#xff09;设置跨域 点击编辑&#xff0c;修改跨域设置即可。