一、Options API的弊端Options api
的一大特点就是在对应得属性中编写对应的模块。比如data
定义数据、methods
中定义方法、computed
中定义计算属性、watch
中监听属性改变,也包括生命
周期钩子。但是这种代码有一个很大的弊端:当我们实现某一个功能时,这个功能对应的代码逻辑会被拆分到各个属性中;当我们组件变得更大、更复杂时,逻辑关注点的列表就会增长,那么同一个功能的逻辑就会被拆分的很分散;尤其对于那些一开始没有编写这些组件的人来说,这个组件的代码是难以阅读和理解的(阅读组件的其他人)。如下图所示,使用option api和composition api之间的对比
二、composition api
为了开始使用Composition API
,我们需要有一个可以实际使用它(编写代码)的地方,在Vue
组件中,这个位置就是 setup
函数。setup
其实就是组件的另外一个选项,只不过这个选项强大到我们可以用它来替代之前所编写的大部分其他选项,比如methods、computed、watch、data、生命周期
等等。
三、setup api的参数setup
的api
中参数有两个,第一个是props
,就是父组件传递给子组件的参数(并且在setup
外部通过props
进行声明定义的)。第二个参数是context
,表示上下文,其为一个对象,可以结构出attrs
, slots
, emit
。attrs
表示父组件传递过来的,非props
属性。slots
表示插槽,emit
表示向父组件发送事件,相当于之前的this.$emit()
。
四、setup函数的返回值setup
函数的返回值,可以在template中使用,也就是说我们可以设置setup
中的值,来代替data
作用。
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://blog.csdn.net/weixin_47450807/article/details/122885280
内容来源于网络,如有侵权,请联系作者删除!