08-Vue3.0源码阅读之Composition API探究（上）

「这是我参与2022首次更文挑战的第24天，活动详情查看：2022首次更文挑战」。

Composition API有哪些

Vue的Composition API有setup、生命周期钩子、getCurrentInstance、provide/inject等，下图是官方列出的相对来说比较全的一张Composition API展示表。

Composition API 是什么

那么，什么是Composition API呢？

Vue2.0中的代码组织是通过创建Vue组件，其中界面中重复的部分以及其功能会按照模块被提取为可重用的代码段，当我们的业务逻辑过于复杂，就会造成代码及其难以调试，Vue官方有一张非常经典的 图，下示：

3.0为了解决这种情况，降低代码复杂度，增强维护性以及逻辑复用性，为Vue框架增加了Composition API的设计（Composition API 有点像React中的hooks，也有点像函数式编程）。

从另外的方面来讲，这样子的组织形式，也更便于强类型校验如ts等的引入。

体验Composition API

我们在前面的examples文件中新增一个03-composition.html文件，实现一个和patch.html部分相同的功能文件的代码。

reactivity

reactivity在实际代码中，我们只需要通过Vue中的一个ref方法来定义变量，就可以创建一个reactivity的类型变量，代码示例如下：

import { ref } from 'vue'

const counter = ref(0)

ref 接收参数并将其包裹在一个带有 value property 的对象中返回，然后可以使用该 property 访问或更改响应式变量的值,代码示例如下：

import { ref } from 'vue'

const counter = ref(0)

console.log(counter) // { value: 0 }
console.log(counter.value) // 0

生命周期钩子

同样的我们可以在setup中注册生命周期钩子，Vue在新版本中道出了几个新函数，其名称和原有生命周期钩子相同，但需要增加一个on的前缀，例如 onMounted

代码示例：

import { onMounted } from 'vue'

setup (props) {
  onMounted(() => {}) // 调用 mounted
}

属性和上下文

在新版本中当我们需要定义变量的时候，我们可以直接在setup中定义出来，然后return出去即可在template中 使用。同时setup中包含两个参数，props和ctx，props是入参，ctx是{emit, slots, attrs}。

完整版本代码：

<div id="app">
  <h1>vue3 Composition</h1>
  <p>{{counter}}</p>
  <comp></comp>
</div>
<script src="../dist/vue.global.js"></script>
<script>
  // vue2: new Vue({})
  // 变化1:函数创建实例
  // vue3 createApp({})
  const app = Vue.createApp({
    setup(props, { emit, slots, attrs }) {
      const counter = Vue.ref(0)
      Vue.onMounted(() => {
        setInterval(() => {
          count.value++
        }, 1000)
      })
      return {
        counter
      }
      return Vue.h('div', [h('h1'), 'XXX'])
    }
  })
  // 变化2:实例方法
  app.component('comp', {
    template: '<div>1212</div>'
  })
  // 变化3: 挂载mount
  app.mount('#app')
</script>