偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

總結(jié) Vue3 組件管理 12 種高級寫法,靈活使用才能提高效率

開發(fā) 前端
namedTemplate 是 Vue Macros 推出的一個前瞻性的 Vue3 特性,雖然Vue Macros里的特性暫時還不是正式版特性,但是以后有很大概率會成為正式版特性,我們也可以對 Vue3 項目進(jìn)行配置,使得項目可以使用 Vue Macros的特性。

SFC 單文件組件

顧名思義,就是一個.vue文件只寫一個組件。

模板寫法

圖片圖片

如果這個組件想要在別的組件里使用,就需要在另一個.vue中引入和使用、復(fù)用。

h函數(shù)寫法

使用 defineComponent + h 去進(jìn)行組件編寫。

圖片圖片

JSX/TSX寫法

使用 defineComponent + JSX/TSX 去進(jìn)行組件編寫。

pnpm i @vitejs/plugin-vue-jsx -D

安裝完畢后,需要在 vite.config.ts 中去進(jìn)行插件配置。

圖片圖片

圖片圖片

圖片圖片

引入組件

圖片圖片

單文件多復(fù)用模板

如果你想要在一個單文件組件中,定義一些可復(fù)用的模板代碼的話,可以試試以下的方法;

createReusableTemplate

圖片圖片

這是 VueUse 提供的一個 Hooks。

文檔地址:https://vueuse.org/core/createReusableTemplate/

使用方式如下:

圖片圖片

namedTemplate

圖片圖片

namedTemplate 是 Vue Macros 推出的一個前瞻性的 Vue3 特性。

雖然Vue Macros里的特性暫時還不是正式版特性,但是以后有很大概率會成為正式版特性。

我們也可以對 Vue3 項目進(jìn)行配置,使得項目可以使用 Vue Macros的特性。

文檔地址:https://vue-macros.dev/zh-CN/features/named-template.html

使用方式如下:

圖片圖片

通用的多組件管理

你可以將多個邏輯緊密或者類型相似的組件,放置在同一個ts文件或Hooks中去管理,在使用到這些組件的地方去引入即可使用。

FunctionalComponent + h

在某一個頁面中,如果你有一些組件,它們邏輯比較緊密聯(lián)系,那你可以使用FunctionalComponent + h將他們封裝在同一個 Hooks 中,比如下面的例子

圖片圖片

圖片圖片

圖片圖片

或者你不想寫在Hooks中,你也完全可以寫在最外層。

圖片圖片

只不過引入方式就要做一些改變。

圖片圖片

defineComponent + h

defineComponent + h 的寫法也是差不多的道理。

你可以使用 Hooks 去封裝,如下:

圖片圖片

或者你也可以直接放在ts文件最外層。

圖片圖片

也是同樣的效果:

圖片圖片

defineComponent + JSX/TSX

可能會有人覺得 h 寫起來很麻煩,嵌套太多的話寫起來會很難受,那我們其實也可以用JSX/TSX去替代它。

同樣你也可以將多個組件以JSX/TSX的形式,維護(hù)在同一個tsx文件中。

pnpm i @vitejs/plugin-vue-jsx -D

安裝完畢后,需要在 vite.config.ts 中去進(jìn)行插件配置。

圖片圖片

圖片圖片

配置完就可以寫 TSX 啦?。?!

圖片圖片

同樣你也可以寫在外層(這里就不寫了,同理)。

也是同樣的效果:

圖片圖片

Vue Macros 組件 API

Vue Macros里的特性暫時還不是正式版特性,但是以后有很大概率會成為正式版特性。

文檔:https://vue-macros.dev/zh-CN/

defineRender + JSX/TSX

文檔地址:https://vue-macros.dev/zh-CN/macros/define-render.html#definerender

defineRender跟 defineComponent 的區(qū)別在于,defineRender只需要關(guān)心最終的DOM結(jié)構(gòu),不需要管狀態(tài)的維護(hù)。

圖片圖片

setupSFC + JSX/TSX

文檔地址:https://vue-macros.dev/zh-CN/macros/setup-sfc.html#setupsfc

想使用 setupSFC 的特性,需要建一個.setup.tsx/.setup.jsx 文件,跟普通的 tsx/jsx 文件相比,每次引入.setup.tsx/.setup.jsx這個文件,都是一個新的組件實例,狀態(tài)并不會共享。

圖片圖片

setupComponent + JSX/TSX

文檔地址:https://vue-macros.dev/zh-CN/macros/setup-component.html#setupcomponent

setupComponent 適合用來管理多組件,可以把多個緊密聯(lián)系或共用的組件,通過setupComponent寫在同一個文件或 Hooks 里。

setupComponent中可以使用setup的語法去寫邏輯,寫起來比defineComponent簡潔很多。

圖片圖片

同理,你想寫在文件外層也行~這里就不具體寫了。

Vine

圖片圖片

文檔:https://vue-vine.dev/

這個庫的作用就是:讓 Vue 組件能通過函數(shù)式來定義。

舉個例子,我們在平時寫一個組件的時候,會通過模板的方式去定義。

圖片圖片

但是在使用了 Vue-Vine這個庫之后,可以使用函數(shù)式的方式去定義。

圖片圖片

翻看了一下Vue-Vine的官方文檔,總結(jié)出Vue-Vine這個庫的初衷是:

  • 想要做到像 React JSX 那樣的組件定義方式。
  • 可以在同個文件里定義多個組件。
  • 使得邏輯更加聚合,提高開發(fā)效率。
責(zé)任編輯:武曉燕 來源: 前端之神
相關(guān)推薦

2023-05-17 16:47:47

物聯(lián)網(wǎng)智能建筑

2010-04-13 15:14:31

Oracle優(yōu)化

2015-11-27 12:59:11

Android技巧提高效率

2018-09-30 14:46:38

Linux命令技巧

2015-09-06 16:05:57

綠色數(shù)據(jù)中心效率

2012-03-27 09:17:43

Visual Stud

2023-11-21 10:00:28

IT銷售業(yè)績

2020-07-08 14:10:30

開發(fā)技能工具

2020-12-14 09:39:45

開發(fā)技能組件

2012-06-01 14:44:27

惠普臺式機

2012-07-16 00:51:36

程序員效率

2019-06-25 08:42:13

Linux命令指令

2023-10-23 15:02:53

JavaScript

2010-09-09 16:51:50

2025-01-15 17:00:00

開發(fā)Linux命令

2020-06-04 15:55:54

GitHub代碼開發(fā)者

2020-01-21 19:39:31

數(shù)據(jù)中心服務(wù)器工具

2016-12-29 11:41:45

2015-05-22 14:01:50

編程提高效率

2023-07-28 14:10:13

Zapier智能利器自動化
點贊
收藏

51CTO技術(shù)棧公眾號