簡單對比 Vue2.x 與 Vue3.x 響應式
Vue2 使用Object.defineProperty劫持對象的屬性
Vue3 使用Proxy 直接代理對象
由於Object.defineProperty只能劫持對象屬性，需要遍歷對象的每一個屬性，如果屬性值也是對象，就需要遞歸進行深度遍歷。但是 Proxy 直接代理對象， 不需要遍歷操作
Fragment
在 Vue2.x 中， template中只允許有一個根節點
但是在 Vue3.x 中，你可以直接寫多個根節點，
Teleport
Teleport和Vue2中的Solt類似，但是不同的點在於渲染的 DOM 結構不嵌套在組件的 DOM 中
- 舉個栗子
我們實際開發中經常會在類似的情形下使用到 Dialog ，此時Dialog就被渲染到一層層子組件內部，處理嵌套組件的定位、z-index和樣式都變得困難。這時候我們就可以用到Teleport
首先在index.html中定義一個供掛載的元素
定義一個Dialog組件Dialog.vue, 留意 to 屬性， 與上面的id選擇器一致
然后使用這個Dialog組件
Dom 渲染效果如下
Composition API
- setup( )
Vue3.x 新增的一個選項， 他是組件內使用 Composition API的入口
reactive、ref 與 toRefs
ref ：主要用來處理 js 基本類型 如number string ，也能處理對象單用起來比較復雜
reactive ：用於對象的雙向綁定 ，但是不能代理基本類型，例如字符串、數字、boolean 等
toRefs：可以將reactive()創建出來的響應式對象，轉換為普通對象，只不過這個對象上的每個屬性節點，都是ref()類型的響應式數據
生命周期鈎子
Watch
如果對您有所幫助，歡迎您點個關注，我會定時更新技術文檔，大家一起討論學習，一起進步。
