关于Vue脚手架中render 理解

2024-11-29 15:31:43

在vue的脚手架中，我们会看到在入口文件 main.js中的 new Vue的代码中有一段代码 render：h=>h(App);

这段代码不像我们一般的使用vue 时的代码
我写一下一般的Vue 代码

	import Acomponent from "../Acomponent"
	vm = new Vue({
		el:"#app"
		data(){
			return {
				a:"aaa",
				b:"bbb"
			}
		},
		template:`<div>
			<span>this is a test</span>
			<Acomponent></Acomponent>
		</div>`,
		components:{
			Acomponent
		}
	})

上面的代码是我们正常能懂的代码，有template , 在template中可以引入其它的组件，但为什么脚手架中却给了一个 render 的方法呢

根据自已的想法，我们可以把脚手架的代码更改一下看看

启动脚手架， npm run serve 看一下结果，报错了，信息如下

所以，我们可以说，脚手架给我们引入的 vue 是没有模板解析器的一个vue , 如果要解析模板，就要使用 render 函数的帮助
我们来到项目的 node_modules 文件夹中看一下我们引入的到底是哪一个 vue

import Vue from 'vue'

我们打开 vue / dist 的文件，可以看到很多的文件，如图

错误提示上说我们有两种方法解决，一种是引入完整的vue.js 另一种是使用 render ,
我们来引入完整版的来看一下，可不可以解决

我们再看第二种，引入没有模板解析器的vue, 使用 render,
先说一个 render
render 是一个函数，并且有一个参数，这个参数的使用就是创建一个节点

通过console.log，我们可以看到参数 createElement 也是一个函数，它创建了一个 VNode 的对象

下面我们使用箭头函数来对 render 来进行精简

	render(createElement){
		return createElement("h1","123");
	}
	//使用箭头函数简化
	render:(createElement)=>{return createElement("h1","123")}
	//箭头函数中 只有一个参数， 可以不写 小括号   如果方法体中只有一行， 可以不用写 大括号， 返回值也可以不用写return
	//所以上面的代码可以简化成这样
	render:createElemnet=>crementElement("h1","123")
	//同样， createElement 本来就是自已自定义的， 我们可以把名称也改一下
	render: h=>h("h1","123")
	//这样就很像脚手架中的代码了
	h函数中， 如果是原生的html 标签的话， 就是这样写， 如果是vue 的组件的话， 可以直接传入
	所有就有了
	render:h=>h(App)

render 的写法就是这样来的

下面说一下，为什么脚手架会引入一个不完整的vue来使用
我们知道， vue代码完成之后是要打包的，其中少不了vue的核心代码，当我们打包好之后，我们其实是不需要再来解析模板的，那么， vue的核心代码中的模板解析器根本用不着，所以，vue为了使代码的体积减少，就去掉了模板解析器，但是我们开发的时候，又要使用，所以就创建了一个 render 方法来解析模板，
总之，它的目的就是让打包后的代码体积尽量小

到此这篇关于Vue脚手架中的 render 理解的文章就介绍到这了,更多相关Vue render 理解内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

浅谈Vue中render中的h箭头函数

vue2.0新增了render方法,官方案例写的是: render: h=>h(app) 其中h是由createElement方法演变而来 render: function(createElement){ return createElement(app) } 用es6的写法就是:(只有一个个return语句,可以省略return和{}) render: createElement=>createElement(app) 将createElement改成 h 就是官方写法. 使用 h 的理由,
详解vue 动态加载并注册组件且通过 render动态创建该组件

基于 iview Tabs 组件实现功能:为每个 tab 动态创建不同的.特定的组件内容,而不需要大量的 import 组件并进行 component 注册 Index.vue <template> <div class="content-left-menu"> <div class="item-contain layout-content"> <Tabs class="cmcc-ivu-tab2" t
何时/使用 Vue3 render 函数的教程详解

什么是 DOM? 如果我们把这个 HTML 加载到浏览器中,浏览器创建这些节点,用来显示网页.所以这个HTML映射到一系列DOM节点,然后我们可以使用JavaScript进行操作.例如: let item = document.getElementByTagName('h1')[0] item.textContent = "New Heading" VDOM 网页可以有很多DOM节点,这意味着DOM树可以有数千个节点.这就是为什么我们有像Vue这样的框架,帮我们干这些重活儿,并进行大量
vue 中的 render 函数作用详解

render 函数作用 vue渲染函数文档第一遍看的晕晕乎乎的,再看看写写终于清晰了.建议配合文档阅读,本文也是根据文档加上自己的理解. 注:本文代码都是在单文件组件中编写.代码地址 render 函数作用 render 函数跟 template 一样都是创建 html 模板的,但是有些场景中用 template 实现起来代码冗长繁琐而且有大量重复,这时候就可以用 render 函数. 官网例子:子组件想要根据父组件传递的 level 值(1-6)来决定渲染标签 h 几.具体代码可以看文档.
vue渲染方式render和template的区别

