Vue3--------组合式API

一、什么是组合式API？

组合式 API (Composition API) 是一系列 API 的集合，使我们可以使用函数而不是声明选项的方式书写 Vue 组件。它是一个概括性的术语，涵盖了以下方面的 API：

1>响应式 API：例如 ref() 和 reactive()，使我们可以直接创建响应式状态、计算属性和侦听器。

2>生命周期钩子：例如 onMounted() 和 onUnmounted()，使我们可以在组件各个生命周期阶段添加逻辑。

3>依赖注入：例如 provide() 和 inject()，使我们可以在使用响应式 API 时，利用 Vue 的依赖注入系统。

优点：更好的逻辑复用，更灵活的代码组织

二、组合式API-setup

1.什么是setup()

setup()函数是在组件使用组合式API的入口。

• 可以在选项式API（data、watch..）的组件中使用组合式API，也可以单独使用组合式API
• 通过return一个对象。暴露模版需要使用的响应式属性、计算数据性、方法等
• 在setup（）方法中是不能获取this实例的，那也就意味着，setup中不能够访问选项式API暴露的属性，但选项式API中可以访问setup中暴露的属性。
• 

2.在setup（）中使用所有选项式API的选项

1>响应式数据

在setup（）函数中创建响应式数据需要使用ref或者reactive方法。

通过reactive创建对象类型的响应式数据 

 

限制：         

        1. reactive只能创建对象类型数据（对象、数组、map...）       

          2. reactive创建的响应式对象不能经历“被替换”（将响应式对象的属            性赋值或解构至本地变量时，或是将该属性传入一个函数时） 

 

  通过 ref 创建任意数据类型的响应式数据：

（1） ref创建的响应式数据是一个包裹value属性的对象，所以在setup函数使用需要：变量.value。     

 （2） ref创建的响应式数据暴露到模板中时，不需要通过value属性获取。 

2> props

setup()函数接收一个参数，即为props!,但是这里需要通过传统方式先接收props,然后可以传递给setup函数。

3> setup()第二个参数：setup上下文对象(阉割版的vue实例)

setup()函数接收第二个参数context，setup的上下文对象。他包含：attrs, emit,slots, expose四大属性。attrs相当于之前的this.$attrs, emit相当于之前的    this.$emit。

4> computed()

通过computed（）方法可以定制计算属性。

5> 关于监听：watch()、watchEffect()

• watchEffect()自动监听所有属性。     
• watchEffect()方法自动监听所有属性，只要有属性发生改变，就会触发            
• watchEffect();
• 注意：必须要在watchEffect当中使用到具体变化的属性，否则watchEffect不执行。

watch监听属性。

语法：watch（ref值回调函数，（newValue，oldValue）=>{}）

普通ref值：监听ref值不需要count.value,直接监听ref值count。

对象ref值：

监听整个对象的变化：（如果监听整个对象的变化，他的新值和旧值一样，因为对象类型数据是通过指针储存的。） 

监听某个属性的变化：

小总结：

  watchEffect()       

•  - 默认执行一次。         
• - 监听所有属性改变，但是必须要在watchEffect当中使用到当前具体  ，才能触发watchEffect。     
•  - 只能得到改变之后的最新值

watch()         

• - 第一次不执行。       
•  - 指定要监听的属性。       
•  - 可以得到属性的新值和旧值    

6>路由对象和路由信息的处理

因为setup()方法中不能使用this，所以需要使用其他方式处理路由对象和路由信息： useRoute和useRouter方法必须在setup函数中执行，不能再他的嵌套函数中执行！

路由信息

1. 设定路由规则中允许使用props传递参数。
2.  使用useRoute方法创建路由信息对象。

路由对象

        使用useRouter方法创建路由对象。

7> 生命周期

setup()方法本身就相当于之前声明周期中的created之前生命周期的总和，也就是说setup替代了created和beforeCreated。

其他常用的生命周期函数：

onMounted()、onUpdated()、onUnmounted()

3.setup语法糖

1> 响应式数据

语法糖模式下不需要写暴露语法，默认暴露。

2>使用子组件

在语法糖模式下，组件导入后不需要注册可以直接使用。

3>props和emits

可以通过defineProps() 和 defineEmits()方法使用props和emit。

defineProps()

defineEmits()

defineEmits返回的是一个事件触发器（相当于$emit），可以使用他的返回值触    发他接收到的自定义事件：

 

4>useAttrs()

使用useAttrs()方法可以在setup中获取未接收的attrs属性。

OK，本文到此结束，希望本文对你有所帮助 😃

如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。