初步了解组合式API

我们会在一个vue文件中methods，computed，watch，data中等等定义属性和方法，共同处理页面逻辑，我们称这种方式为 Options API（选项式API）

Options优缺点：条例清晰：相同的放在相同的地方，

缺点：随着组件功能的增大，关联性会大大降低，组件的阅读和理解难度会增加，

逻辑过多是this会出现问题，比如指向不明

反复横跳：一个功能往往需要在不同的vue配置项中定义属性和方法，比较分散，需求复杂之后，就会多出watch，computed，inject，provide等配置，一个methods中可能含有很多方法，往往分不清楚哪个方法对应哪个功能，就需要在data，methods，computed里修改，滚动上下移动，反复横跳。

所以我们就要用到Composition API（组合式API）Composition就是为了解决这个问题，通过组合的方式，把零落在各个data，methods的代码，重新组合，一个功能的代码放一起维护，并且这些代码可以单独拆分成函数。

为什么要用Composition：因为选项是API（Options API）太繁琐

怎么使用Composition：

为了开始使用Composition API，我们需要有一个可以实际使用它编写代码的地方，在Vue组件中，这个位置就是setup函数；

setup其实就是组件的另外一个选项，这个选项强大到我们可以用它代替之前所编写的大部分其他选项：methods，computed，watch，data，生命周期等等

那setup是什么呢？

setup函数是vue3版本中，引入的一个新函数，引入的主要原因是为了使用组合式API，setup函数是Composition的入口。

setup有哪些特点呢？

1.setup函数是组合式Api入口

2.setup函数是启动页面后自动执行的函数

3.页面中涉及的变量和方法等，都需要写在setup函数中

4.在setup中定义的变，方法需要通过return返回出去才可以使用，否则无法在视图中使用，

5.setup函数位于created、beforCreated钩子之前，用于代替这两个钩子。

setup函数的参数：

1.props

2.context

1.setup函数的第一个参数是组件的props和标准的组件一致，一个setup函数的props是响应式的，并且会在传入新的props时同步更新

（对于props的类型，和之前一样，在props选项中定义，并且在template中依然时可以正常去使用peops中的属性，比如message）

（我们在setup函数中想要使用props，不可以通过this去获取）因为peops有直接作为参数传递到setup函数，所以我们直接通过参数来使用即可。

setup函数有哪些参数呢？

传入setup函数的第二个参数时一个Setup上下文contest对象。上下文对象暴露了其他一些在setup中可能会用到的值：

代码示例：

export default {
setup(props, context) {
// 透传 Attributes（非响应式的对象，等价于 $attrs）
//所有的非prop的attribute；
console.log(context.attrs)
// 插槽（非响应式的对象，等价于 $slots）
console.log(context.slots)

// 触发事件（函数，等价于 $emit）
console.log(context.emit)

// 暴露公共属性（函数）
console.log(context.expose)
}
}

setup函数的返回值：

是函数就会有返回值，那setup函数的返回值是用来做什么的呢？

setup的返回值可以在模板template中被使用，也就是说我们可以通过setup的返回值来替代data选项，甚至是我们可以返回一个执行函数来代替methods中定义的方法；

组件中所有的变量都要在setup函数中定义，并且需要在setup函数最后通过return返回，才可以在模板中使用。代码示例：

<template>
<h1>姓名:{{name}}</h1>
<h1>年龄:{{age}}</h1>
</template>
<script>
export default {
name:'Test',
setup() {
const name = '张三';
const age = 21;
return {name,age}
}
}
</script>
<style></style>

setup创建方法：方法需要在写setup函数当中的，同时和变量一样，需要return抛出次啊能使用，代码示例:

  <template>
<h1>姓名:{{name}}</h1>
<h1>年龄:{{age}}</h1>
<button @click="changeName">改变姓名</button>
</template>
<script>
export default {
name:'Test',
setup() {
const name = '张三';
const age = 21;
   function changeName(){
    alert(1);
   }
   return {name,age,changeName}
}
}
</script>
<style></style>

如果我们想在changeName中修改name变量, 那它是响应式的吗?

答：不是响应式的，如果想让name变为响应式的，就需要使用到响应式的API

代码示例：

<template>
<h1>姓名:{{name}}  </h1>
<h1>年龄:{{age}}</h1>
<button @click="changeName“>改变姓名</button>
</template>
<script>
export default{
name:'Test',
setup(){
   const name = '张三';
   const age = 21;

   function changeName(){
     name='李四'
   }
   return{name,age,changeName}
   }
   }
   </script>
   <style></style>

我们点击按钮, 页面的姓名还是张三,这也验证了name不是响应式的.

注意:setup不可以使用this官方关于this有这样一段描述（这段描述是我给官方提交了PR之后的一段描述）：表达的含义是this并没有指向当前组件实例；并且在setup被调用之前，data、computed、methods等都没有被解析；所以无法在setup中获取this