闪电五连鞭：Composition API原理深度剖析

上一篇文章谈了Vue3Composition API的应用实践，得到小伙伴们的广泛认可，链接如下：

又是一夜，这篇Composition-API实操还觉得短吗

作为一枚有追求的武者，我还是想从原理上给大家弹一弹到底为什么会有这些限制和约束，正所谓知其然知其所以然。

本文探索内容包括：

• composition和options如何做到和谐共存？
• setup中的this指向哪？
• setup的参数是什么？
• setup的执行时刻
• setup中的生命周期钩子是怎么实现的？

下面，正式开始表演闪电五连鞭，我们点到为止

第一鞭：composition和options如何做到和谐共存？

小右同学在vue3中引入composition api，起初很多人害怕它会影响我们一直熟悉的options写法，事实上两者可以共存，而且还很和谐，谁说年轻人不讲武德？小右这一拳明明是点到为止~

下面看一下vue3中如何两者和谐共存：

结论：到这里我们知道了vue3对setup和其他选项的处理逻辑：如果设置了setup则先调用它，随后再处理别的options。

但是现在的年轻人不讲武德，他们可能不按套路出拳，比如：

// data和setup中都定义了foo，那谁起作用哪？
createApp({
  data() {
    return {
      foo: 'foo'
    }
  },
  setup(props, ctx) {
    const foo = ref('foo in setup')      
    return { foo }
  }
}).mount('#app')

小右可不是假大师，自然会闪

第二鞭：setup中的this指向哪？

我们看看setup被调用时时怎么处理的：

结论：所以setup中的this就是它执行时的上下文，如果是esm方式打包，会是undefined；如果是单文件的方式运行，会是window；但是不管怎样都没有什么意义，所以请大家彻底忘了this吧，再也不用被它烦恼了。

第三鞭：setup的参数是什么？

我们看看setup执行时都传了什么进去：

参数4开始分别是instance.props、setupContext

再看看setupContext

结论：参数1是组件属性对象，它是Proxy对象，所以我们不能解构它，否则将失去响应性；参数2 是个对象，attrs可以访问组件所有特性，slots可以访问插槽内容，包括普通的和作用域插槽，它们都是函数，执行之后才能获取vnode数组。emit用来派发自定义事件。

// 不能解构props, 可以解构setupContext
setup({ foo, bar }, { attrs, slots, emit }) {
	watchEffect(() => {
    console.log(foo, bar) // foo，bar发生变化，也不会有输出
  })
}

第四鞭：setup的执行时刻

setup执行时刻非常早，甚至比beforeCreated还早：

结论：setup里面没有beforeCreate和created，相关代码写到setup里面就行；setup执行时会传入组件实例，因此在里面可以通过getCurrentInstance()访问到它。

第五鞭：setup中的生命周期钩子是怎么实现的？

setup里面可以很灵活的使用生命周期钩子，它们可以多次编写，最后会按注册顺序依次执行：

setup() {
  onMounted(() => {})
  onMounted(() => {})
}

这是怎么实现的哪？我们去看看onMounted之类函数的实现：

看看这些钩子的别名

最后自然是这些钩子的调用

遍历执行它们

关于composition原理的闪电五连鞭先打到这里吧，还有问题没有涉及到？请在评论区给我留言。

如果你喜欢看视频学习，欢迎来羊村逛逛，这篇文章也会有视频讲解。

年轻人要讲武德！！！点赞、关注、收藏都要安排起来！！！

---

• 这是我们花果山前端团队的开源项目 element3

• 一个支持 vue3 的前端组件库

---