資訊專欄INFORMATION COLUMN
學(xué)習(xí)就是在不斷的總結(jié)，我們今天說的就是匯總在vue中寫jsx的方式。
版本
本文版本配置 vue: 2.7.2 vue-cli: ~4.5.18；本文代碼github倉庫地址
render函數(shù)
render函數(shù)和vue中的template是互斥的，template最終是要編譯成virtual Dom的，但我們要知道render函數(shù)可以更直接構(gòu)建virtual Dom； virtual Dom由樹狀的vnode構(gòu)成，h函數(shù)可以構(gòu)建vnode。
vue templates are compiled into virtual DOM render functions. vue also provides APIs that allow us to skip the template compilation step and directly author render functions
If both render and template are present in a component, render will take higher priority.
假如當(dāng)render和template同時(shí)出現(xiàn)，這時(shí)候render會(huì)有更高的權(quán)限（是不是和vue2中說法不一致）。
其實(shí)更加直接說就是vue3 render函數(shù)
jsx/tsx
jsx類似于h函數(shù)，比較直接使用javascript來構(gòu)建DOM，但我們要知道的是jsx語法需要去編譯處理，有的腳手架可能有預(yù)先配置，有的沒有。
在typescript下需要編寫tsx
使用jsx的幾種方式
使用js對象注冊component
When not using a build step, a Vue component can be >defined as a plain JavaScript object containing >Vue-specific options:
vue組件也可以直接使用普通的js對象來注冊
// 定義一個(gè)js文件，導(dǎo)出組件對象
// componentObject.js
export default {
data() {
return {
msg: 'hello'
}
},
created() {
setTimeout(() => {
this.msg = 'hello world'
}, 1000);
},
render() {
return <h1>{this.msg}</h1>
}
}
<script>
import componentObject from './../components/componentObject.js'
export default {
components: {
jsxComponent
}
};
</script>使用.vue文件
這里如果template和render函數(shù)如果同時(shí)指定的話，會(huì)用template覆蓋掉render,顯然是template優(yōu)先級(jí)更高，跟文檔上的render優(yōu)先級(jí)更高不一樣
// sfcJsx.vue
<!-- <template>
<div>test</div>
</template> -->
<script>
export default {
data() {
return {
msg: 'i am sfc jsx'
}
},
created() {
setTimeout(() => {
this.msg = 'i am sfc jsxxxx'
}, 1000);
},
render() {
return <h1>{this.msg}</h1>
}
}
</script>vue2.7在.vue文件中結(jié)合compositionApi和jsx
目前在setup中return jsx會(huì)報(bào)錯(cuò)，目測是loader沒有支持（有知道解決辦法的老師傅也可以告訴我一下..），只能在setup使用compositionApi再加上render函數(shù)里寫jsx
// sfcJsx.vue
<script>
import { ref } from 'vue';
export default {
setup() {
const count = ref(0);
setTimeout(() => {
count.value = 12
}, 1000);
return {
count
}
},
render(h) {
return (
<h1>{this.count ? <span>11</span>: <span>22</span>}</h1>
)
}
}
</script>在vue中寫jsx的方式已經(jīng)講解完畢，您學(xué)會(huì)了多少？
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/127986.html
摘要：進(jìn)階系列一之響應(yīng)式原理及實(shí)現(xiàn)進(jìn)階系列二之插件原理及實(shí)現(xiàn)進(jìn)階系列三之函數(shù)原理及實(shí)現(xiàn)函數(shù)原理根據(jù)第一篇文章介紹的響應(yīng)式原理，如下圖所示。在初始化階段，本質(zhì)上發(fā)生在函數(shù)中，然后通過函數(shù)生成，根據(jù)生成。負(fù)責(zé)收集依賴，清除依賴和通知依賴。 （關(guān)注福利，關(guān)注本公眾號(hào)回復(fù)[資料]領(lǐng)取優(yōu)質(zhì)前端視頻，包括Vue、React、Node源碼和實(shí)戰(zhàn)、面試指導(dǎo)）showImg(https://segmentfa...
摘要：核心開發(fā)人員大神在開了個(gè)，用來征詢社區(qū)對的建議。而且的工程師并沒有因此止步，他們在文檔中又告訴開發(fā)者，不僅僅要把寫到中，也應(yīng)該寫到中。無論怎么使用自定義語法，也不應(yīng)該影響這種好處，即使最終實(shí)現(xiàn)看起來有一些怪異。 React 核心開發(fā)人員 sebmarkbage 大神在 GitHub 開了個(gè) issues，用來征詢社區(qū)對 JSX 2.0 的建議。 showImg(https://segm...
閱讀 570·2023-03-27 18:33
閱讀 761·2023-03-26 17:27
閱讀 658·2023-03-26 17:14
閱讀 612·2023-03-17 21:13
閱讀 546·2023-03-17 08:28
閱讀 1836·2023-02-27 22:32
閱讀 1330·2023-02-27 22:27
閱讀 2212·2023-01-20 08:28
