這幾天抽空把vue3的文檔整個看了一遍。簡介 | Vue.js

23年寫過一個vue2的項目，24年寫了一個vue3的項目，頁面功能比較簡單，用幾個簡單的API，watch、watchEffect、ref、reactive就能實現的業務功能。

寫了幾年的react的，初上手vue時對比著用再翻翻別人的代碼，點對點的翻閱一下官方文檔，能解決大多數的問題。當時忙也就沒能夠系統進行學習。

這次整體看了一遍，也就能發現其中的精妙，以及解決之前困惑但是沒能細究的一些問題，比如

1、nextTick是干什么的

全局 API：常規 | Vue.js

等待下一次 DOM 更新刷新的工具方法。

確保回調函數在 DOM 更新完成后執行，解決因異步更新導致的數據與 DOM 狀態不一致問題。

2、nutui組件庫沒看見注冊怎么就能使用了

app.component()注冊全局組件

3、h（）這個函數是干什么的

h()?函數用于創建 vnodes

對比react作者似乎封裝了很多常用功能，一些細節的處理更節省用戶的心智，比如

1、雙向數據綁定 v-model，還有一些其他指令 v-show、v-if、v-for、v-html、v-bind（：）、v-on（@）

2、事件處理后綴

• .stop

• .prevent

• .self

• .capture

• .once

• .passive

3、watchEffect自動追蹤依賴 ，react里useeffect需要顯示指定；computed和useMemo差不多；

4、使用keepAlive組件多了兩個生命周期

5、組合式函數和react的自定義hook很像，作者的靈感來源也是這里

6、插槽的話，vue一個組件可以有多個插槽，name區分；react只有一個children；

7、依賴注入provide inject 的思想則和react的usecontext 可以類比一下

8、teleport組件和react的？？API一樣的效果

9、suspense則解決了異步依賴的加載結果顯示的問題

10、vue同樣支持jsx

對比vue2則是

1、在響應式原理上做了提升，proxy替代了object.definedProperty，文檔里作者沒提解決了什么問題；其實是解決 添加或刪除屬性時不能追蹤到的問題

2、最大的一個亮點是組合式API的使用，能更好的復用代碼邏輯；選項式API同時保留，作者建議小型項目可以使用，大型復雜的則使用組合式API；選項式API也是基于組合式API封裝而來的，vue3暴露了更多底層的方法；

3、typescript開發的，支持typescript那是必須的，多了類型校驗

4、性能優化方面：tree-shaking減小包體積，異步組件 代碼分割

5、文檔中作者多次提及，vue3自動對代碼進行優化，無需用戶在做多余的優化處理

6、diff方法優化，在節點上標記是哪種類型的更新，緩存靜態節點

再一點就是代碼組織方式上定義屬性、方法、事件的一些區別

1、選項式API。this指向當前組件實例

import { defineComponent } from 'vue'export default defineComponent({// 啟用了類型推導props: {name: String,id: [Number, String],msg: { type: String, required: true },metadata: null},mounted() {this.name // 類型：string | undefinedthis.id // 類型：number | string | undefinedthis.msg // 類型：stringthis.metadata // 類型：any}
})

2、組合式API。沒有this

<script setup>
import { ref, onMounted } from 'vue'onMounted(() => {console.log(`the component is now mounted.`)
})const count = ref(0)function increment() {count.value++
}
</script><template><button @click="increment">{{ count }}</button>
</template>

<script>
import { ref } from 'vue'export default {setup(props, { attrs, slots, emit, expose }) {...}
}export default {setup() {const count = ref(0)// 返回值會暴露給模板和其他的選項式 API 鉤子return {count}},mounted() {console.log(this.count) // 0}
}
</script><template><button @click="count++">{{ count }}</button>
</template>

組合式API離不開setup這個函數，這個函數是在beforeCreate之前就調用了；setup()?鉤子是在組件中使用組合式 API 的入口。

我的學習習慣更喜歡看完全局了解大概，再逐一進行深究。