阅读 2314

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

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

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

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

本文探索内容包括:

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

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

第一鞭:composition和options如何做到和谐共存?

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

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

截屏2020-11-13 下午2.02.46

截屏2020-11-13 下午2.07.10

截屏2020-11-13 下午2.16.24

截屏2020-11-13 下午2.13.50

结论:到这里我们知道了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')
复制代码

img

小右可不是假大师,自然会

截屏2020-11-14 下午1.06.50

截屏2020-11-14 下午1.45.40

截屏2020-11-14 下午1.51.43

第二鞭:setup中的this指向哪?

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

截屏2020-11-14 下午2.02.02

截屏2020-11-14 下午2.25.59

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

第三鞭:setup的参数是什么?

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

午2.46.25

参数4开始分别是instance.propssetupContext

截屏2020-11-14 下午2.56.54

再看看setupContext

截屏2020-11-14 下午2.59.20

结论:参数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还早:

aaa

结论:setup里面没有beforeCreatecreated,相关代码写到setup里面就行;setup执行时会传入组件实例,因此在里面可以通过getCurrentInstance()访问到它。

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

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

setup() {
  onMounted(() => {})
  onMounted(() => {})
}
复制代码

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

image-20201114215005015

截屏2020-11-14 下午10.09.30

看看这些钩子的别名

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

截屏2020-11-14 下午10.22.18

遍历执行它们

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

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

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

截屏2020-11-14 下午10.38.43