原创力文档- 1、本文档共20页，可阅读全部内容。
- 2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
Vue3–CompositionAPI
王红元coderwhy
目录
1认识CompositionAPI
content
2Setup函数的基本使用
3Setup中数据的响应式
4Reactive知识点补充
5Ref知识点补充
6setup中禁用this
coderwhyOptionsAPI的弊端
◼在Vue2中，我们编写组件的方式是OptionsAPI：
OptionsAPI的一大特点就是在对应的属性中编写对应的功能模块；
比如data定义数据、methods中定义方法、computed中定义计算属性、watch中监听属性改变，也包括生命周期钩子；
◼但是这种代码有一个很大的弊端：
当我们实现某一个功能时，这个功能对应的代码逻辑会被拆分到各个属性中；
当我们组件变得更大、更复杂时，逻辑关注点的列表就会增长，那么同一个功能的逻辑就会被拆分的很分散；
尤其对于那些一开始没有编写这些组件的人来说，这个组件的代码是难以阅读和理解的（阅读组件的其他人）；
◼下面我们来看一个非常大的组件，其中的逻辑功能按照颜色进行了划分：
这种碎片化的代码使用理解和维护这个复杂的组件变得异常困难，并且隐藏了潜在的逻辑问题；
并且当我们处理单个逻辑关注点时，需要不断的跳到相应的代码块中；
coderwhy大组件的逻辑分散
◼如果我们能将同一个逻辑关注
点相关的代码收集在一起会更
好。
◼这就是CompositionAPI想
要做的事情，以及可以帮助我
们完成的事情。
◼也有人把VueComposition
API简称为VCA。
coderwhy认识CompositionAPI
◼那么既然知道CompositionAPI想要帮助我们做什么事情，接下来看一下到底是怎么做呢？
为了开始使用CompositionAPI，我们需要有一个可以实际使用它（编写代码）的地方；
在Vue组件中，这个位置就是setup函数；
◼setup其实就是组件的另外一个选项：
只不过这个选项强大到我们可以用它来替代之前所编写的大部分其他选项；
比如methods、computed、watch、data、生命周期等等；
◼接下来我们一起学习这个函数的使用：
函数的参数
函数的返回值
coderwhysetup函数的参数
◼我们先来研究一个setup函数的参数，它主要有两个参数：
第一个参数：props
第二个参数：context
◼props非常好理解，它其实就是父组件传递过来的属性会被放到props
文档评论（0）