1.setup

　　setup的兩個傳值 : 父傳子 , 子傳父 , 父後代

2.ref函數  

• isRef: 檢查一個值是否為一個 ref 對象

　　vue2和vue3響應式的原理(數據攔截)

3.reactive函數

• isReactive: 檢查一個對象是否是由 reactive 創建的響應式代理

ref與reactive的區別 

• 從定義數據角度對比：

  • ref用來定義：基本類型數據。

  • reactive用來定義：對象（或數組）類型數據。

  • 備註：ref也可以用來定義對象（或數組）類型數據, 它內部會自動通過reactive轉為代理對象。

• 從原理角度對比：

  • ref通過Object.defineProperty()的get與set來實現響應式（數據劫持）。

  • reactive通過使用Proxy來實現響應式（數據劫持）, 並通過Reflect操作源對象內部的數據。

• 從使用角度對比：

  • ref定義的數據：操作數據需要.value，讀取數據時模板中直接讀取不需要.value。

  • reactive定義的數據：操作數據與讀取數據：均不需要.value。

4.計算屬性

5.監視屬性watch

6.watchEffect函數

 7.生命周期

8.hook函數 [ 很重要 ]

9.toRef和toRefs

10.shallowReactive 和 shallowRef

11.readonly 和 shallowReadonly

• isReadonly: 檢查一個對象是否是由 readonly 創建的只讀代理

12.toRaw和markRaw

13.customRef [ 實現防抖 ]

14.響應式數據做判斷 : 

• isRef: 檢查一個值是否為一個 ref 對象

• isReactive: 檢查一個對象是否是由 reactive 創建的響應式代理

• isReadonly: 檢查一個對象是否是由 readonly 創建的只讀代理

• isProxy: 檢查一個對象是否是由 reactive 或者 readonly 方法創建的代理

15.Teleport

16.Suspense

全局API的轉移

• Vue 2.x 有許多全局 API 和配置。

  • 例如：註冊全局組件、註冊全局指令等。

    //註冊全局組件
    Vue.component('MyButton', {
      data: () => ({
        count: 0
      }),
      template: '<button @click="count++">Clicked {{ count }} times.</button>'
    })
    ​
    //註冊全局指令
    Vue.directive('focus', {
      inserted: el => el.focus()
    }

• Vue3.0中對這些API做出了調整：

  • 將全局的API，即：Vue.xxx調整到應用實例（app）上

    2.x 全局 API（Vue）	3.x 實例 API (app)
    Vue.config.xxxx	app.config.xxxx
    Vue.config.productionTip	移除
    Vue.component	app.component
    Vue.directive	app.directive
    Vue.mixin	app.mixin
    Vue.use	app.use
    Vue.prototype	app.config.globalProperties

2.其他改變

• data選項應始終被聲明為一個函數。

• 過度類名的更改：

  • Vue2.x寫法

    .v-enter,
    .v-leave-to {
      opacity: 0;
    }
    .v-leave,
    .v-enter-to {
      opacity: 1;
    }

  • Vue3.x寫法

    .v-enter-from,
    .v-leave-to {
      opacity: 0;
    }
    ​
    .v-leave-from,
    .v-enter-to {
      opacity: 1;
    }

• 移除keyCode作為 v-on 的修飾符，同時也不再支持config.keyCodes

• 移除v-on.native修飾符

  • 父組件中綁定事件

    <my-component
      v-on:close="handleComponentEvent"
      v-on:click="handleNativeClickEvent"
    />

  • 子組件中聲明自定義事件

    <script>
      export default {
        emits: ['close']
      }
    </script>

• 移除過濾器（filter）

　　　　過濾器雖然這看起來很方便，但它需要一個自定義語法，打破大括弧內表達式是 “只是 JavaScript” 的假設，這不僅有學習成本，而且有實現成本！建議用方法調用或計算屬性去替換過濾器。

本文來自博客園，作者：楊建鑫，轉載請註明原文鏈接：https://www.cnblogs.com/qd-lbxx/p/16275261.html