直屏旗艦來了 iQOO 12和K70 Pro同臺競技
旗艦機基本上使用的都是雙曲面屏幕，這就讓很多喜歡直屏的愛好者在苦等一款直屏旗艦，這次，你們等到了。據博主數碼閑聊站帶來的最新爆料稱，Redmi下代旗艦K70 Pro和iQOO 12兩款手
我們每天寫vue3項目的時候都會使用setup語法糖，但是你有沒有思考過下面幾個問題。setup語法糖經過編譯后是什么樣子的？為什么在setup頂層定義的變量可以在template中可以直接使用？為什么import一個組件后就可以直接使用，無需使用components 選項來顯式注冊組件？
要回答上面的問題，我們先來了解一下從一個vue文件到渲染到瀏覽器這一過程經歷了什么？
我們的vue代碼一般都是寫在后綴名為vue的文件上，顯然瀏覽器是不認識vue文件的，瀏覽器只認識html、css、jss等文件。所以第一步就是通過webpack或者vite將一個vue文件編譯為一個包含render函數的js文件。然后執行render函數生成虛擬DOM，再調用瀏覽器的DOM API根據虛擬DOM生成真實DOM掛載到瀏覽器上。
圖片
在javascript標準中script標簽是不支持setup屬性的，瀏覽器根本就不認識setup屬性。所以很明顯setup是作用于編譯時階段，也就是從vue文件編譯為js文件這一過程。
我們來看一個簡單的demo，這個是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>這里我們定義了一個名為msg的ref響應式變量和非響應式的title變量，還有import了child.vue組件。
這個是child.vue的源代碼
<template> <div>i am child</div></template>我們接下來看index.vue編譯后的樣子，代碼我已經做過了簡化：
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編譯后的代碼中已經沒有了template標簽和script標簽，取而代之是render函數和__sfc__對象。并且使用__sfc__.render = render將render函數掛到__sfc__對象上，然后將__sfc__對象export default出去。
看到這里你應該知道了其實一個vue組件就是一個普通的js對象，import一個vue組件，實際就是import這個js對象。這個js對象中包含render方法和setup方法。
我們先來看看這個setup方法，是不是覺得和我們源代碼中的setup語法糖中的代碼很相似？沒錯，這個setup方法內的代碼就是由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__; },};經過分析我們發現title變量由于不是響應式變量，所以編譯后title變量被提到了js文件的全局變量上面去了。而msg變量是響應式變量，所以依然還是在setup方法中。我們再來看看setup的返回值，返回值是一個對象，對象中包含title、msg、Child屬性，非setup頂層中定義的content變量就不在返回值對象中。
看到這里，可以回答我們前面提的第一個問題。
setup語法糖經過編譯后是什么樣子的？
setup語法糖編譯后會變成一個setup方法，編譯后setup方法中的代碼和script標簽中的源代碼很相似。方法會返回一個對象，對象由setup中定義的頂層變量和import導入的內容組成。
我們先來看看原本template中的代碼：
<template> <h1>{{ title }}</h1> <h1>{{ msg }}</h1> <Child /></template>我們再來看看由template編譯成的render函數：
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函數中如何訪問setup中定義的頂層變量title、msg，createElementBlock和createElementVNode等創建虛擬DOM的函數不在這篇文章的討論范圍內。你只需要知道createElementVNode("h1", null, _toDisplayString($setup.title))為創建一個h1標簽的虛擬DOM就行了。
在render函數中我們發現讀取title變量的值是通過$setup.title讀取到的，讀取msg變量的值是通過$setup.msg讀取到的。這個$setup對象就是調用render函數時傳入的第四個變量，我想你應該猜出來了，這個$setup對象就是我們前面的setup方法返回的對象。
那么問題來了，在執行render函數的時候是如何將setup方法的返回值作為第四個變量傳遞給render函數的呢？我在下一節會一步一步的帶你通過debug源碼的方式去搞清楚這個問題，我們帶著問題去debug源碼其實非常簡單。
有的小伙伴看到這里需要看源碼就覺得頭大了，別著急，其實很簡單，我會一步一步的帶著你去debug源碼。
首先我們將Enable JavaScript source maps給取消勾選了，不然在debug源碼的時候斷點就會走到vue文件中，而不是走到編譯會的js文件中。
圖片
然后我們需要在設置里面的Ignore List看看node_modules文件夾是否被忽略。新版谷歌瀏覽器中會默認排除掉node_modules文件夾，所以我們需要將這個取消勾選。如果忽略了node_modules文件夾，那么debug的時候斷點就不會走到node_modules中vue的源碼中去了。
圖片
接下來我們需要在瀏覽器中找到vue文件編譯后的js代碼，我們只需要在network面板中找到這個vue文件的http請求，然后在Response下右鍵選擇Open in Sources panel，就會自動在sources面板自動打開對應編譯后的js文件代碼。
圖片
找到編譯后的js文件，我們想debug看看是如何調用render函數的，所以我們給render函數加一個斷點。然后刷新頁面，發現代碼已經走到了斷點的地方。我們再來看看右邊的Call Stack調用棧，發現render函數是由一個vue源碼中的renderComponentRoot函數調用的。
圖片
點擊Call Stack中的renderComponentRoot函數就可以跳轉到renderComponentRoot函數的源碼，我們發現renderComponentRoot函數中調用render函數的代碼主要是下面這樣的：
function renderComponentRoot(instance) { const { props, data, setupState, // 省略... } = instance; render2.call( thisProxy, proxyToUse, renderCache, props, setupState, data, ctx )}這里我們可以看到前面的$setup實際就是由setupState賦值的，而setupState是當前vue實例上面的一個屬性。那么setupState屬性是如何被賦值到vue實例上面的呢？
我們需要給setup函數加一個斷點，然后刷新頁面進入斷點。通過分析Call Stack調用棧，我們發現setup函數是由vue中的一個setupStatefulComponent函數調用執行的。
圖片
點擊Call Stack調用棧中的setupStatefulComponent，進入到setupStatefulComponent的源碼。我們看到setupStatefulComponent中的代碼主要是這樣的：
function setupStatefulComponent(instance) { const { setup } = Component; // 省略 const setupResult = callWithErrorHandling( setup, instance ); handleSetupResult(instance, setupResult);}setup函數是Component上面的一個屬性，我們將鼠標放到Component上面，看看這個Component是什么東西？
圖片
看到這個Component對象中既有render方法也有setup方法是不是感覺很熟悉，沒錯這個Component對象實際就是我們的vue文件編譯后的js對象。
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對象中拿到setup函數，然后執行setup函數得到setupResult對象。然后再調用handleSetupResult(instance, setupResult);
我們再來看看handleSetupResult函數是什么樣的，下面是我簡化后的代碼：
function handleSetupResult(instance, setupResult) { if (isFunction(setupResult)) { // 省略 } else if (isObject(setupResult)) { instance.setupState = proxyRefs(setupResult); }}我們的setup的返回值是一個對象，所以這里會執行instance.setupState = proxyRefs(setupResult)，將setup執行會的返回值賦值到vue實例的setupState屬性上。
看到這里我們整個流程已經可以串起來了，首先會執行由setup語法糖編譯后的setup函數。然后將setup函數中由頂層變量和import導入組成的返回值對象賦值給vue實例的setupState屬性，然后執行render函數的時候從vue實例中取出setupState屬性也就是setup的返回值。這樣在render函數也就是template模版就可以訪問到setup中的頂層變量和import導入。
現在我們可以回答前面提的另外兩個問題了：
為什么在setup頂層定義的變量可以在template中可以直接使用？
因為在setup語法糖頂層定義的變量經過編譯后會被加入到setup函數返回值對象__returned__中，而非setup頂層定義的變量不會加入到__returned__對象中。setup函數返回值會被塞到vue實例的setupState屬性上，執行render函數的時候會將vue實例上的setupState屬性傳遞給render函數，所以在render函數中就可以訪問到setup頂層定義的變量和import導入。而render函數實際就是由template編譯得來的，所以說在template中可以訪問到setup頂層定義的變量和import導入。。
為什么import一個組件后就可以直接使用，無需使用components 選項來顯式注冊組件？
因為在setup語法糖中import導入的組件對象經過編譯后同樣也會被加入到setup函數返回值對象__returned__中，同理在template中也可以訪問到setup的返回值對象，也就可以直接使用這個導入的組件了。
setup語法糖經過編譯后就變成了setup函數，而setup函數的返回值是一個對象，這個對象就是由在setup頂層定義的變量和import導入組成的。vue在初始化的時候會執行setup函數，然后將setup函數返回值塞到vue實例的setupState屬性上。執行render函數的時候會將vue實例上的setupState屬性（也就是setup函數的返回值）傳遞給render函數，所以在render函數中就可以訪問到setup頂層定義的變量和import導入。而render函數實際就是由template編譯得來的，所以說在template中就可以訪問到setup頂層定義的變量和import導入。
本文鏈接：http://www.tebozhan.com/showinfo-26-76516-0.htmlVue 3 的 setup 語法糖到底是什么東西？
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
下一篇： 一千個微服務之死
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號