Vue 3 的 setup語法糖是怎么工作的?
我們每天寫vue3項(xiàng)目的時(shí)候都會(huì)使用setup語法糖，但是你有沒有思考過下面幾個(gè)問題。setup語法糖經(jīng)過編譯后是什么樣子的？為什么在setup頂層定義的變量可以在template中可以直接使用？為什么import一個(gè)組件后就可以直接使用，無需使用components 選項(xiàng)來顯式注冊(cè)組件？
要回答上面的問題，我們先來了解一下從一個(gè)vue文件到渲染到瀏覽器這一過程經(jīng)歷了什么？
我們的vue代碼一般都是寫在后綴名為vue的文件上，顯然瀏覽器是不認(rèn)識(shí)vue文件的，瀏覽器只認(rèn)識(shí)html、css、jss等文件。所以第一步就是通過webpack或者vite將一個(gè)vue文件編譯為一個(gè)包含render函數(shù)的js文件。然后執(zhí)行render函數(shù)生成虛擬DOM，再調(diào)用瀏覽器的DOM API根據(jù)虛擬DOM生成真實(shí)DOM掛載到瀏覽器上。
setup編譯后的樣子
在javascript標(biāo)準(zhǔn)中script標(biāo)簽是不支持setup屬性的，瀏覽器根本就不認(rèn)識(shí)setup屬性。所以很明顯setup是作用于編譯時(shí)階段，也就是從vue文件編譯為js文件這一過程。
我們來看一個(gè)簡單的demo，這個(gè)是index.vue源代碼：
<template>
<h1>{{ title }}</h1>
<h1>{{ msg }}</h1>
<Child />
</template>
<script lang="ts" setup>
import { ref } from "vue";
import Child from "./child.vue";
const msg = ref("Hello World!");
const title = "title";
if (msg.value) {
const content = "content";
console.log(content);
}
</script>
這里我們定義了一個(gè)名為msg的ref響應(yīng)式變量和非響應(yīng)式的title變量，還有import了child.vue組件。
這個(gè)是child.vue的源代碼
<template>
<div>i am child</div>
</template>
我們接下來看index.vue編譯后的樣子，代碼我已經(jīng)做過了簡化：
import { ref } from "vue";
import Child from "./Child.vue";
const title = "title";
const __sfc__ = {
__name: "index",
setup() {
const msg = ref("Hello World!");
if (msg.value) {
const content = "content";
console.log(content);
}
const __returned__ = { title, msg, Child };
return __returned__;
},
};
import {
toDisplayString as _toDisplayString,
createElementVNode as _createElementVNode,
createVNode as _createVNode,
Fragment as _Fragment,
openBlock as _openBlock,
createElementBlock as _createElementBlock,
} from "vue";
function render(_ctx, _cache, $props, $setup, $data, $options) {
return (
_openBlock(),
_createElementBlock(
_Fragment,
null,
[
_createElementVNode("h1", null, _toDisplayString($setup.title)),
_createElementVNode(
"h1",
null,
_toDisplayString($setup.msg),
1 /* TEXT */
),
_createVNode($setup["Child"]),
],
64 /* STABLE_FRAGMENT */
)
);
}
__sfc__.render = render;
export default __sfc__;
我們可以看到index.vue編譯后的代碼中已經(jīng)沒有了template標(biāo)簽和script標(biāo)簽，取而代之是render函數(shù)和__sfc__對(duì)象。并且使用__sfc__.render = render將render函數(shù)掛到__sfc__對(duì)象上，然后將__sfc__對(duì)象export default出去。
看到這里你應(yīng)該知道了其實(shí)一個(gè)vue組件就是一個(gè)普通的js對(duì)象，import一個(gè)vue組件，實(shí)際就是import這個(gè)js對(duì)象。這個(gè)js對(duì)象中包含render方法和setup方法。
編譯后的setup方法
我們先來看看這個(gè)setup方法，是不是覺得和我們?cè)创a中的setup語法糖中的代碼很相似？沒錯(cuò)，這個(gè)setup方法內(nèi)的代碼就是由setup語法糖中的代碼編譯后來的。
setup語法糖原始代碼
<script lang="ts" setup>
import { ref } from "vue";
import Child from "./child.vue";
const msg = ref("Hello World!");
const title = "title";
if (msg.value) {
const content = "content";
console.log(content);
}
</script>
setup編譯后的代碼
import { ref } from "vue";
import Child from "./Child.vue";
const title = "title";
const __sfc__ = {
__name: "index",
setup() {
const msg = ref("Hello World!");
if (msg.value) {
const content = "content";
console.log(content);
}
const __returned__ = { title, msg, Child };
return __returned__;
},
};
經(jīng)過分析我們發(fā)現(xiàn)title變量由于不是響應(yīng)式變量，所以編譯后title變量被提到了js文件的全局變量上面去了。而msg變量是響應(yīng)式變量，所以依然還是在setup方法中。我們?cè)賮砜纯?code style="color:rgb(71,193,168);font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;">setup的返回值，返回值是一個(gè)對(duì)象，對(duì)象中包含title、msg、Child屬性，非setup頂層中定義的content變量就不在返回值對(duì)象中。
看到這里，可以回答我們前面提的第一個(gè)問題。
setup語法糖經(jīng)過編譯后是什么樣子的？
setup語法糖編譯后會(huì)變成一個(gè)setup方法，編譯后setup方法中的代碼和script標(biāo)簽中的源代碼很相似。方法會(huì)返回一個(gè)對(duì)象，對(duì)象由setup中定義的頂層變量和import導(dǎo)入的內(nèi)容組成。
由template編譯后的render函數(shù)
我們先來看看原本template中的代碼：
<template>
<h1>{{ title }}</h1>
<h1>{{ msg }}</h1>
<Child />
</template>
我們?cè)賮砜纯从?code style="color:rgb(71,193,168);font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;">template編譯成的render函數(shù)：
import {
toDisplayString as _toDisplayString,
createElementVNode as _createElementVNode,
createVNode as _createVNode,
Fragment as _Fragment,
openBlock as _openBlock,
createElementBlock as _createElementBlock,
} from "vue";
function render(_ctx, _cache, $props, $setup, $data, $options) {
return (
_openBlock(),
_createElementBlock(
_Fragment,
null,
[
_createElementVNode("h1", null, _toDisplayString($setup.title)),
_createElementVNode(
"h1",
null,
_toDisplayString($setup.msg),
1 /* TEXT */
),
_createVNode($setup["Child"]),
],
64 /* STABLE_FRAGMENT */
)
);
}
我們這次主要看在render函數(shù)中如何訪問setup中定義的頂層變量title、msg，createElementBlock和createElementVNode等創(chuàng)建虛擬DOM的函數(shù)不在這篇文章的討論范圍內(nèi)。你只需要知道createElementVNode("h1", null, _toDisplayString($setup.title))為創(chuàng)建一個(gè)h1標(biāo)簽的虛擬DOM就行了。
在render函數(shù)中我們發(fā)現(xiàn)讀取title變量的值是通過$setup.title讀取到的，讀取msg變量的值是通過$setup.msg讀取到的。這個(gè)$setup對(duì)象就是調(diào)用render函數(shù)時(shí)傳入的第四個(gè)變量，我想你應(yīng)該猜出來了，這個(gè)$setup對(duì)象就是我們前面的setup方法返回的對(duì)象。
那么問題來了，在執(zhí)行render函數(shù)的時(shí)候是如何將setup方法的返回值作為第四個(gè)變量傳遞給render函數(shù)的呢？我在下一節(jié)會(huì)一步一步的帶你通過debug源碼的方式去搞清楚這個(gè)問題，我們帶著問題去debug源碼其實(shí)非常簡單。
debug源碼搞清楚是如何調(diào)用render函數(shù)
有的小伙伴看到這里需要看源碼就覺得頭大了，別著急，其實(shí)很簡單，我會(huì)一步一步的帶著你去debug源碼。
首先我們將Enable JavaScript source maps給取消勾選了，不然在debug源碼的時(shí)候斷點(diǎn)就會(huì)走到vue文件中，而不是走到編譯會(huì)的js文件中。
然后我們需要在設(shè)置里面的Ignore List看看node_modules文件夾是否被忽略。新版谷歌瀏覽器中會(huì)默認(rèn)排除掉node_modules文件夾，所以我們需要將這個(gè)取消勾選。如果忽略了node_modules文件夾，那么debug的時(shí)候斷點(diǎn)就不會(huì)走到node_modules中vue的源碼中去了。
接下來我們需要在瀏覽器中找到vue文件編譯后的js代碼，我們只需要在network面板中找到這個(gè)vue文件的http請(qǐng)求，然后在Response下右鍵選擇Open in Sources panel，就會(huì)自動(dòng)在sources面板自動(dòng)打開對(duì)應(yīng)編譯后的js文件代碼。
找到編譯后的js文件，我們想debug看看是如何調(diào)用render函數(shù)的，所以我們給render函數(shù)加一個(gè)斷點(diǎn)。然后刷新頁面，發(fā)現(xiàn)代碼已經(jīng)走到了斷點(diǎn)的地方。我們?cè)賮砜纯从疫叺?/span>Call Stack調(diào)用棧，發(fā)現(xiàn)render函數(shù)是由一個(gè)vue源碼中的renderComponentRoot函數(shù)調(diào)用的。
點(diǎn)擊Call Stack中的renderComponentRoot函數(shù)就可以跳轉(zhuǎn)到renderComponentRoot函數(shù)的源碼，我們發(fā)現(xiàn)renderComponentRoot函數(shù)中調(diào)用render函數(shù)的代碼主要是下面這樣的：
function renderComponentRoot(instance) {
const {
props,
data,
setupState,
// 省略...
} = instance;
render2.call(
thisProxy,
proxyToUse,
renderCache,
props,
setupState,
data,
ctx
)
}
這里我們可以看到前面的$setup實(shí)際就是由setupState賦值的，而setupState是當(dāng)前vue實(shí)例上面的一個(gè)屬性。那么setupState屬性是如何被賦值到vue實(shí)例上面的呢？
我們需要給setup函數(shù)加一個(gè)斷點(diǎn)，然后刷新頁面進(jìn)入斷點(diǎn)。通過分析Call Stack調(diào)用棧，我們發(fā)現(xiàn)setup函數(shù)是由vue中的一個(gè)setupStatefulComponent函數(shù)調(diào)用執(zhí)行的。
點(diǎn)擊Call Stack調(diào)用棧中的setupStatefulComponent，進(jìn)入到setupStatefulComponent的源碼。我們看到setupStatefulComponent中的代碼主要是這樣的：
function setupStatefulComponent(instance) {
const { setup } = Component;
// 省略
const setupResult = callWithErrorHandling(
setup,
instance
);
handleSetupResult(instance, setupResult);
}
setup函數(shù)是Component上面的一個(gè)屬性，我們將鼠標(biāo)放到Component上面，看看這個(gè)Component是什么東西？
看到這個(gè)Component對(duì)象中既有render方法也有setup方法是不是感覺很熟悉，沒錯(cuò)這個(gè)Component對(duì)象實(shí)際就是我們的vue文件編譯后的js對(duì)象。
const __sfc__ = {
__name: "index",
setup() {
const msg = ref("Hello World!");
if (msg.value) {
const content = "content";
console.log(content);
}
const __returned__ = { title, msg, Child };
return __returned__;
},
};
__sfc__.render = render;
從Component對(duì)象中拿到setup函數(shù)，然后執(zhí)行setup函數(shù)得到setupResult對(duì)象。然后再調(diào)用handleSetupResult(instance, setupResult);
我們?cè)賮砜纯?code style="color:rgb(71,193,168);font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;">handleSetupResult函數(shù)是什么樣的，下面是我簡化后的代碼：
function handleSetupResult(instance, setupResult) {
if (isFunction(setupResult)) {
// 省略
} else if (isObject(setupResult)) {
instance.setupState = proxyRefs(setupResult);
}
}
我們的setup的返回值是一個(gè)對(duì)象，所以這里會(huì)執(zhí)行instance.setupState = proxyRefs(setupResult)，將setup執(zhí)行會(huì)的返回值賦值到vue實(shí)例的setupState屬性上。
看到這里我們整個(gè)流程已經(jīng)可以串起來了，首先會(huì)執(zhí)行由setup語法糖編譯后的setup函數(shù)。然后將setup函數(shù)中由頂層變量和import導(dǎo)入組成的返回值對(duì)象賦值給vue實(shí)例的setupState屬性，然后執(zhí)行render函數(shù)的時(shí)候從vue實(shí)例中取出setupState屬性也就是setup的返回值。這樣在render函數(shù)也就是template模版就可以訪問到setup中的頂層變量和import導(dǎo)入。
現(xiàn)在我們可以回答前面提的另外兩個(gè)問題了：
為什么在setup頂層定義的變量可以在template中可以直接使用？
因?yàn)樵?code style="color:rgb(71,193,168);font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;">setup語法糖頂層定義的變量經(jīng)過編譯后會(huì)被加入到setup函數(shù)返回值對(duì)象__returned__中，而非setup頂層定義的變量不會(huì)加入到__returned__對(duì)象中。setup函數(shù)返回值會(huì)被塞到vue實(shí)例的setupState屬性上，執(zhí)行render函數(shù)的時(shí)候會(huì)將vue實(shí)例上的setupState屬性傳遞給render函數(shù)，所以在render函數(shù)中就可以訪問到setup頂層定義的變量和import導(dǎo)入。而render函數(shù)實(shí)際就是由template編譯得來的，所以說在template中可以訪問到setup頂層定義的變量和import導(dǎo)入。。
為什么import一個(gè)組件后就可以直接使用，無需使用components 選項(xiàng)來顯式注冊(cè)組件？
因?yàn)樵?code style="color:rgb(71,193,168);font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;">setup語法糖中import導(dǎo)入的組件對(duì)象經(jīng)過編譯后同樣也會(huì)被加入到setup函數(shù)返回值對(duì)象__returned__中，同理在template中也可以訪問到setup的返回值對(duì)象，也就可以直接使用這個(gè)導(dǎo)入的組件了。
setup語法糖經(jīng)過編譯后就變成了setup函數(shù)，而setup函數(shù)的返回值是一個(gè)對(duì)象，這個(gè)對(duì)象就是由在setup頂層定義的變量和import導(dǎo)入組成的。vue在初始化的時(shí)候會(huì)執(zhí)行setup函數(shù)，然后將setup函數(shù)返回值塞到vue實(shí)例的setupState屬性上。執(zhí)行render函數(shù)的時(shí)候會(huì)將vue實(shí)例上的setupState屬性（也就是setup函數(shù)的返回值）傳遞給render函數(shù)，所以在render函數(shù)中就可以訪問到setup頂層定義的變量和import導(dǎo)入。而render函數(shù)實(shí)際就是由template編譯得來的，所以說在template中就可以訪問到setup頂層定義的變量和import導(dǎo)入。