render函数详解 Vue中的Render函数中有一个参数,这个参数是一个函数通常我们叫做h.其实这个h叫做createElement.Render函数将createElement的返回值放到了HTML中 createElement这个函数中有3个参数第一个参数(必要参数):主要用于提供DOM的html内容,类型可以是字符串.对象或函数第二个参数(类型是对象,可选):用于设置这个DOM的一些样式.属性.传的组件的参数.绑定事件之类第三个参数(类型是数组,数组元素类型是VNode,可选):
关于Vue脚手架中render 理解

在vue的脚手架中, 我们会看到在入口文件 main.js中的 new Vue的代码中有一段代码 render:h=>h(App); 这段代码不像我们一般的使用vue 时的代码我写一下一般的Vue 代码 import Acomponent from "../Acomponent" vm = new Vue({ el:"#app" data(){ return { a:"aaa", b:"bbb" } }, temp
jquery在vue脚手架中的使用方式示例

本文介绍了jquery在vue脚手架中的使用方式示例,分享给大家,具体如下: 1:在各个vue文件中使用 <script> import '../assets/js/jquery-1.10.2.min.js' export default { data() { return { }, watch: { }, created: function() { }, methods: { list() { this.$router.push({ path: 'list' }); }, }, } $(do
vue脚手架中配置Sass的方法

世界上最成熟.最稳定.最强大的专业级CSS扩展语言! 兼容CSS Sass完全兼容所有版本的CSS.我们对此严格把控,所以你可以无缝地使用任何可用的CSS库. 特性丰富 Sass拥有比其他任何CSS扩展语言更多的功能和特性.Sass核心团队不懈努力,一直使其保持领先地位. 成熟 Sass已经经过其核心团队超过8年的精心打造. 行业认可一次又一次地,行业把Sass作为首选CSS扩展语言. 社区庞大数家科技企业和成百上千名开发者为Sass提供支持. 框架有无数的框架使用Sass构建.比如Com
Vue脚手架的简单使用实例

提前申明注意:自己对vue脚手架的理解和认识,很多东西和理解都是形象上的手法,并不专业和官方 webpack 一种项目构建工具,可以将css和js压缩成一个文件.此外,可以提供测试用服务器.使用webpack时,可以配置一些默认扩展名和路径别名来在项目文件里直接使用导入和导出使用export命令可以将一个JS对象导出,其他JS文件可以使用import 对象名 from 路径的形式导入这个对象来使用,但是在导入时,必须知道导入导出对象的名字.如果使用export default命令导出
Vue中render函数的使用方法

render函数 vue通过 template 来创建你的 HTML.但是,在特殊情况下,这种写死的模式无法满足需求,必须需要js的编程能力.此时,需要用render来创建HTML. 什么情况下适合使用render函数在一次封装一套通用按钮组件的工作中,按钮有四个样式(default success error ).首先,你可能会想到如下实现 <div v-if="type === 'success'">success</div> <div v-else
Vue中render方法的使用详解

先说一下对官网上demo的个人理解: <!DOCTYPE html> <html> <head> <title>Vue的render方法说明</title> <script src="vue.js"></script> </head> <body> <div id="app"> <child :level="1">
对vue.js中this.$emit的深入理解

对于vue.js中的this.emit的理解:this.emit('increment1',"这个位子是可以加参数的"):其实它的作用就是触发自定义函数. 看例子: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script src="vue.js"
vue中render函数的使用详解

render函数 vue通过 template 来创建你的 HTML.但是,在特殊情况下,这种写死的模式无法满足需求,必须需要js的编程能力.此时,需要用render来创建HTML. render方法的实质就是生成template模板: 通过调用一个方法来生成,而这个方法是通过render方法的参数传递给他的: 通过这三个参数,可以生成一个完整的模板官网实例 //未使用render函数 Vue.component('anchored-heading', { template: '#anchor
浅谈vue中$event理解和框架中在包含默认值外传参

在vue中普通方法中默认带有event DOM事件如greet方法,如果是内联函数的话如warn方法,只需要在定义方法的地方同时传入$event即可,这里需要强调的是在iview中,这里用的是select组件,在其on-change事件中如果想要传入自定义的参数,使用直接传参的方式,获取的是传入的参数,那么如何获取到该方法默认的返回值(即不传参数时返回的默认选中值),这里使用 $event传入代表选中的值,如test方法,这里似乎也只要$event可以传入代表选中的值,其他的可能就是普通的参数,

关于Vue脚手架中render 理解

相关推荐

随机推荐