Vue 3.0 有哪些新特性值得我們提前瞭解

一、迎接 Vue 3.0

1. 簡介

​ Vue.js 作者兼核心開發者尤雨溪宣佈 Vue 3.0 進入 Beta 階段。

• 已合併所有計劃內的 RFC
• 已實現所有被合併的 RFC
• Vue CLI 現在通過 vue-cli-plugin-vue-next 提供了實驗性支持

2. 新特性

​ 重點關注：

• 更快更省

  Object.defineProperty ——> Proxy

  重構 Virtual DOM

• 完全的TypeScript

  團隊開發更輕鬆

  架構更靈活，閱讀源碼更輕鬆

  可以獨立使用Vue內部模塊

• Composition API（組合式API）

  一組低侵入式的、函數式的 API

  更好的邏輯複用與代碼組織

  更好的類型推導

3. 參考資源

• https://github.com/vuejs/vue-next
• https://vue-composition-api-rfc.netlify.app/

二、初始化項目

1. 系統環境

   npm -v
   nrm ls
   

2. 安裝@vue/cli

   npm install @vue/cli -g
   

3. 創建項目

   vue create 項目名
   

4. 在項目中安裝 vue-next插件，試用Vue3 beta

   vue add vue-next
   

5. 項目變化

   import { createApp } from 'vue';
   import App from './App.vue'
   
   createApp(App).mount('#app')
   

6. 啓動項目

   npm run serve
   

​ 補充：

1. vue-devtools 暫不支持Vue 3.0
2. VSCode中安裝Vue 3 Snippets插件

三、setup函數

​ setup 函數是一個新的組件選項。作爲在組件內使用 Composition API 的入口點。

1. 調用時機

​ setup 函數會在 beforeCreate 鉤子之前被調用

2. 返回值

​ 如果 setup 返回一個對象，則對象的屬性可以在組件模板中被訪問

3. 參數

​ 第一個參數爲 props，接收當前組件props選項的值，即獲取父組件傳遞過來的參數

export default {
  props: {
    name: String,
  },
  setup(props) {
    console.log(props.name)
  },
}

​ 第二個參數爲context，接收一個上下文對象，該對象中包含了一些在vue 2.x 中需要通過 this 才能訪問到屬性

const MyComponent = {
  setup(props, context) {
    context.attrs
    context.slots
    context.emit
  }
}

​ 注：在 setup() 函數中無法訪問 this

四、響應式系統API

​ Vue 3.0提供的一組具有響應式特性的函數式API，都是以函數形式提供的

1. reactive

​ reactive()函數接收一個普通對象，返回該普通對象的響應式代理對象

​ 簡單來說，就是用來創建響應式的數據對象，等同於vue 2.x 的 Vue.observable()函數

​ 步驟：

1. 按需導入 reactive 函數

   import { reactive } from 'vue'
   

2. 調用 reactive 函數，創建響應式數據對象

   setup() {
        // 創建響應式數據對象
       const data = reactive({count: 0})
   
        // 將響應式數據對象暴露出去
       return data;
   }
   

2. ref

​ ref()函數接收一個參數值，返回一個響應式的數據對象。該對象只包含一個指向內部值的 .value 屬性

• 基本用法
• 在模板中訪問時，無需通過.value屬性，它會自動展開
• 在reactive對象中訪問時，無需通過.value屬性，它會自動展開

3. computed

​ computed() 函數用來創建計算屬性，函數的返回值是一個 ref 的實例

• 只讀的計算屬性
• 可讀可寫的計算屬性

4. readonly

​ readonly()函數接收一個對象（普通或響應式），返回一個原始對象的只讀代理對象

5. watch

​ watch() 函數用來監視數據的變化，從而觸發特定的操作，等同於 vue 2.x中的 this.$watch

• 監視單個數據源
• 監視多個數據源
• 取消監視
• 清除無效的異步任務

6. watchEffect

​ watchEffect()函數接收一個函數作爲參數，並立即執行該函數，同時響應式追蹤其依賴，並在其依賴變更時重新運行該函數。

五、響應式系統工具集

1. isRef

​ 檢查一個值是否爲一個 ref 對象。

2. isReactive

​ 檢查一個對象是否是由 reactive 創建的響應式代理。

3. isReadonly

​ 檢查一個對象是否是由 readonly 創建的只讀代理。

4. isProxy

​ 檢查一個對象是否是由 reactive 還是 readonly 方法創建的代理。

5.unref

​ 如果參數是一個 ref 則返回它的 value，否則返回參數本身。它是 val = isRef(val) ? val.value : val 的語法糖。

6. toRef

​ toRef()函數用來將 reactive 對象的一個屬性創建爲一個 ref，並且這個 ref 具有響應性，可以被傳遞。

7. toRefs

​ toRefs()函數用來將 reactive 對象創建爲一個普通對象，但該普通對象的每個屬性都是一個 ref，並且這個 ref 具有響應性，可以被傳遞。

六、生命週期鉤子函數

​ Vue 3.0 中的生命週期函數和 Vue 2.x 相比做了一些調整和變化，對應關係如下：

• beforeCreate -> 使用 setup()
• created -> 使用 setup()
• beforeMount -> onBeforeMount
• mounted -> onMounted
• beforeUpdate -> onBeforeUpdate
• updated -> onUpdated
• beforeDestroy -> onBeforeUnmount
• destroyed -> onUnmounted
• errorCaptured -> onErrorCaptured

​ 這些生命週期鉤子函數只能在 setup() 函數中使用

七、依賴注入

​ 依賴注入就是祖先組件向後代組件傳遞數據，使用provide() 和 inject() 函數來實現，功能類似 vue 2.x中的 provide/inject

​ 這兩個函數只能在 setup() 函數中使用：

• 在祖先組件中使用provide()函數向下傳遞數據
• 在後代組件中使用inject()函數獲取上層傳遞過來的數據

八、模板 Refs

​ 通過 ref()函數還可以引用頁面上的元素或組件，功能類似於 vue 2.x中的 vm.$refs

​ 步驟：

1. 在 setup() 中創建一個 ref 對象並返回它
2. 在頁面上爲元素添加 ref 屬性，並設置屬性值與創建的 ref 對象的名稱相同
3. 當頁面渲染完成後，可以通過該 ref 對象獲取到頁面中對應的DOM元素

---

作者：Vam的金豆之路

主要領域：前端開發

我的微信：maomin9761

微信公衆號：前端歷劫之路

---