Proxy資料檢視原理

Vue2中資料檢視如果是物件型別的,通過Object.defineProperty()的getter和setter來做到資料監視的;

　　Vue2中監視資料的弊端:

　　新增屬性,刪除屬性,介面不會更新.

　　直接通過下邊修改資料.介面不會更新.

Vue3中就不會出現上面的情況.

相比Vue2

打包大小減少41%

初次渲染快55%,更新渲染快133%

記憶體減少54%

使用Proxy代替defineProperty實現資料響應式

重寫虛擬DOM的實現和Tree-Shaking

建立Vue3專案(通過Vite來建立)

node版本:  14.16.3      npm版本:  6.14.13

npm create vite@latest vue3-demo --template vue

npm install

npm run dev

vue3中ref使用

參考: https://blog.csdn.net/weixin_47886687/article/details/112919563

keep-alive

<!-- 失活的元件將會被快取！-->

<keep-alive>

　　<component :is="currentTabComponent"></component>

</keep-alive>

Provide / Inject

使用一對provide和inject,無論元件層次有多深,父元件都可以作為其所有子元件的依賴提供者.

Props驗證

v-for 與 v-if 一同使用

可以把 v-for 移動到 <template> 標籤中來修正

<template v-for="todo in todos" :key="todo.name">

　　<li v-if="!todo.isComplete">

　　　　{{ todo.name }}

　　</li>

</template>

生命週期

beforeCreate

created

beforeMount

mounted

beforeUpdate

updated

beforeUnmount

unmounted

防抖和節流

詳見:  https://v3.cn.vuejs.org/guide/data-methods.html#%E6%96%B9%E6%B3%95

防抖：觸發高頻事件後n秒內函式只會執行一次，如果n秒內高頻事件再次被觸發，則重新計算時間.
使用場景：頻繁觸發、輸入框搜尋.
因為防抖的特性，一直執行最後一次的觸發，所以可以用於滑鼠移動確定最後一次移動的時候的座標位置.

節流：高頻事件觸發，但在n秒內只會執行一次，所以節流會稀釋函式的執行頻率.
使用場景：頻繁觸發、onrize，onscroll滾動條.
因為節流是監聽到第一次觸發事件後就執行，所以可以用來防止按鈕多次點選執行多次，且按照第一次點選的事件為準.

通過腳手架Vite建立專案:

npm init vite@latest my-vue-app --template vue