欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

關(guān)于Vue腳手架中render 理解

 更新時(shí)間:2021年10月14日 09:30:55   作者:A黃俊輝A  
這篇文章主要介紹了Vue腳手架中的 render 理解,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

在vue的腳手架中, 我們會(huì)看到在入口文件 main.js中的 new Vue的代碼中有一段代碼 render:h=>h(App);

在這里插入圖片描述

這段代碼不像我們 一般的使用vue 時(shí)的代碼
我寫一下 一般的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中可以引入其它的組件, 但為什么腳手架中卻給了一個(gè) render 的方法呢

根據(jù)自已的想法, 我們可以把腳手架的代碼更改一下看看

在這里插入圖片描述

啟動(dòng)腳手架, npm run serve 看一下結(jié)果, 報(bào)錯(cuò)了, 信息如下

在這里插入圖片描述

所以, 我們可以說(shuō) , 腳手架給我們引入的 vue 是沒(méi)有模板解析器的一個(gè)vue , 如果要解析模板, 就要使用 render 函數(shù)的幫助
我們來(lái)到 項(xiàng)目的 node_modules 文件夾中看一下 我們引入的到底是 哪一個(gè) vue

import Vue from 'vue'

在這里插入圖片描述

我們打開 vue / dist 的文件, 可以看到很多的文件, 如圖

在這里插入圖片描述


錯(cuò)誤提示上說(shuō)我們有兩種方法解決, 一種是引入完整的vue.js 另一種是使用 render ,
我們來(lái)引入完整版的來(lái)看一下, 可不可以解決

在這里插入圖片描述

我們?cè)倏吹诙N,引入沒(méi)有模板解析器的vue, 使用 render,
先說(shuō)一個(gè) render
render 是一個(gè)函數(shù), 并且有一個(gè)參數(shù), 這個(gè)參數(shù)的使用就是創(chuàng)建一個(gè) 節(jié)點(diǎn)

在這里插入圖片描述
在這里插入圖片描述

通過(guò)console.log, 我們可以看到 參數(shù) createElement 也是一個(gè)函數(shù), 它創(chuàng)建了一個(gè) VNode 的對(duì)象

在這里插入圖片描述

下面我們使用 箭頭函數(shù)來(lái)對(duì) render 來(lái)進(jìn)行精簡(jiǎn)

	render(createElement){
		return createElement("h1","123");
	}
	//使用箭頭函數(shù)簡(jiǎn)化
	render:(createElement)=>{return createElement("h1","123")}
	//箭頭函數(shù)中 只有一個(gè)參數(shù), 可以不寫 小括號(hào)   如果方法體中只有一行, 可以不用寫 大括號(hào), 返回值也可以不用寫return
	//所以上面的代碼可以簡(jiǎn)化成這樣
	render:createElemnet=>crementElement("h1","123")
	//同樣, createElement 本來(lái)就是自已自定義的, 我們可以把名稱也改一下
	render: h=>h("h1","123")
	//這樣就很像腳手架中的代碼了
	h函數(shù)中, 如果是原生的html 標(biāo)簽的話, 就是這樣寫, 如果是vue 的組件的話, 可以直接傳入
	所有就有了
	render:h=>h(App)

render 的寫法就是這樣來(lái)的

下面說(shuō)一下,為什么 腳手架會(huì)引入一個(gè)不完整的vue來(lái)使用
我們知道, vue代碼完成之后是要打包的, 其中少不了vue的核心代碼,當(dāng)我們打包好之后, 我們其實(shí)是不需要再來(lái)解析模板的, 那么, vue的核心代碼中的模板解析器根本用不著, 所以,vue為了使代碼的體積減少, 就去掉了模板解析器,但是我們開發(fā)的時(shí)候, 又要使用, 所以就創(chuàng)建了一個(gè) render 方法來(lái)解析模板,
總之, 它的目的就是讓打包后的代碼體積盡量小

到此這篇關(guān)于Vue腳手架中的 render 理解的文章就介紹到這了,更多相關(guān)Vue render 理解內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Vue 組件間的樣式?jīng)_突污染

    Vue 組件間的樣式?jīng)_突污染

    本篇文章主要介紹了Vue 組件間的樣式?jīng)_突污染,當(dāng)多個(gè)樣式出現(xiàn)時(shí),就會(huì)導(dǎo)致樣式?jīng)_突,本文介紹了具體解決方法
    2017-08-08
  • vue中插件和組件的區(qū)別點(diǎn)及用法總結(jié)

    vue中插件和組件的區(qū)別點(diǎn)及用法總結(jié)

    在本篇文章里小編給大家分享的是一篇關(guān)于vue中插件和組件的區(qū)別點(diǎn)及用法總結(jié)內(nèi)容,有興趣的的朋友們可以學(xué)習(xí)下。
    2021-12-12
  • vue3+ts+vite2項(xiàng)目實(shí)戰(zhàn)踩坑記錄

    vue3+ts+vite2項(xiàng)目實(shí)戰(zhàn)踩坑記錄

    最近嘗試上手Vue3+TS+Vite,對(duì)比起Vue2有些不適應(yīng),但還是真香,下面這篇文章主要給大家介紹了關(guān)于vue3+ts+vite2項(xiàng)目的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-09-09
  • vue3中的伸縮菜單組件

    vue3中的伸縮菜單組件

    這篇文章主要介紹了vue3中的伸縮菜單組件,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-01-01
  • Vue獲取表單數(shù)據(jù)的多種方式

    Vue獲取表單數(shù)據(jù)的多種方式

    這篇文章主要給大家介紹了關(guān)于Vue獲取表單數(shù)據(jù)的多種方式,在Vue中我們通常使用v-model命令綁定表單的屬性值(通常是value),獲取到的屬性值就是表單數(shù)據(jù),需要的朋友可以參考下
    2023-09-09
  • v-model中如何使用過(guò)濾器

    v-model中如何使用過(guò)濾器

    這篇文章主要介紹了v-model中如何使用過(guò)濾器問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • 一文完全掌握Vue中的$set方法

    一文完全掌握Vue中的$set方法

    這篇文章主要給大家介紹了關(guān)于如何完全掌握Vue中$set方法的相關(guān)資料,vue中$set方法對(duì)數(shù)組和對(duì)象的處理本質(zhì)上的一樣的,對(duì)新增的值添加響應(yīng)然后手動(dòng)觸發(fā)派發(fā)更新,需要的朋友可以參考下
    2023-11-11
  • 10分鐘了解Vue3遞歸組件的用法

    10分鐘了解Vue3遞歸組件的用法

    遞歸?簡(jiǎn)單來(lái)講就是程序自己調(diào)用自身,vue中的遞歸組件就是,組件自身調(diào)用自身,下面這篇文章主要給大家介紹了關(guān)于Vue3遞歸組件的用法,需要的朋友可以參考下
    2022-03-03
  • vue返回上一頁(yè)面時(shí)不刷新問(wèn)題及解決方案

    vue返回上一頁(yè)面時(shí)不刷新問(wèn)題及解決方案

    這篇文章主要介紹了vue返回上一頁(yè)面時(shí)不刷新問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-05-05
  • Vue重要修飾符.sync對(duì)比v-model的區(qū)別及使用詳解

    Vue重要修飾符.sync對(duì)比v-model的區(qū)別及使用詳解

    這篇文章主要為大家介紹了Vue中重要修飾符.sync與v-model的區(qū)別對(duì)比及使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-07-07

最新評(píng)論