首先 創建項目 Vue3
Vue3 相較於Vue2 的6大亮點：
1 性能快。 2 按需編譯 體積更小 3 提供了組合API 類似於react 的React Hooks 4 更好的Ts支持 5 暴露了自定義渲染的API 6 更先進的組件。
使用Vue3 創建項目 1 webpack 2 Vue-cli 3 vite
什么是vite?
安裝vite :
npm install -g create-vite-app
創建Vue3項目：
create-vite-app projectName
安裝依賴運行項目：
cd projectName
npm install
npm run dev
組合API:
setup(){
}
函數是組合API的入口函數，通過導入ref實時監聽變量的變化。並且通過組合API可以初始化變量的值。 最后通過return 暴露出去對象或者方法。
eg:
首先導入ref:
其次，定義setup()函數：
ref函數的注意點：ref函數只能監聽簡單類型的變化，不能監聽復雜類型的變化 類似於（對象/數組等）
監聽復雜類型的變化可以使用reactive函數來實現。
eg:
最后實現的整體的業務邏輯封裝之后如下所示：
模塊化管理 封裝相關的功能函數並導出 之后再App.vue中導入使用：
組合API的本質及其使用：在使用過程中將Compisition API 數據和方法 注入到options API 的數據和方法當中。
setup函數執行時機以及注意點：
setup函數的執行時間，是在beforeCreate鈎子執行之前完成的。因此在setup函數中是無法使用data 和methods 的。並且為了避免錯誤的使用，直接將setup函數中的this修改成了undefined。
setup函數只能是同步的，不能夠是異步的。
reactive函數：是Vue3中提供的實現響應式數據的方法。
reactive函數必須傳入一個對象（json 或者 array類型的都可以），本質是將傳入的數據包裝成一個Proxy對象。
如果傳遞了其他的對象，默認情況下修改對象，界面不會自動更新，如果需要跟新，則需要重新賦值。
ref的深刻理解：
ref 和reactive的區別：
Vue如何判斷一個數據是否是ref類型的或者是reactive類型的：
由私有屬性無法訪問，因此如果要判斷一個類型是否是ref類型的或者是reactive類型的 可以通過導入函數isRef isReactive來實現：
遞歸監聽：
由於把每一層包裝成一個Proxy對象，因此十分的消耗性能。
非遞歸監聽：只能夠監聽第一層，不能夠監聽其他層。創建非遞歸的監聽的數據 (reactive 對應 shallowReactive) , (ref 對應於 shallowRef )
shallowRef使用的注意點：
可以通過triggerRef()方法實現ref 數據的主動的更新頁面數據。
shallowRef的本質：
toRaw方法：針對於reactive響應式數據的原始數據。
eg:
toRaw的主要使用特點：保存原始數據，只更新原始數據，並不修改UI界面。
獲取ref類型的原始數據的方式：通過toRaw 方法 由於包裝成了reactive方法 所以需要使用.value來獲取原始的數據。
通過markRaw來實現永遠都不會追蹤原始數據：
toRef方法：
ref()方法對某一個對象中的屬性進行操作：如果將對象中的某一個屬性變為響應式數據，修改響應式的數據時不會影響到原始數據的變化。
ref() 和 toRef() 方法的區別和聯系：
如果需要將某一個對象中的多個屬性變為響應式數據，可以采用toRefs()函數來實現。 只有一個屬性變為響應式數據的時候使用toRef()
import {toRefs } from 'vue';
setup(){
let obj = {name:"kkl",age:18};
let state = toRefs(obj);
// 使用toRef()實現屬性變為響應式。
// let name = toRef(obj,"name");
// let age = toRef(obj,'age');
function myFun（）{
state.name.value = "zs";
state.age.value = 22;
}
return { state,myFun}
}
可以將對象中的屬性全部變為響應式數據。