首先 建立專案 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}
}

可以將物件中的屬性全部變為響應式資料。