Vue3源碼分析update

⑴ vue3.x新特性之setup函數，看完就會用了

最近有小夥伴跟我聊起setup函數，因為習慣了vue2.x的寫法導致了，setup用起來覺得奇奇怪怪的，在一些api混編的情況下，代碼變得更加混亂了，個人覺得在工程化思想比較強的團隊中使用setup確實能更好的使用模塊化開發，但是用得不好的話也確實降低了代碼的可讀性。本篇文章是從使用角度來聊聊setup的實際使用。

1、setup和以前的api（data，methods，computed等）並不沖突，也是可以相互訪問的，值得注意的是setup裡面不能用this，並且在setup執行的時候組件實例還未創建完畢，故不也能使用data，methods，computed定義的變數和函數。如下混編示例：

2、setup 還可以返回一個渲染函數，不過返回一個渲染函數將阻止我們返回任何其它的東西，當我們想暴漏函數給其父組件使用的時候，可以使用expose來處理這個問題。示例如下：

看到這里就完全可以使用setup來做項目了，接下來就是封山開路遇水搭橋，碰到不會的就各種查，磕磕碰碰總能成功。然而一篇帖子不能寫到這里就結束了，後面還有一大堆相關的知識點呢。

為什麼聊響應式呢，因為setup裡面返回的變數雖然可以直接在模版語法中使用，但是它並不是響應式的，如上面第一個示例，我們如果在模版中使用了{{ count }}來展示count的值，然後我們改變count的值，值改變了，但是顯示不會變化。

響應式這塊在官網api比較多，只說幾個用得比較多的。
1、上面有提到的ref，ref 接收參數並將其包裹在一個帶有 value property 的對象中返回，然後可以使用該 property 訪問或更改響應式變數的值。最簡單的例子，上面示例改成響應式的，如下：

2、reactive返回對象的響應式副本。這個比較好理解，跟以前2.x時代差別不大。

3、toRef 和 toRefs 這兩個函數都是為了獲取一個響應式的子項，並且跟以前的響應式數據進行關聯

注意 ：toRefs 只會為源對象中包含的 property 生成 ref。如果要為特定的 property 創建 ref，則應當使用toRef，簡單粗暴的理解toRef可以給源對象添加一個關聯的響應式屬性，如：（本想寫在上面示例中，不過感覺不清晰，就單獨列了一塊偽代碼）

使用 setup 函數時，它將接收兩個參數：
Props
setup 函數中的第一個參數是 props 。正如在一個標准組件中所期望的那樣， setup 函數中的 props 是響應式的，當傳入新的 prop 時，它將被更新。

但是，因為 props 是響應式的，你 不能使用 ES6 解構 ，它會消除 prop 的響應性，上面說到的toRefs可以很好的解決這個問題。

如果 title 是可選的 prop，則傳入的 props 中可能沒有 title 。在這種情況下， toRefs 將不會為 title 創建一個 ref 。你需要使用 toRef 替代它：

Context
傳遞給 setup 函數的第二個參數是 context 。 context 是一個普通 JavaScript 對象，暴露了其它可能在 setup 中有用的值：

在setup中可以訪問到以下生命周期鉤子：

這些函數接受一個回調函數，當鉤子被組件調用時將會被執行，如：

原創不易，轉載請註明出處，歡迎留言提議。

⑵ 手寫實現vue3數據響應式 vue3全新vdom+編譯器改進vue3編譯器流程\x09vue3 p

摘要 reactive## 關於Vue3

⑶ vue3的生命周期

vue3的組合式api中，setup中的函數執行相當於在選項api中的beforeCreate和created中執行

除了beforeCreate和created外， 其他生命周期的使用都需要提前引入（輕量化）

除了beforeCreate和created被setup取代之外，選項式api和組合式api的映射如下：

beforeMount -> onBeforeMount ，在掛載前被調用

mounted -> onMounted ，掛載完成後調用

beforeUpdate -> onBeforeUpdate ，數據更新時調用，發生在虛擬 DOM 打補丁之前。此時內存中的數據已經被修改，但還沒有更新到頁面上

updated -> onUpdated ，數據更新後調用，此時內存數據已經修改，頁面數據也已經更新

beforeUnmount -> onBeforeUnmount ，組件卸載前調用

unmounted -> onUnmounted ，卸載組件實例後調用。

errorCaptured -> onErrorCaptured ，每當事件處理程序或生命周期鉤子拋出錯誤時調用

