✔ （1）1-5 Teleport 传送门功能最近学习 ✔（2）1-6 更加底层的 render 函数 ✔(3) 1-7 插件的定义和使用 ✔（4）1-8 数据校验插件开发实例 ✔（5）2-1 Setup 函数的使用 （6）2-2 ref，reactive 响应式引用的用法和原理（1） （7）2-3 ref，reactive 响应式引用的用法和原理 （2） |
|
我们始终围绕是什么+为什么+怎么用 来输出所学收获 （1）是什么： setup这个函数是在实例被初始化之前就执行的一个函数。 （2）怎么玩： setup里面压根我们不能使用this这样的关键词，this里面的东西实际上什么也没有， 所以用了setup之后，我们就不会用this这样的语法再去写任何的代码了。 我们都会换成新的 composition API的语法来去定义。 composition API 字面意思是组合API，它是为了实现基于函数的逻辑复用机制而产生的。Vue3 新特性。 参考：https://blog.csdn.net/ailsa_csdn/article/details/123166534 |
|
学习内容：
1）Vue3 里面提供的新的语法API，叫做composition API。
什么是composition API？
为什么我们要用composition API？
当我们在项目开发之中会遇到这样的问题，比如说当我的这样的一个组件越来越大的时候，它里面会有这种name、age一系列的东西：
同时它还会有 methods 这样的东西:【这些代码都可以模板化】
比如说有 setName这样的方法，
然后还会有setAge这样的方法，
然后还会有一些其他的方法，比如说 a()、b()的一些方法 都会写在这，
除了这之外，我们还会写 computed 计算属性:
这里面又会写很多新的计算属性，然后再去写一些什么，比如说 directives:
directives 它是一个对象，它里面可能会有很多的东西，
然后又会有 mixin这样的内容。代码写注释：
当我们的组件变得越来越复杂的时候，我们会发现一个问题，当我去看模板的时候，我想知道name相关的逻辑的时候，
我需要不断的去向上翻，在 methods 里面找到和 name 相关的逻辑，然后再往上翻去找到数据里面和name相关的东西。
当组件变成几百行的时候，我们去找这样的逻辑会变得比较困难。
所以当我们去写一个 Vue 组件的时候，组件变得越来越大的时候，
传统的这种 Vue 的语法去定义data 、methods，computed 分开去定义 语法，就会显得维护性。
比如说和name相关的数据定义在某一块，和 name 相关的一些方法可能就在中间，和 name 相关的渲染，包括其他的一些内容可能在下面。
你会发现这些代码维护起来总是要上下跳着去写这样的代码。
那么在 Vue3 引入了 composition API 之后，我们就可以有效的把这种代码维护性的问题给它解决掉，我们就可以让我们的代码更加容易聚合到一起，更加容易具备一些更好的维护性。【通用概念】
大概了解了 composition API 这样的产生的背景之后，我来给大家讲一下composition API怎么去使用它，哪里能用？
要想使用composition API，首先大家一定要学习的一个函数，叫做一个set up这样的函数。
那么我们在这里写一个 setup 函数，这个函数什么时候执行的呢？
它是在这个组件 created ，实例被完全初始化之前 执行的一个函数，
这个函数它可以接收到两个参数，分别是当前组件接收的props以及它的一个context。
props 就是外部组件传递过来的一些内容，而context指的是一个上下文，
setup 函数在 created 实际化完全被初始化之前会执行，在这里面我们就可以去用 composition API 编写我们的代码了。
写一个最基础的 composition API 语法，
setup，最后一定要有一个 return 的值，比如说return一个 name，叫做dell，
那么 setup 里面导出的内容，
我就可以在模板里面直接去使用了，比如说模板里面你直接用这个name:
我们到页面上来看，dell就展示出来了:
setup里面我们现在return一个方法，比如说这里我有一个 onclick等于 handleClick。
然后在 return 里面我们写一个handleClick方法，冒号，比如说 alert，123保存:
然后再回到页面上我们刷新，点击dell ，123能弹出来：
我们发现其实setup这个函数，它return的所有内容会暴露到外部，我们在模板里面可以直接去使用这些变量，或者这些 handleClick 方法都可以，
我们接下来继续再对setup做一些分析，setup它是在实例被创建之前执行的一个函数，
setup这个函数是在实例被初始化之前就执行的一个函数，
实例被初始化之前methods 它并没有放到 this 上面去，
所以你通过this点test根本就没法去调用这个method:
一定要记住，其实在setup里面压根我们就不能使用this这样的关键词，this里面的东西实际上什么也没有，所以我们不要这么去写。
所以用了setup之后，我们就不会用this这样的语法再去写任何的代码了，后面像这种methods的定义，
我们都会换成新的 composition API的语法来去定义。
composition API所有代码编写之前一定要建立在一个setup 函数之上，
这个函数是在实例被完全初始化之前会自动调用一个函数，这里面它会return一些内容出去，这些内容会暴露在外部，
外部的template 模板里面可以直接去使用它。
问题清单：
原因是什么？
什么是composition API？
为什么我们要用composition API？
共同学习，写下你的评论
评论加载中...
作者其他优质文章
