## 初識Composition API（組合API） 1、組件中所用到的數據和、方法等，都可以放在setup中 2、setup函數存在兩種返回值： 1）、當返回值是對象，則對象中的屬性、方法均可在模板中直接使用； 2）、當返回值是渲染函數，則可以自定義渲染內容，并以該內容為準 3、注意問題： 1）、盡量不要與Vue2.x配置混用 * Vue2.x配置data、methods、computed...都可以訪問到setup中的屬性和方法；反之，Vue3.x的setup訪問不到Vue2.x中的數據和方法； * 在混用期間，如果Vue.2x與Vue3.x中存在重名，則以Vue3.x的setup優先。 2）、setup不能是一個async函數，因為返回值不再是return的對象，而是Promise，模板自然看不到return對象中的屬性。 ## ref函數 * 作用：定義一個響應式數據，const xxx= ref(initVal)；稱之為引用對象（ref對象） * 基本類型則通過xxx.value = xxx，基本類型響應式通過Object.defineProperty()的getter和setter完成的； * 引用類型則通過xxx.value.xxx = xxx，通過一個新函數reactive函數完成（原理采用Proxy，即封裝在reactive函數中）； * 模板中使用，則直接xxx即可。 * 在ref定義對象，其在原型上也求助于Proxy，故也可以定義響應式對象，但是不建議，建議采用reactive。  ## reactive函數 * 作用：定義一個引用類型響應式數據（基本類型則是通過ref函數）； * 基于ES6的Proxy實現，通過代理對象操作源對象內部數據都是響應式的； * 定義引用類型（對象、數組）數據，返回一個代理器對象proxy對象； * 可以檢測到深層次對象（Object、Array）變化； ## 總結ref函數和Reactive函數 很多場景建議采用reactive定義數據，得到一個代理對象，通過代理對象操作原對象，并且在Vue3.x中可以 捕獲到數據更新（數據劫持），如： ``` js let person = reactive({ // 基本類型和引用類型 ... }) ``` ## 響應式原理 ### 在這里簡單回顧一下Vue2.x響應式原理 * 對象類型：通過Object.defineProperty()對屬性的讀取和修改進行攔截（數據劫持）； * 數組類型：通過重寫更新數組的一些列方法實現攔截，對數組方法進行二次封裝。 * 缺點：對對象新增的屬性、刪除屬性；通過下標修改數組時，則監聽不到變化導致數據更新了，頁面沒有重新渲染。 * 改進：借助this.$set()或者Vue.set()；刪除this.$delete()或者Vue.delete()；數組下標修改還有另一個方法splice(index,1,value)。 ### 在這里簡單回顧一下Vue3.x響應式原理 * 簡單的體驗一下新方法window.Proxy ``` js let person = {} const p = new Proxy(person,{ get(target,key){ // target即是person，key即是讀取的屬性 // 監聽到數據被讀取，可以干點啥 return target[key] }, // 更新的調用，Vue3增加：對象新增新的屬性也調用 set(target,key,value){ // value即是傳入修改的值 // 監聽到數據被更改，可以干點啥 target[key] = value }, // 比Vue2.x多的地方 deleteProperty(target,key){ // 監聽到target的key屬性被刪除，干點啥 return delete target[key] } }) ``` * 在了解一下反射對象Reflect，對源對象進行修改， 注：在Object.defineProperty(obj,'name',{})，在定義一個Object.defineProperty(obj,'name',{})，那代碼就直接報錯，不往下執行了，但是Reflect則可以，通過返回值為true則說明這個執行成功。 ``` js let obj = { name: 'zhangsan' } const r1 = Reflect.defineProperty(obj,'name',{ get(){ return 'lisi' } }) const r2 = Reflect.defineProperty(obj,'name',{ get(){ return 'wangwu' } }) console.log(r1,r2) // true,false ``` * Proxy改進，增強健壯性，Vue3.x雛形出來了 ``` js const p = new Proxy(person,{ get(target,key){ // target即是person，key即是讀取的屬性 // 監聽到數據被讀取，可以干點啥 return Reflect.get(target,key) }, // 更新的調用，Vue3增加：對象新增新的屬性也調用 set(target,key,value){ // value即是傳入修改的值 // 監聽到數據被更改，可以干點啥 Reflect.set(target,key,value) }, // 比Vue2.x多的地方 deleteProperty(target,key){ // 監聽到target的key屬性被刪除，干點啥 return Reflect.deleteProperty(target,key) } }) ``` ## 總結 有Vue2.x基礎的，學習Vue3.x的還是比較容易上手的，我認為可以先從Vue3.x的一些新的東西入手，其實就是解決了Vue2.x遺留的一些缺點。 最后從性能方面提升...