尝鲜Vue3之二：最重要的变化CompositionApi

全栈然叔
1,925 阅读4分钟

目录

上一篇我们介绍了如何下载并运行Vue3 Alpha源码。这一篇我们来尝鲜一下3.0版中最重要的一个RFC CompositionAPI。

概念

CompositionAPI被如果只是字面的意思可以被翻译成组合API。他以前的名字是Vue Function-based API ,我认为现在的名字更为达意。本质上CompositionAPI就是为了更为方便的实现逻辑的组合而生的。

回顾历史

Vue2如果要在组件中实现逻辑的符合，譬如所有按钮组件都要实现防抖，可选的方式大概有以下三个:

  • Mixins
  • 高阶组件 (Higher-order Components, aka HOCs)
  • Renderless Components (基于 scoped slots / 作用域插槽封装逻辑的组件 但三者都不是非常的理想，主要问题存在
  • 模板数据来源不清晰, 譬如mixin光看模板很难分清一个属性是哪里来的。
  • 命名空间冲突
  • 性能问题。 譬如HOC需要额外的组件逻辑嵌套 会导致无谓的性能开销。

但是我更在意的是对于逻辑的组合这种原始的编程行为我不得不引入其他概念来处理。当然这个也是为什么很多从java转过来的架构师更喜欢react的原因。vue算是笑着进去哭着出来的语言。入门好像很容易看看helloworld就可以工作了，但一遇到问题就需要引入一个新概念。不像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源代码位置

经典的Vue API可以归纳为options API，可以理解为基于配置的方式声明逻辑的API。啥意思基本是已定义为基础的。想一想vue2的helloworld是不是好像只是完成了几个简单的定义就可以实现功能。我认为这个也是为什么vue那么流行的原因 对于描述一般的逻辑的确非常简单。当然这也和尤大神是从设计师出身有很大的关系。别让了css和html语言是彻头彻尾的定义性代码。

但是一旦业务逻辑复杂的话这种表达方式就会存在一定问题。因为逻辑一旦复杂你不能给他写成一坨，必须要考虑如何组织，你要考虑抽取逻辑中的共用部分考虑复用问题，不然程序将变成非常难以维护。上文中已经提到了哪三种复用方式一方面来讲需要因为全新的概念另外确实编程体验太差还有性能问题。

CompositionAPI的灵感来源于React Hooks的启发(这个是尤大承认的)。好的东西需要借鉴这个大家不要鄙视链。使用函数组合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

快速更新中.....

目录

avatar
文章
阅读
粉丝