VUE-CLI 组合式API

一、组合式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属性获取。{{count1}}

（2）props

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

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

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

补充一句：

在setup中有context第二个参数，主要是setup中没有this实例，所以需要使用上下文对象完成某些需求，如果值是在模版中需要使用attrs或者emit，使用方式不变，还是$attrs（）、$emit（）

（4）computed（）

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

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

- watchEffect()自动监听所有属性。       

watchEffect()方法自动监听所有属性，只要有属性发生改变，就会触发          

 watchEffect();

注意：必须要在watchEffect当中使用到具体变化的属性，否则watchEffect不执行

- watch监听属性。

  语法：watch(ref值|回调函数，( newValue,oldValue )=>{})

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

- 对象ref值：           

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

  监听某个属性的变化：    

总结：

1. watchEffect()         

- 默认执行一次。         

- 监听所有属性改变，但是必须要在watchEffect当中使用到当前具体，才能触发watchEffect。       

 - 只能得到改变之后的最新值。     

2. watch()       

 - 第一次不执行。       

 - 指定要监听的属性。         

- 可以得到属性的新值和旧值    

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

因为setup()方法中不能使用this，所以需要使用其他方式处理路由对象和路由信息：

useRoute和useRouter方法必须在setup函数中执行，不能再他的嵌套函数中执行！

- 路由信息

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

2. 使用useRoute方法创建路由信息对象。

    - 路由对象

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

补充：

使用getCurrentInstance()方法创建当前组件的实例对象(相当于以前的this),然    后就可以像使用this一样，去使用getCurrentInstance()的返回值。

（7）生命周期

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

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

onMounted()、onUpdated()、onUnmounted()

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

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

- toRef() 将一个响应式对象的属性转成响应式属性。     

语法：toRef( 源对象, 想要操作的属性 );

疑问？   

 对于以上需求，可以使用ref进行转换啊？( let msg = ref(info.msg) )     如果使用ref转换对象属性属性为响应式属性，那么，当改变转换完之后的响应式    属性时，源对象不会发生改变，只是当前的ref值发生改变而已！

- toRefs() 将一个响应式对象的所有属性转成响应式属性。     

语法：toRefs( 源对象 );

toRefs()非常好用，因为他可以帮助我们解构取出一个对象中的属性，而又不丢失    对象的响应特性。

3、setup语法糖写法

（1）响应式数据     

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

（2）使用子组件

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

- 在模版中可以使用kebab-case格式的组件，但是，官网更推荐大家使用      PascalCase格式

（3）props和emits

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

    - defineProps

- defineProps返回的是一个包裹着props属性的对象，使用：props.msg

思考：   

 在之前的模式下，可以直接在模版中使用{{ props的属性 }}来使用props，那么现    在能否这么做？     

不可以，因为之前的模式下都有一个接受的过程，而现在如果不写defineProps则    就没有接受的过成，如果想直接使用，可以在模版中是用$attrs.属性。

注意：   

 如果defineProps报错，是因为eslint检测的问题，只需要配置eslint.js文件：

- defineEmits

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

（4）useAttrs()

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

（5）补充

其他未提及的方式，跟在setup()方法中的使用方式一样。