不知不覺的VUE3.0釋出已經很久了。
在B站上看了教學視屏 瞬間勾起的我濃厚的學習興趣。
https://www.bilibili.com/video/BV1yK4y1M7Fz?p=8&spm_id_from=pageDriver
Vue 3全新的Web開發建構工具Vite
Vite是Vue的作者尤雨溪開發的Web開發建構工具，它是一個基于浏覽器原生ES子產品導入的開發伺服器，在開發環境下，利用浏覽器去解析import，在伺服器端按需編譯傳回，完全跳過了打包這個概念，伺服器随啟随用。同時不僅對Vue檔案提供了支援，還支援熱更新，而且熱更新的速度不會随着子產品增多而變慢。在生産環境下使用Rollup打包。
Vite具有以下特點：
快速的冷啟動即時熱子產品更新（HMR，Hot Module Replacement）真正按需編譯Vite是在推出Vue 3的時候開發的，目前僅支援Vue 3.x，這意味着與Vue 3不相容的庫也不能與Vite一起使用。
與Vue CLI類似，Vite也提供用npm或者yarn來生成項目結構的方式。選擇一個目錄，打開指令提示視窗，依次執行下面的指令建構腳手架項目，并啟動項目。
如果使用yarn，則依次執行下面的指令：
由于Vite使用了浏覽器原生的ES子產品導入功能，但IE 11并不支援ES的子產品導入，是以基于Vite開發項目，浏覽器不能使用IE11，其他主流的浏覽器均支援ES子產品的子產品功能。
我建立了一個項目 結構如下
可以發現，Vite生成的腳手架項目的目錄結構與Vue CLI生成的項目目錄結構很類似，确實是這樣的，而且開發方式也基本相同。不過Vite項目的預設配置檔案是vite.config.js，而不是vue.config.js。
package.json檔案的内容如下所示：
這裡與Vue CLI不同地方在這裡：
"dev": "vite",
"build": "vite build"
體驗了一波非常棒，基本上都是秒啟動，改動代碼以後也是秒更新。
Vue 3采用Proxy資料劫持
Vue 2.x 利用 Object.defineProperty()，并且把内部解耦為 Observer, Dep, 并使用 Watcher 相連
Vue 在 3.x 版本之後改用 Proxy 進行實作
那麼他們之前有什麼優缺點呢？
1、Object.defineProperty() 的問題主要有三個：
不能監聽數組的變化
必須周遊對象的每個屬性
必須深層周遊嵌套的對象
數組的這些方法是無法觸發set的:push, pop, shift, unshift,splice, sort, reverse.
Vue 把會修改原來數組的方法定義為變異方法 (mutation method)
非變異方法 (non-mutating method):例如 filter, concat, slice 等，它們都不會修改原始數組，而會傳回一個新的數組。
Vue 的做法是把這些方法重寫來實作數組的劫持。
使用 Object.defineProperty() 多數要配合 Object.keys() 和周遊，，于是多了一層嵌套
必須深層周遊嵌套的對象
當一個對象為深層嵌套的時候,必須進行逐層周遊，直到把每個對象的每個屬性都調用 Object.defineProperty() 為止。 Vue 的源碼中這樣的邏輯----walk 方法.
2、Proxy：
Proxy 對象用于定義基本操作的自定義行為（如屬性查找，指派，枚舉，函數調用等）。
針對對象:針對整個對象,而不是對象的某個屬性
支援數組:不需要對數組的方法進行重載，省去了衆多 hack
嵌套支援: get 裡面遞歸調用 Proxy 并傳回
其他
針對對象
不需要對 keys 進行周遊。這解決Object.defineProperty() 的第二個問題.Proxy 是針對整個 obj 的。是以 obj 内部包含的所有的 key ，都可以走進 set。(省了一個 Object.keys() 的周遊)
另外 Reflect.get 和 Reflect.set 可以了解為類繼承裡的 super，即調用原來的方法
嵌套支援
Proxy 也是不支援嵌套的，這點和 Object.defineProperty() 是一樣的。是以也需要通過逐層周遊來解決。Proxy 的寫法是在 get 裡面遞歸調用 Proxy 并傳回
其它方面
優勢:Proxy 的第二個參數可以有 13 種攔截方法，比 Object.defineProperty() 要更加豐富,Proxy 作為新标準受到浏覽器廠商的重點關注和性能優化，相比之下 Object.defineProperty() 是一個已有的老方法。
劣勢:Proxy 的相容性不如 Object.defineProperty() (caniuse 的資料表明，QQ 浏覽器和百度浏覽器并不支援 Proxy，這對國内移動開發來說估計無法接受，但兩者都支援 Object.defineProperty()),不能使用 polyfill 來處理相容性
Vue3 的新特性(二) —— Composition-Api
Composition API : 一組低侵入式的、函數式的 API，它使我們能夠更靈活地「組合」元件的邏輯。
Composition API 的靈感來自于 React Hooks ，是比 mixin 更強大的存在。它可以提高代碼邏輯的可複用性，進而實作與模闆的無關性；同時函數式的程式設計使代碼的可壓縮性更強。另外，把 Reactivity 子產品獨立開來，意味着 Vue3.0 的響應式子產品可以與其他架構相組合。
如上圖，在較大元件的編寫中， Composition-Api 可以把複雜元件的邏輯抽地更緊湊，而且可以将公共邏輯進行抽取。
reactive() 函數接收一個普通的對象，傳回出一個響應式對象。
在Vue2.x的版本中，我們隻需要在 data() 中定義一個資料就能将它變為響應式資料，在 Vue3.0 中，需要用 reactive 函數或者 ref 來建立響應式資料。
使用響應式對象
ref() 函數可以根據給定的值來建立一個響應式的資料對象，傳回值是一個對象，且隻包含一個 .value 屬性。
用 ref 建立響應式對象
ref 的注意事項
在 setup() 函數内，由 ref() 建立的響應式資料傳回的是對象，是以需要用 .value 來通路；
而在 setup() 函數外部則不需要 .value ，直接通路即可。
可以在 reactive 對象中通路 ref() 函數建立的響應式資料。
新的 ref() 會覆寫舊的 ref() 。
watchEffect() 會立即執行傳入的函數，并響應式偵聽其依賴，并在其依賴變更時重新運作該函數。
停止偵聽
watchEffect() 使用時傳回一個函數，當執行這個傳回的函數時，就停止偵聽
composition-api 中的 watch 和 Vue2.x 中是一樣的，watch 需要偵聽資料，并執行它的偵聽回調。預設情況下初次渲染不執行。
watch 與 watchEffect 的不同
watch 初次渲染不執行
watch 偵聽的更具體
watch 可以通路偵聽資料變化前後的值
watch 偵聽多個資料源
在偵聽多個資料源時，把參數以數組的形式給 watch
在學習 Composition-Api 之前，我們需要先了解一下 setup() 函數。 setup() 是 Vue3 中的新增内容。它為基于 Composition API 的新特性提供了統一的入口。
在Vue3中，定義 methods、watch、computed、data資料 等都放在了 setup() 函數中
注意：在 setup() 函數中通路不到Vue的 this 執行個體
setup()函數會在created()生命周期之前執行。
setup() 函數的第一個參數是 props ，元件接收的 props 資料可以在 setup() 函數内通路到。
context 是 setup() 的第二個參數，它是一個上下文對象，可以通過 context 來通路Vue的執行個體 this 。