组合式API

提示：以下是本篇文章正文内容，下面案例可供参考

组合式API

1. 什么是set-up

setup()函数是在组件使用组合式API的入口。
(1)可以在选项式API（data、watch…）的组件中使用组合式API，也可以单独使 用组合式API。
(2) 通过return一个对象，暴露模版需要使用的响应式 属性、计算数据性、方法 等…
(3) 在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属性获取。
{{ count1 }}

（2）props

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

（3）setup()第二个参数：setup上下文对象

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

（4）computed()

通过computed()方法可以制定计算属性。
在这里插入图片描述

（5）关于监听：watch()、watchEffect()

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

（2） watch监听属性。
语法：watch(ref值|回调函数，( newValue,oldValue )=>{})

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

• 对象ref值： 监听整个对象的变化：(如果监听整个对象的变化，他的新值和旧值一样，因为对象类型数据是通过指针存储的。)
  
  监听某个属性的变化
  
  总结

• watchEffect()
  默认执行一次。
  监听所有属性改变，但是必须要在watchEffect当中使用到当前具体 ，才能触发watchEffect。
  只能得到改变之后的最新值。
  2. watch()
  第一次不执行。
  指定要监听的属性。
  可以得到属性的新值和旧值

（6）路由对象和路由信息的处理

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

• 设定路由规则中允许使用props传递参数。
  
  

• 使用useRoute方法创建路由信息对象
  
  

• 路由对象
  1. 使用useRouter方法创建路由对象
  
  

（7）生命周期

setup()方法本身就相当于之前声明周期中的created之前生命周期的总和，也就是说setup替代了created和beforeCreated。
其他常用的生命周期函数：
onMounted()、onUpdated()、onUnmounted()

（8）补充几个实用的工具函数：isRef()、toRef()、toRefs()

• isRef() 判断某个属性是否为ref属性。

  

• toRef() 将一个响应式对象的属性转成响应式属性。
  语法：toRef( 源对象, 想要操作的属性 );

  

• toRefs() 将一个响应式对象的所有属性转成响应式属性。
  语法：toRefs( 源对象 );
  

3.setup语法糖写法

(1）响应式数据
语法糖模式下不需要写暴露语法，默认暴露

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

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

• defineProps

defineProps返回的是一个包裹着props属性的对象，使用：props.msg
**注意：
如果defineProps报错，是因为eslint检测的问题，只需要配置eslint.js文件
**

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

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