一、初入門
- 通過CDN <script src="https://unpkg.com/vue@next"></script>
- 通過腳手架Vite 或者vue-cli搭建
npm init vite-app hello-vue3 # OR yarn create vite-app hello-vue32
npm install -g @vue/cli # OR yarn global add @vue/cli vue create hello-vue3
二、新增的知識點
- Composition API
- Teleport
- Fragments
- Emits Component Option
- createRender
- SFC相關的API、CSS變量
三、更改點
1.v-for組件陣列參考
在Vue 3中，這種用法將不再在中自動創建數組$refs。要從單個綁定中檢索多個引用，請綁定ref到提供更大靈活性的函數（這是一個新功能）
2.異步組件（與2.0的異同點）
defineAsyncComponent 為異步組件，component選項重命名為loader,加載程序本身不接收resolve和reject,必須返回promise。
3.枚舉屬性
普通的非布爾屬性如何不同地強制轉換成“枚舉屬性”。
在3.x中，null還是undefined應該用來顯式刪除屬性。
4.$attrs包括class&style
$attrs現在包含所有傳遞給組件的屬性，包括class和style。
inheritAttrs: false vue2中不會添加到根元素，與根元素的樣式分開5.$children實例屬性已從vue3.0刪除。
6.自定義指令
創建自定義指令：其中定義了組件的生命周期方法。
const MyDirective = {
beforeMount(el, binding, vnode, prevVnode) {},
mounted() {},
beforeUpdate() {}, // new
updated() {},
beforeUnmount() {}, // new
unmounted() {}
}
7.自定義元素互操作
自定義元素白名單現在在模板編譯期間執行，應通過編譯器選項進行配置。
v-is 類似:is，其值為js字符串文字。
一些HTML元素，比如<ul>，<ol>，<table>和<select>有什么元素可以在其內部出現的限制，以及一些元素，如<li>，<tr>和<option>只能出現某些其他元素中。
8.數據選項
data中定義中，只能僅使用function,沒有直接傳入的對象。
Mixin合並行為更改：合並的數據將是淺合並。
9.emits選項
用途：可以定義子組件發出的事件
10. Event API
vue3中的$on、$off、$once被刪除。vue2中有事件中心eventHub
11.filter
vue3中filter已停止使用，但是使用全局過濾器中可使用 app.config.globalProperties.$filter進行定義
12.Fragment(片段)
vue3中支持多個根組件。
13.功能組件
單一文件組件(SFC)，
14.全局API
createApp返回一個應用程序實例。
Vue.prototype取代的是config.globalProperties、provide/inject、掛載應用程序系列。
15.Global API Tree shaking
Tree shaking：“消除死代碼”的術語，消除無用的js代碼。
import { nextTick } from 'vue'
nextTick(() => {
// something DOM-related
})
16.內部模板屬性
inline-template 已被廢除。
17.key屬性
vue3中，key在v-if/v-else/v-else-if分支上不再需要s,因為會自動生成唯一的key。
vue2中，template標記不能包含key，key放在其每個子元素上。vue3中可以將其放在template上。
18.鍵碼修飾符
v-on不再支持使用數字（keyCodes）,vue3中使用kebab-case名稱用於用作修飾符的任何鍵。
19.render函數
vue2接收h作為參數，現在h全局導入，
20.this.$scopedSlots已刪除
21.過渡組的變化，命名和transition-group
22.v-on.native修飾符已經刪除
23.v-bind.sync
vue3中，v-model中，自定義組件等效於傳遞modelValue,並發出update:modelValue事件。
v-model的修飾符，vue3中除了.trim，還可以自定義修飾符。
24.v-if與v-for用於同一個元素的時候，vue3中v-if則優先級高於v-for.
25.v-bind合並行為
vue3中如果v-bind定義了單個屬性又定義了相同的單個屬性，則綁定的順序決定如何合並他們。
26.監聽數組
用watch監聽數組，回調僅在替換數組時觸發。如果觸發突變，則deep:true.
watch: {
bookList: {
handler(val, oldVal) {
console.log('book list changed')
},
deep: true
},
}
四、composition API
對於邏輯復雜的代碼，我們按照邏輯關注點進行分類。關注點進行分離，可將不同的邏輯寫成不同的js功能模塊，將復用的邏輯提取出來。
setUp組件選項，在組件創建之前完成，一旦傳入pros,將為入口點。
1.reactive variables與ref :ref接受參數並將其包裝在具有value屬性的對象中。
2.mounted=>onMounted(事件的名稱)
3.watch=>接收三個參數，第一個為參數名，第二個為新舊值的回調參數。
4.computed屬性=>computed(()=>{})
=====================================setUp===============================
1.有兩個參數（props,context）
props有實時性，而toRefs通過數據結構，拿到props的值。
context是沒有實時性，傳入的參數（attrs,solts,emit）
return 返回對象、渲染函數。
=====================================生命周期掛鈎==========================
setUp中，可以直接寫beforeCreated和created的事件。
直接使用provide、inject。reactive、readonly只讀。
五、teleport
作用：可以控制在哪里顯示所包含的DOM值。