renderTracked -> onRenderTracked ，狀態跟蹤，vue3新引入的鉤子函數，只有在開發環境有用，用於跟蹤所有響應式變數和方法，一旦頁面有update，就會跟蹤他們並返回一個event對象

renderTriggered -> onRenderTriggered ，狀態觸發，同樣是vue3新引入的鉤子函數，只有在開發環境有效，與onRenderTracked的效果類似，但不會跟蹤所有的響應式變數方法，只會定點追蹤發生改變的數據，同樣返回一個event對象

activated -> onActivated ，與keep-alive一起使用，當keep-alive包裹的組件激活時調用

deactivated -> onDeactivated ，與keep-alive一起使用，當keep-alive包裹的組件停用時調用

⑷ vue3成熟嗎

截至2022年4月，VUE 3 可以說是相對成熟了，但沒有 VUE 2.× 成熟。

VUE 2.× 是一個比較穩定的版本，也是很長一段時間大家在使用的版本，社區生態已經十分完善了，所以，如果我們暫時還不必須去著急升級到VUE 3，畢竟等待vue3的生態成熟，還需要一段時間的積累，但是作為前端領域必不可少的一門技能，當然希望能夠提前去接觸到，畢竟前端的技術迭代更新就是這么快。

Vue.js 的主要特點：

1、易用：

在有HTML，CSS，JavaScript的基礎上，快速上手。

Vue.js 的 API 是參考了AngularJS、KnockoutJS、Ractive.js、Rivets.js。

Vue.js 的 API 的對於其他框架的參考不僅是參考，其中也包含了許多 Vue.js 的獨特功能。

2、靈活：

簡單小巧的核心，漸進式技術棧，足以應付任何規模的應用。

3、性能：

20kb min+gzip 運行大小、超快虛擬DOM、最省心的優化。

以上內容參考：網路-Vue.js

⑸ vue3.0有哪些新特性

vue3.0新特性有：

1、性能比vue2.x快1.2 2倍- Performance ；

2、支持tree-shaking- Tree shaking support ；

3、引入了Composition API- Composition API ；

4、暴露了自定義渲染API- Custom Renderer API ；

5、新增三個組件（Fragment、Teleport、Suspense);

6、 更好的支持TS - Better TypeScript support；

一、Performance

二、 Three-shaking support

Vue3.x中的核心API都支持tree-shaking，這些API都是通過包引入的方式而不是直接在實例化時就注入，只會對使用到的功能或特性進行打包（按需打包），這意味著更多的功能和更小的體積。

三、Composition API
Vue2.x中，我們通常採用mixin來復用邏輯代碼，使用起來雖然方便，但也存在一些問題：代碼來源不清晰、方法屬性可能出現沖突。因此，Vue3.x引入了Composition API（組合API），使用純函數分割復用代碼。和React Hooks的概念相似。

四、 Fragment、Teleport、Suspense

Fragment
在書寫Vue2.x時，由於組件必須是一個根結點，很多時候會添加一些沒有意義的節點用於包裹。Fragment組件就是用於解決這個問題的（這和React 中的Fragment組件是一樣的）。
Teleport
Teleport其實就是React中的Portal。Portal 提供了一種將子節點渲染到存在於父組件以外的 DOM 節點的優秀的方案。

五、API- Custom Renderer API

vue官方實現的 createApp 會給我們的 template 映射生成 html 代碼，但是要是你不想渲染生成到 html ，而是要渲染生成到 canvas 之類的不是html的代碼的時候，那就需要用到 Custom Renderer API 來定義自己的 render 渲染生成函數了。

⑹ vue3請求數據好一會才請求到

網速問題。
vue3新特性：數據響應重新實現（ES6的proxy代替Es5的Object.defineProperty）源碼使用ts重寫，更好的類型推導虛擬DOM新演算法（更快，更小）提供了compositionapi，為更好的邏輯復用與代碼組織自定義渲染器（app、小程序、游戲開發）。

⑺ vue2.0和3.0區別

項目目錄不同

1、vue-cli3.o移除了config.文件夾。

2、多了vue.config.js文件。

3、新增了一個views文件夾。

4、刪除了static新增了public文件夾。

5、index.html移動到public了。

配置項不同

1、vue-cli2.0的域名配置，分為開發環境和生產環境。

2、所以配置域名時，需要在config中的dev.env.js和。

3、prod.env.js中分別配置3.0 config.文件已經被移除。

