簡單談一談Vue中render函數(shù)
首先我們引入的vue并不是一個完整的，而是殘缺版的vue(沒有模板解析器)
那如何證明？
翻譯如下：
大概意思是說功能不全，沒有模板解析器。并且提供建議給你：1.使用render函數(shù) 2.引入帶有模板解析器的vue(完整的vue)，那意思就是說vue并沒有引入完整？為什么？
我們就需要去依賴的地方看看到底有沒有完整引入。由于我們在引入的時候，地址直接寫的就是vue，但是vue下還有很多路徑
module的意思就是如果使用的es6的模塊化引入方式，就使用 dist/vue.runtime.esm.js
import的確是es6的引入方式。這里面就是殘缺版的沒有模板解析器的vue。
如何解決？
render(createElement){
這個函數(shù)有返回值，需要return 并且這個參數(shù)createElement是一個函數(shù)，該函數(shù)可創(chuàng)建具體的節(jié)點//
return createElement('span','我是span')
}
那他和正常的默認生成的還是有區(qū)別的，我們先看一下常規(guī)的render函數(shù)
僅僅只是一行render:h=>h(App)
我們可以根據(jù)上方代碼寫成箭頭函數(shù)并簡寫形式(僅有一個參數(shù)去掉括號，return去掉改為一行)
render:createElement => createElement('span','我是span') 接下來將參數(shù)改成h或者任意字母就和上圖相似了
render:h=>h('span','我是span')于是我們發(fā)現(xiàn)這樣就顯示出來了，如下圖↓ ↓ ↓ ↓
那我們?yōu)槭裁床徊捎脠箦e提示中的第二種方式引入完整的vue呢？
vue是由兩部分組成的，
1：vue核心：包含生命周期，處理事件...
2. 模板解析器
如果合在一起，模板解析器體積占總體積的1/3，webpack在進行打包時會生成一個大的文件夾，本身模板解析器是不需要打包的，因為webpack已經(jīng)將.vue文件變成了html,js,css，解析器就不再需要了。
問題來了，為什么我們創(chuàng)建了一個app節(jié)點而且不需要加值就可以顯示出來內(nèi)容呢？
為啥template放在組件里就可以被解析呢？？？這是因為有一個插件所解決的
補充：vue2 小例子
# 父組件
<template>
<div>
<self :render="render"></self>
</div>
</template>
<script>
import self from '@/components/self'
export default {
components:{
self
},
data() {
return {
render:h=>{
return h(
'div',
{class:'red'},
'nihao'
)
}
}
},
}
</script>
<style>
.red {
color: red;
}
</style>
# 子組件
<script>
export default {
name: "SelfText",
props: {
render: {
type: Function,
default() {
return {};
}
}
},
render(h) {
return this.render(h);
}
};
</script>
vue3 小例子
# 父組件
<template>
<div>
<self :render="render"></self>
</div>
</template>
<script>
import self from '@/components/self'
export default {
components:{
self
},
data() {
return {
render:h=>{
return h(
'div',
{class:'red'},
'nihao'
)
}
}
},
}
</script>
<style>
.red {
color: red;
}
</style>
# 子組件
<script>
import { h } from 'vue'
export default {
props: {
render: {
type: Function,
default() {
return {};
}
}
},
render() {
return this.render(h);
}
};
</script>
在vue3中，我們還可以使用setup來返回一個渲染的函數(shù)
<script>
import { h } from 'vue'
export default {
setup() {
return ()=>h(
'div',
{class:'red'},
'nihaonihao'
)
}
}
</script>
<style>
.red {
color: red;
}
</style>
總結：
vue.js和vue.runtime.xxx.js的區(qū)別
（1）vue.js是完整版的Vue。包含：核心功能+模板解析器
（2）vue.runtime.xxx.js是運行版的Vue，只包含核心功能
因為vue.runtime.xxx.js沒有模板解析器，所以不能使用template配置項，需要使用render函數(shù)接收到的createElement函數(shù)去指定具體內(nèi)容
到此這篇關于Vue中render函數(shù)的文章就介紹到這了,更多相關Vue中render函數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
- vue3通過render函數(shù)實現(xiàn)菜單下拉框的示例
- vue中的render函數(shù)、h()函數(shù)、函數(shù)式組件詳解
- Vue render函數(shù)使用詳細講解
- Vue中render函數(shù)調(diào)用時機與執(zhí)行細節(jié)源碼分析
- vue中使用render封裝一個select組件
- Vue 2閱讀理解之initRender與callHook組件詳解
- vue語法之render函數(shù)和jsx的基本使用
- vue3中的render函數(shù)里定義插槽和使用插槽
- VUE3中h()函數(shù)和createVNode()函數(shù)的使用解讀
- Vue.js3.2的vnode部分優(yōu)化升級使用示例詳解
- Vue.js之VNode的使用
- vue中?render?函數(shù)功能與原理分析
相關文章
Vue 2閱讀理解之initRender與callHook組件詳解
這篇文章主要為大家介紹了Vue 2閱讀理解之initRender與callHook組件詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要介紹了Vue計算屬性與偵聽器和過濾器，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-10-10
這篇文章主要為大家詳細介紹了vue3.0實現(xiàn)下拉菜單的封裝代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
vue3+element?plus實現(xiàn)側邊欄過程
這篇文章主要介紹了vue3+element?plus實現(xiàn)側邊欄過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
今天小編就為大家分享一篇vue動態(tài)改變背景圖片demo分享，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vuex數(shù)據(jù)持久化實現(xiàn)的思路與代碼
Vuex數(shù)據(jù)持久化可以很好的解決全局狀態(tài)管理,當刷新后數(shù)據(jù)會消失,這是我們不愿意看到的。這篇文章主要給大家介紹了關于Vuex數(shù)據(jù)持久化實現(xiàn)的思路與代碼，需要的朋友可以參考下2021-05-05
這篇文章主要介紹了Vue實現(xiàn)雙向綁定的方法，了解vue的雙向數(shù)據(jù)綁定原理以及核心代碼模塊，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要為大家詳細介紹了vue實現(xiàn)雙向數(shù)據(jù)綁定，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
這篇文章主要為大家詳細介紹了Vue2中引入使用ElementUI教程的相關知識,文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的可以參考下2024-03-03
如何使用elementUI組件實現(xiàn)表格的分頁及搜索功能
最近在使用element-ui的表格組件時,遇到了搜索框功能的實現(xiàn)問題,這篇文章主要給大家介紹了關于如何使用elementUI組件實現(xiàn)表格的分頁及搜索功能的相關資料,需要的朋友可以參考下2023-03-03