3分钟带你体验Vue3.0

最近，Vue官方发布了 Composition API RFC。有关于Vue3.0 Function Base组件相关讨论正如火如荼。虽然Vue3.0还未发布，但是 Vue官方发布了关于 Composition API的官方插件，使广大用户可以在Vue2.x中享受 Function Base 带来的新体验。下面我会在一个简单的demo中介绍Composition API使用方法。

安装和使用

yarn add @vue/composition-api

等待composition-api包安装完成后，我们在项目入口文件中加入Composition API。

import Vue from "vue"
import CompositionApi from "@vue/composition-api"
Vue.use(CompositionApi)

setup函数

按照官方给出的说法，setup函数是一个新的Vue组件选项，是用于在组件中使用Composition API的入口。

setup函数在组件初始化了props之后，created之前调用，这时候我们才能通过setup来传递props。

绑定数据(data)

reactive函数接受一个对象，并返回该对象的代理，通过reactive这种方式我们可以绑定代理对象。

import {reactive} from "@vue/composition-api"
export default {
    setup(props) {
        let vue = react({version:'2.x'})
        vue.version = '3.x'
    }
    return {
        vue
    }
}

ref是CompositionAPI引入的新概念。作用是使访问响应式的变量不依赖于实例的this。如果使用了ref，我们访问响应式的变量时使用.value而不是从this中获取,其底层是采用reactive方法实现。

import {ref} from "@vue/composition-api"
export default {
    setup() {
        const count = ref(0)//count初始值为0，会相应变化
        count.value = 10;//设置count值为10，使用.value形式
        return {
            count//必须将count return 回去
        }
    }
}

绑定生命周期函数

可以使用导入的onXXX的形式注册生命周期函数，举个例子：

import {onCreated,onMounted} from "@vue/composition-apai"
export default {
    setup() {
        onMounted(()=>{
            console.log('mounted被触发')
        })
        ///...其他类似
    }
}

注意:以下生命周期函数用setup函数替代：

beforeCreated
created

绑定方法(methods)

在Composition API中，我们使用普通的函数定义方法，这样可以最大程度的增加复用性。例如：

<template>
<button @click="add">click me!</button>
</template>
<script>
export default {
    setup() {
        function add() {
            console.log('add被触发')
        }
        return {
            add//必须将函数return
        }
    }
}
</script>

外部属性(props)

定义props和原来的方式一样，props会通过参数的形式传入到setup函数中：

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

计算属性(computed)

计算属性可以使用Composition API提供的computed函数进行定义：

import {computed,ref} from "@vue/composition-apai"
export default {
    setup() {
        const a = ref(0)
        const b = ref(1);
        const total = computed(()=>a.value+b.value)
        return {
            a,
            b,
            totla
        }
    }
}

这样我们就定义好了一个计算属性total，total.value = a.value + b.value。

侦听器(watch)

在组件中添加watch监听我们可以采用Composition API提供的watch函数实现：

import {watch,ref} from "@vue/composition-apai"
export default {
    setup() {
        const count = ref(100);
        watch(()=>count.vlaue,()=>{
            console.log('count数值发生变化了')
        })
        const.value = 200;
        return {
            count
        }
    }
}

实例属性($refs)

在Composition API中使用ref特性获取组件实例或者dom节点，举个例子说明：

<template>
<div>
    <hello-world ref="helloWold"></hello-world>
    <button ref="btn"></button>
</div>
</template>
import {ref} from "@vue/composition-api"
export default {
    setup() {
        const helloWorld = ref(null);//helloworld组件实例
        const btn = ref(null);//button dom节点对象
        return {
            btn,
            helloWorld
        }
    }
}

综合例子

<template>
    <div>
        <button @click="increment" ref="btn">{{titleCount}}</button>
    </div>
</template>

<script>

import {onMounted,computed,ref,watch} from "@vue/composition-api"
export default {
  props:{
    prefix:String
  },
  setup(props) {
    const btn = ref(null);
    const count = ref(0);
    const title = ref(`${props.prefix},vue composition api`);
    const titleCount = computed(()=>title.value +':'+ count.value)
    onMounted(()=>{
      alert('mounted')
    })
    watch(()=>count.value,()=>alert('count改变了:'+count.value))
    function increment() {
      // eslint-disable-next-line no-console
      count.value++;
      // eslint-disable-next-line no-console
      console.log(btn.value);
    }

    return {
      btn,
      increment,
      title,
      count,
      titleCount
    }
  }
}
</script>

下图是运行效果：

image

总结

经过以上实践，总结Composition API以下特点：

优点：

使用简洁，方便，代码量小
函数特性，复用性强
容易做类型推导，方便IDE做出语法提示

缺点：

需要额外加载composition-api包文件，增加了打包后的文件体积，对网页性能有一定影响
增加了一定的学习成本