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

一、迎接 Vue 3.0
1. 簡介















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

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

2. 新特性

? 重點(diǎn)關(guān)注：

    更快更省

    Object.defineProperty ——> Proxy

    重構(gòu) Virtual DOM

    完全的TypeScript

    團(tuán)隊(duì)開發(fā)更輕松

    架構(gòu)更靈活，閱讀源碼更輕松

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

    Composition API（組合式API）

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

    更好的邏輯復(fù)用與代碼組織

    更好的類型推導(dǎo)

3. 參考資源

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

二、初始化項(xiàng)目

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

    npm -v
    nrm ls


    安裝@vue/cli

    npm install @vue/cli -g


    創(chuàng)建項(xiàng)目

    vue create 項(xiàng)目名


    在項(xiàng)目中安裝 vue-next插件，試用Vue3 beta

    vue add vue-next


    項(xiàng)目變化

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

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


    啟動(dòng)項(xiàng)目

    npm run serve


? 補(bǔ)充：

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

三、setup函數(shù)

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

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

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

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

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



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

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



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

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

? reactive()函數(shù)接收一個(gè)普通對(duì)象，返回該普通對(duì)象的響應(yīng)式代理對(duì)象

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

? 步驟：

    按需導(dǎo)入 reactive 函數(shù)

    import { reactive } from 'vue'


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

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

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


2. ref

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

    基本用法
    在模板中訪問時(shí)，無需通過.value屬性，它會(huì)自動(dòng)展開
    在reactive對(duì)象中訪問時(shí)，無需通過.value屬性，它會(huì)自動(dòng)展開

3. computed

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

    只讀的計(jì)算屬性
    可讀可寫的計(jì)算屬性

4. readonly

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

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

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

6. watchEffect

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

? 檢查一個(gè)值是否為一個(gè) ref 對(duì)象。
2. isReactive

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

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

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

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

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

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

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

    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ù)來實(shí)現(xiàn)，功能類似 vue 2.x中的 provide/inject

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

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

八、模板 Refs

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

? 步驟：

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

作者：Vam的金豆之路

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

我的微信：maomin9761

微信公眾號(hào)：前端歷劫之路