4、但是多了。env.proction和env.development文件。

5、除了文件位置，實際配置起來和2.沒什麼不同。

創建項目的方式不一樣

1、vue-cli2.0，vue init webpack項目名。

2、vue-cli3.0 vue create項目名。

⑻ vue生命周期詳解

vue源碼中最終執行生命周期函數都是調用 callHook 方法， callHook 函數的邏輯很簡單，根據傳入的生命周期類型 hook ，去拿到 vm.$options[hook] 對應的回調函數數組，然後遍歷執行，執行的時候把 vm 作為函數執行的上下文。

1. new Vue(options) ：創建一個vm實例；

2. mergeOptions(resolveConstructorOptions(vm.constructor), options, vm) ：合並Vue構造函數里options和傳入的options或合並父子的options。比如：在mergeOptions函數中會調用mergeHook方法合並生命周期的鉤子函數，mergeHook方法原理是只有父時返回父，只有子時返回數組類型的子。父、子都存在時，將子添加在父的後面返回組合而成的數組。這也是父子均有鉤子函數的時候，先執行父的後執行子的的原因；

3. initLifecycle(vm)、initEvents(vm)、initRender(vm) ：在創建的vm實例上初始化生命周期、事件、渲染相關的屬性；

4. callHook(vm, 'beforeCreate') ：調用beforeCreate生命周期鉤子函數；

5. initInjections(vm)、initState(vm)、initProvide(vm) ：初始化數據：inject、state、provide。initState 的作用是初始化 props、data、methods、watch、computed 等屬性；

6. callHook(vm, 'created') ：調用created生命周期鉤子函數；

7. vm.$mount(vm.$options.el) ： $mount 方法在多個文件中都有定義，如"src/platform/web/entry-runtime-with-compiler.js"、"src/platform/web/runtime/index.js"、"src/platform/weex/runtime/index.js"。因為 $mount 方法的實現是和平台、構建方式相關的。以"entry-runtime-with-compiler.js"為例，關鍵步驟是查看 vm.$options 中是否有render方法，如果沒有則會根據el和template屬性確定最終的template字元串，再調用 compileToFunctions 方法將template字元串轉為render方法，最後，調用原先原型上的$mount方法，即開始執行"lifecycle.js"中 mountComponent 方法；

8. callHook(vm, 'beforeMount') ：調用beforeMount生命周期鉤子函數；

9. vm._render() => vm._update() => vm.__patch__() ：先執行vm._render方法，即調用createElement生成虛擬DOM，即VNode ，每個VNode有children ，children 每個元素也是⼀個 VNode，這樣就形成了⼀個 VNode Tree；再調用vm._update方法進行首次渲染，vm._update方法核心是調用vm. patch 方法，這個方法跟vm.$mount一樣跟平台相關；vm. patch 方法則是根據生成的VNode Tree遞歸createElm方法創建真實Dom Tree掛載到Dom上；

10. callHook(vm, 'mount') ：調用mount生命周期鉤子函數：VNode patch 到 Dom 之後會執行 'invokeInsertHook'函數，把 insertedVnodeQueue 中保存的mount鉤子函數執行一遍，insertedVnodeQueue隊列中的鉤子函數是在根據VNode Tree遞歸createElm方法創建真實Dom Tree過程生成的鉤子函數順序隊列，因此mounted鉤子函數的執行順序是先子後父；

11. data changes ：數據更新，nextTick中執行 flushSchelerQueue 方法，該方法會執行watcher隊列中的watcher；

12. callHook(vm, 'beforeUpdate') ：執行watcher時會執行watcher的before方法，即調用beforeUpdate生命周期鉤子函數；

13. Virtual DOM re-render and patch ：重新render生成新的Virtual DOM，並且patch到DOM上；

14. callHook(vm, 'updated') ：調用updated生命周期鉤子函數；

15. vm.$destroy() ：啟動卸銷毀過程；

16. callHook(vm, 'beforeDestroy') ：調用beforeDestroy生命周期鉤子函數；

17. Teardown watchers, childcomponents and event listeners ：執行一系列銷毀動作，在 $destroy 的執行過程中，它又會執行 vm.__patch__(vm._vnode, null) 觸發它子組件的銷毀鉤子函數，這樣一層層的遞歸調用，所以 destroyed 鉤子函數執行順序是先子後父，和 mounted 過程一樣。

18. callHook(vm, 'destroyed ') ：調用destroyed 生命周期鉤子函數。