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

一、迎接 Vue 3.0
1. 簡介















? Vue.js 作者兼核心開發(fā)者尤雨溪宣布 Vue 3.0 進入 Beta 階段。

    已合并所有計劃內(nèi)的 RFC
    已實現(xiàn)所有被合并的 RFC
    Vue CLI 現(xiàn)在通過 vue-cli-plugin-vue-next 提供了實驗性支持

2. 新特性

? 重點關注：

    更快更省

    Object.defineProperty ——> Proxy

    重構 Virtual DOM

    完全的TypeScript

    團隊開發(fā)更輕松

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

    可以獨立使用Vue內(nèi)部模塊

    Composition API（組合式API）

    一組低侵入式的、函數(shù)式的 API

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

    更好的類型推導

3. 參考資源

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

二、初始化項目

    系統(tǒng)環(huán)境

    npm -v
    nrm ls


    安裝@vue/cli

    npm install @vue/cli -g


    創(chuàng)建項目

    vue create 項目名


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

    vue add vue-next


    項目變化

    import { createApp } from 'vue';
    import App from './App.vue'

    createApp(App).mount('#app')


    啟動項目

    npm run serve


? 補充：

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

三、setup函數(shù)

? setup 函數(shù)是一個新的組件選項。作為在組件內(nèi)使用 Composition API 的入口點。
1. 調(diào)用時機

? setup 函數(shù)會在 beforeCreate 鉤子之前被調(diào)用
2. 返回值

? 如果 setup 返回一個對象，則對象的屬性可以在組件模板中被訪問
3. 參數(shù)

? 第一個參數(shù)為 props，接收當前組件props選項的值，即獲取父組件傳遞過來的參數(shù)

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



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

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



? 注：在 setup() 函數(shù)中無法訪問 this
四、響應式系統(tǒng)API

? Vue 3.0提供的一組具有響應式特性的函數(shù)式API，都是以函數(shù)形式提供的
1. reactive

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

? 簡單來說，就是用來創(chuàng)建響應式的數(shù)據(jù)對象，等同于vue 2.x 的 Vue.observable()函數(shù)

? 步驟：

    按需導入 reactive 函數(shù)

    import { reactive } from 'vue'


    調(diào)用 reactive 函數(shù)，創(chuàng)建響應式數(shù)據(jù)對象

    setup() {
         // 創(chuàng)建響應式數(shù)據(jù)對象
        const data = reactive({count: 0})

         // 將響應式數(shù)據(jù)對象暴露出去
        return data;
    }


2. ref

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

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

3. computed

? computed() 函數(shù)用來創(chuàng)建計算屬性，函數(shù)的返回值是一個 ref 的實例

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

4. readonly

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

? watch() 函數(shù)用來監(jiān)視數(shù)據(jù)的變化，從而觸發(fā)特定的操作，等同于 vue 2.x中的 this.$watch

    監(jiān)視單個數(shù)據(jù)源
    監(jiān)視多個數(shù)據(jù)源
    取消監(jiān)視
    清除無效的異步任務

6. watchEffect

? watchEffect()函數(shù)接收一個函數(shù)作為參數(shù)，并立即執(zhí)行該函數(shù)，同時響應式追蹤其依賴，并在其依賴變更時重新運行該函數(shù)。
五、響應式系統(tǒng)工具集
1. isRef

? 檢查一個值是否為一個 ref 對象。
2. isReactive

? 檢查一個對象是否是由 reactive 創(chuàng)建的響應式代理。
3. isReadonly

? 檢查一個對象是否是由 readonly 創(chuàng)建的只讀代理。
4. isProxy

? 檢查一個對象是否是由 reactive 還是 readonly 方法創(chuàng)建的代理。
5.unref

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

? toRef()函數(shù)用來將 reactive 對象的一個屬性創(chuàng)建為一個 ref，并且這個 ref 具有響應性，可以被傳遞。
7. toRefs

? toRefs()函數(shù)用來將 reactive 對象創(chuàng)建為一個普通對象，但該普通對象的每個屬性都是一個 ref，并且這個 ref 具有響應性，可以被傳遞。
六、生命周期鉤子函數(shù)

? Vue 3.0 中的生命周期函數(shù)和 Vue 2.x 相比做了一些調(diào)整和變化，對應關系如下：

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

? 這些生命周期鉤子函數(shù)只能在 setup() 函數(shù)中使用
七、依賴注入

? 依賴注入就是祖先組件向后代組件傳遞數(shù)據(jù)，使用provide() 和 inject() 函數(shù)來實現(xiàn)，功能類似 vue 2.x中的 provide/inject

? 這兩個函數(shù)只能在 setup() 函數(shù)中使用：

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

八、模板 Refs

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

? 步驟：

    在 setup() 中創(chuàng)建一個 ref 對象并返回它
    在頁面上為元素添加 ref 屬性，并設置屬性值與創(chuàng)建的 ref 對象的名稱相同
    當頁面渲染完成后，可以通過該 ref 對象獲取到頁面中對應的DOM元素

作者：Vam的金豆之路

主要領域：前端開發(fā)

我的微信：maomin9761

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