Vue的模塊化開發(fā)初探
一 概述
Vue是一個(gè)漸進(jìn)式JavaScript框架，可以按需引入部分功能，而不必全量引入整個(gè)框架。
二 步驟
2.1 下載必須模塊
在瀏覽器輸入：https://unpkg.com/vue@3/dist/vue.esm-browser.js，右鍵另存為，保存到demo.html文件同級(jí)目錄下。
2.2 安裝Live Server插件
在VSCode插件市場搜索Live Server并安裝，如下圖：
2.3 編寫代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
</head>
<body>
<div id="app">
{{ msg }}
<hr/>
{{ web }}
<hr/>
{{ number }}
</div>
<script type="module">
import { createApp, reactive, ref } from "./vue.esm-browser.js"
createApp(
{
setup() {
const number = ref(2000);
const web = reactive(
{
title: "demo",
url: "demo.com"
}
);
return {
msg: "success",
web,
number
};
}
}
).mount("#app")
</script>
</body>
</html>
2.4 運(yùn)行結(jié)果
在Live Server中預(yù)覽：
運(yùn)行結(jié)果：
三 總結(jié)
與傳統(tǒng)開發(fā)方式不一樣的是，在script標(biāo)簽引入了type屬性，具體為： <script type="module">，在標(biāo)簽內(nèi)使用import導(dǎo)入了相關(guān)函數(shù)。
createApp是vue的啟動(dòng)函數(shù)，返回一個(gè)應(yīng)用實(shí)例。原型為：
function createApp(rootComponent: Component, rootProps?: object): App
第一個(gè)參數(shù)是根組件。第二個(gè)參數(shù)可選，它是要傳遞給根組件的 props。
setup() 鉤子是在組件中使用組合式 API 的入口，通常只在以下情況下使用：
- 需要在非單文件組件中使用組合式 API 時(shí)；
- 需要在基于選項(xiàng)式 API 的組件中集成基于組合式 API 的代碼時(shí)。
注意: 對(duì)于結(jié)合單文件組件使用的組合式 API，推薦通過
<script setup>以獲得更加簡潔及符合人體工程學(xué)的語法。
**ref()**接受一個(gè)內(nèi)部值，返回一個(gè)響應(yīng)式的、可更改的 ref 對(duì)象，此對(duì)象只有一個(gè)指向其內(nèi)部值的屬性 .value。原型如下：
function ref<T>(value: T): Ref<UnwrapRef<T>>
interface Ref<T> {
value: T
}
ref 對(duì)象是可更改的，也就是說你可以為 .value 賦予新的值。它也是響應(yīng)式的，即所有對(duì).value的操作都將被追蹤，并且寫操作會(huì)觸發(fā)與之相關(guān)的副作用。
如果將一個(gè)對(duì)象賦值給 ref，那么這個(gè)對(duì)象將通過 reactive() 轉(zhuǎn)為具有深層次響應(yīng)式的對(duì)象。這也意味著如果對(duì)象中包含了嵌套的 ref，它們將被深層地解包。若要避免這種深層次的轉(zhuǎn)換，請(qǐng)使用 shallowRef() 來替代。
reactive()?返回一個(gè)對(duì)象的響應(yīng)式代理。原型為：
function reactive<T extends object>(target: T): UnwrapNestedRefs<T>
- 響應(yīng)式轉(zhuǎn)換是“深層”的：它會(huì)影響到所有嵌套的屬性。一個(gè)響應(yīng)式對(duì)象也將深層地解包任何 ref 屬性，同時(shí)保持響應(yīng)性;
- 值得注意的是，當(dāng)訪問到某個(gè)響應(yīng)式數(shù)組或 Map 這樣的原生集合類型中的 ref 元素時(shí)，不會(huì)執(zhí)行 ref 的解包;
- 若要避免深層響應(yīng)式轉(zhuǎn)換，只想保留對(duì)這個(gè)對(duì)象頂層次訪問的響應(yīng)性，請(qǐng)使用
shallowReactive()作替代; - 返回的對(duì)象以及其中嵌套的對(duì)象都會(huì)通過 ES Proxy 包裹，因此不等于源對(duì)象，建議只使用響應(yīng)式代理，避免使用原始對(duì)象。
app.mount() 將應(yīng)用實(shí)例掛載在一個(gè)容器元素中。原型為：文章來源：http://www.zghlxwxcb.cn/news/detail-846129.html
interface App {
mount(rootContainer: Element | string): ComponentPublicInstance
}
- 參數(shù)可以是一個(gè)實(shí)際的 DOM 元素或一個(gè) CSS 選擇器 (使用第一個(gè)匹配到的元素)。返回根組件的實(shí)例；
- 如果該組件有模板或定義了渲染函數(shù)，它將替換容器內(nèi)所有現(xiàn)存的 DOM 節(jié)點(diǎn)。否則在運(yùn)行時(shí)編譯器可用的情況下，容器元素的
innerHTML將被用作模板； - 在 SSR 激活模式下，它將激活容器內(nèi)現(xiàn)有的 DOM 節(jié)點(diǎn)。如果出現(xiàn)了激活不匹配，那么現(xiàn)有的 DOM 節(jié)點(diǎn)將會(huì)被修改以匹配客戶端的實(shí)際渲染結(jié)果；
- 對(duì)于每個(gè)應(yīng)用實(shí)例，mount() 僅能調(diào)用一次。
四 參考資料
4.1 Vue官方文檔文章來源地址http://www.zghlxwxcb.cn/news/detail-846129.html
到了這里，關(guān)于Vue的模塊化開發(fā)初探的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
