匯總在vue中寫jsx的方式

3403771864 發布于2022-10-10 22:08 / 488人閱讀

　　學習就是在不斷的總結，我們今天說的就是匯總在vue中寫jsx的方式。

　　版本

　　本文版本配置 vue: 2.7.2 vue-cli: ~4.5.18；本文代碼github倉庫地址

　　render函數

　　render函數和vue中的template是互斥的，template最終是要編譯成virtual Dom的，但我們要知道render函數可以更直接構建virtual Dom； virtual Dom由樹狀的vnode構成，h函數可以構建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.

　　假如當render和template同時出現，這時候render會有更高的權限（是不是和vue2中說法不一致）。

　　其實更加直接說就是vue3 render函數

　　jsx/tsx

　　jsx類似于h函數，比較直接使用javascript來構建DOM，但我們要知道的是jsx語法需要去編譯處理，有的腳手架可能有預先配置，有的沒有。

　　在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對象來注冊

　　　// 定義一個js文件，導出組件對象
　　// 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函數如果同時指定的話，會用template覆蓋掉render,顯然是template優先級更高，跟文檔上的render優先級更高不一樣

　　// 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文件中結合compositionApi和jsx

　　目前在setup中return jsx會報錯，目測是loader沒有支持（有知道解決辦法的老師傅也可以告訴我一下..），只能在setup使用compositionApi再加上render函數里寫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的方式已經講解完畢，您學會了多少？

GPU云服務器云服務器在html中寫jq 在html中寫css 16種常用的數據分析方法匯總 exe文件在云服務器打開方式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/127986.html

匯總遇到的問題

摘要：在中看到文件加了，文件加了，緩存沒問題。再次訪問后端接口，接口，數據正常，問題修復。在接口返回數據量很大的時候，會遇到這種問題。 1.vue項目打包發測后，訪問項目鏈接，功能未生效，刷新后才生效。首先，查看兩次訪問，獲取到的文件是否相同。查看network，兩次訪問請求如下，可見兩次獲取到的app.js不是同一個文件。開始認為是瀏覽器緩存問題，查看如下資料知悉跟瀏覽器緩存無關。（瀏覽...

whlong 2019-08-02 13:55 評論0 收藏0
匯總遇到的問題

摘要：在中看到文件加了，文件加了，緩存沒問題。再次訪問后端接口，接口，數據正常，問題修復。在接口返回數據量很大的時候，會遇到這種問題。 1.vue項目打包發測后，訪問項目鏈接，功能未生效，刷新后才生效。首先，查看兩次訪問，獲取到的文件是否相同。查看network，兩次訪問請求如下，可見兩次獲取到的app.js不是同一個文件。開始認為是瀏覽器緩存問題，查看如下資料知悉跟瀏覽器緩存無關。（瀏覽...

fai1017 2019-08-23 14:08 評論0 收藏0
Vue 進階系列（三）之Render函數原理及實現

摘要：進階系列一之響應式原理及實現進階系列二之插件原理及實現進階系列三之函數原理及實現函數原理根據第一篇文章介紹的響應式原理，如下圖所示。在初始化階段，本質上發生在函數中，然后通過函數生成，根據生成。負責收集依賴，清除依賴和通知依賴。（關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導）showImg(https://segmentfa...

geekidentity 2019-08-23 12:55 評論0 收藏0
React："don't fuck it up like Google did

摘要：核心開發人員大神在開了個，用來征詢社區對的建議。而且的工程師并沒有因此止步，他們在文檔中又告訴開發者，不僅僅要把寫到中，也應該寫到中。無論怎么使用自定義語法，也不應該影響這種好處，即使最終實現看起來有一些怪異。 React 核心開發人員 sebmarkbage 大神在 GitHub 開了個 issues，用來征詢社區對 JSX 2.0 的建議。 showImg(https://segm...

Cristalven 2019-08-21 11:23 評論0 收藏0
React

摘要：語法是一種語法的拓展語言，在中官方也推薦使用描述用戶界面，使用起來會比較快捷而且易讀不是一門新的語言，可以理解為是一種語法糖，作用就是能夠讓我們更加直觀的在中創建標簽，最終還是會被編譯為語法，例如我們看一段代碼上面的語法最終會被編譯為語法， Reatc JSX語法 jsx是一種JavaScript語法的拓展語言，在React中官方也推薦使用jsx描述用戶界面，使用起來會比較快捷而且易讀...

techstay 2019-08-23 11:40 評論0 收藏0