嚐鮮Vue3之二：最重要的變化CompositionApi

時間 2019-11-08

標籤嚐鮮 vue3 vue 之二最重要變化 compositionapi 简体版

原文原文鏈接

Mixins
高階組件 (Higher-order Components, aka HOCs)
Renderless Components (基於 scoped slots / 做用域插槽封裝邏輯的組件但三者都不是很是的理想，主要問題存在
模板數據來源不清晰, 譬如mixin光看模板很難分清一個屬性是哪裏來的。
命名空間衝突
性能問題。譬如HOC須要額外的組件邏輯嵌套會致使無謂的性能開銷。

可是我更在乎的是對於邏輯的組合這種原始的編程行爲我不得不引入其餘概念來處理。固然這個也是爲何不少從java轉過來的架構師更喜歡react的緣由。vue算是笑着進去哭着出來的語言。入門好像很容易看看helloworld就能夠工做了，但一遇到問題就須要引入一個新概念。不像React函數即組件那麼清爽天然。java

動機

首先先看一下react

const App = {
            template: ` <button @click='click'>{{message}}</button> `,
            data() {
                return {
                    message: 'Hello Vue 3!!'
                }
            },
            methods: {
                click() {
                    console.log('click ....', this.message)
                    this.message = this.message.split('').reverse().join('')
                }
            }
        }
        let vm = Vue.createApp().mount(App, '#app')
複製代碼

options api源代碼位置git

經典的Vue API能夠概括爲options API，能夠理解爲基於配置的方式聲明邏輯的API。啥意思基本是已定義爲基礎的。想想vue2的helloworld是否是好像只是完成了幾個簡單的定義就能夠實現功能。我認爲這個也是爲何vue那麼流行的緣由對於描述通常的邏輯的確很是簡單。固然這也和尤大神是從設計師出身有很大的關係。別讓了css和html語言是徹頭徹尾的定義性代碼。github

可是一旦業務邏輯複雜的話這種表達方式就會存在必定問題。由於邏輯一旦複雜你不能給他寫成一坨，必需要考慮如何組織，你要考慮抽取邏輯中的共用部分考慮複用問題，否則程序將變成很是難以維護。上文中已經提到了哪三種複用方式一方面來說須要由於全新的概念另外確實編程體驗太差還有性能問題。編程

CompositionAPI的靈感來源於React Hooks的啓發(這個是尤大認可的)。好的東西須要借鑑這個你們不要鄙視鏈。使用函數組合API能夠將關聯API抽取到一個組合函數該函數封裝相關聯的邏輯，並將須要暴露給組件的狀態以響應式數據源的形式返回。api

實戰

好了上代碼，第一段邏輯是尤大的邏輯鼠標位置監聽邏輯數組

// 尤大神的經典例子 鼠標位置偵聽邏輯 
    function useMouse() {
            const state = reactive({
                x: 0,
                y: 0
            })
            const update = e => {
                state.x = e.pageX
                state.y = e.pageY
            }
            onMounted(() => {
                window.addEventListener('mousemove', update)
            })
            onUnmounted(() => {
                window.removeEventListener('mousemove', update)
            })
            return toRefs(state)
        }

複製代碼

咱們還想組合另一段邏輯好比隨時刷新的時間邏輯

function useOtherLogic() {
            const state = reactive({
                time: ''
            })
            onMounted(() => {
                setInterval(() => {
                    state.time = new Date()
                }, 1000)
            })
            return toRefs(state)
        }
複製代碼

在實際的工做中咱們能夠認爲這兩個邏輯可能被不少組件複用，想一想你要是用mixin和hoc你將多麼無所是從。可是利用CompositionAPI，咱們只須要把他組合並暴露 like this

const MyComponent = {
            template: `<div>x:{{ x }} y:{{ y }} z:{{ time }} </div>`,

            setup() {
                const {
                    x,
                    y
                } = useMouse()
                // 與其它函數配合使用
                const {
                    time
                } = useOtherLogic()

                return {
                    x,
                    y,
                    time
                }
            }
        }
        createApp().mount(MyComponent, '#app')
複製代碼

呃呃這個好像就是react hooks 不要緊啦好用就能夠啦。。。完整的例子歡迎star

快速更新中.....

嚐鮮Vue3之二：最重要的變化CompositionApi

目錄

概念

回顧歷史

動機

實戰

目錄