Vue3 Composition API教程

前言

   vue3目前已经发布了alpha版本，除了服务端渲染，其它工作已经全部完成。尤大大也升级了vue-loader，提供了一个可以使用.vue组件的测试模板。vue3最大的改变是加入了这个灵感来源于React Hook的Composition API（组成API），这个API将对vue编程产生了根本性变革，但是vue3还是兼容vue2的Options API。除此之外，还引入了一些不兼容修改，具体可查看Vue3已合并的RFC。本文并不会全面介绍vue3的新特效，只会着重与vue3的核心——Composition API。

小试牛刀

先看一下基础例程：

<template>
  <button @click="increment">
    Count is: {{ state.count }}, double is: {{ state.double }}
  </button>
</template>

<script>
import { reactive, computed } from 'vue'

export default {
  setup(props, context) {
    const state = reactive({
      count: 0,
      double: computed(() => state.count * 2)
    })
    
    function increment() {
      state.count++
    }
    
    return {
      state,
      increment
    }
  }
}
</script>

  从上面的基础例程可以看到，vue3的.vue组件大体还是和vue2一致，由template``、script和style组成，作出的改变有以下几点：

• 组件增加了setup选项，组件内所有的逻辑都在这个方法内组织，返回的变量或方法都可以在模板中使用。
• vue2中data、computed等选项仍然支持，但使用setup时不建议再使用vue2中的data灯选项。
• 提供了reactive、computed、watch、onMounted等抽离的接口代替vue2中data等选项。