Vue 3.0 正式發(fā)布了，喜大普奔😁。新的語(yǔ)法又要學(xué)習(xí)一陣陣，不過(guò)需要在生產(chǎn)環(huán)境下大面積使用，可能需要等到它的周邊工具：vuex，vue-router 等等全部升級(jí)完畢。

Vue 3.0 中尤大使用的了新的編譯工具 vite，革了 webpack 的命😂。嘗試看了下文檔，發(fā)現(xiàn)支持 jsx 語(yǔ)法，由于這段時(shí)間都是在使用 react 來(lái)開(kāi)發(fā)項(xiàng)目，jsx 完全不同的體驗(yàn)，更加的純粹與靈活。

項(xiàng)目創(chuàng)建

npm init vite-app vite-vuecd vite-vuenpm installnpm run dev

我們發(fā)現(xiàn)創(chuàng)建的目錄解構(gòu)很簡(jiǎn)單

使用 JSX

Vue 3.0 直接支持 jsx 語(yǔ)法，新建 demo.jsx

export default function JsxTemp() { return <div> <h3>jsx</h3> </div>}

引入到 App.vue 中可以完整顯示

再嘗試綁定數(shù)據(jù)

import { ref } from ’vue’export default function JsxTemp() { const state = ref(0) const onClick = () => { state.value++; console.log(state.value) } return <div> <h3>state: {state.value}</h3> <button onClick={onClick}>點(diǎn)擊</button> </div>}

我們發(fā)現(xiàn)沒(méi)有像我們想的那樣 state 數(shù)一直自增😅

這是因?yàn)槲覀冊(cè)?Vue 3.0 中需要使用 defineComponent 包裹來(lái)使其變成一個(gè)雙向綁定數(shù)據(jù)的組件參數(shù) 為 setup function | object

import { defineComponent, ref } from ’vue’export default defineComponent(() => { const state = ref(0) const onClick = () => { state.value++; console.log(state.value) } return () => ( <div> <h3>state: {state.value}</h3> <button onClick={onClick}>點(diǎn)擊</button> </div> )})

可以看到現(xiàn)在是實(shí)時(shí)點(diǎn)擊實(shí)現(xiàn)自增效果

組件通信

組件間傳值通信該怎么來(lái)實(shí)現(xiàn)呢😮

我們需要改用對(duì)象的方式來(lái)傳入通信數(shù)據(jù)

App.vue<JsxTemp site='imondo.cn' @onGet='onGet' />export default { ... methods: { onGet(e) { console.log(’emit:’, e) } }}...export default defineComponent({ props: { site: String }, setup({ site }) { const state = ref(0) const onClick = () => { state.value++; console.log(state.value) context.emit(’onGet’, ’Mondo’); } return () => ( <div> <h1>props: {site}</h1> <h3>state: {state.value}</h3> <button onClick={onClick}>點(diǎn)擊</button> </div> ) }})

實(shí)現(xiàn)效果

總結(jié)

我們嘗試了在 Vue 3.0 中如何使用 jsx ，這有助于我們?cè)陧?xiàng)目中更靈活的公用我們組件，由此也可以區(qū)分我們?cè)陧?xiàng)目中使用的方式

無(wú)狀態(tài)組件 我們完全可以使用純函數(shù)來(lái)展示 有狀態(tài)組件 存在邏輯與數(shù)據(jù)綁定的組件則需要使用 Vue 3.0 提供的一系列組件 API

以上就是Vue 3.0 中 jsx 語(yǔ)法使用的詳細(xì)內(nèi)容，更多關(guān)于Vue 3.0 jsx 語(yǔ)法的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！