setup配置；ref与reactive

setup配置

Vue 3中的 setup 函数接收两个参数，分别是 props 和 context。

1、props：值为对象，包含: 组件外部传递过来。切组件内部声明接收了的属性。需要注意的是，Vue3中的 props 是只读的，即在setup 函数中不能修改 props 的值。如果需要修改传递过来的数据，可以使用响应式对象或ref。

2、context：上下文对象。

• attrs:值为对象，包含组件外部传递过来，但没有在props配置中声明的属性。相当于this.$attrs
• slots:收到的插槽内容，相当于this.$slots
• emit:分发自定义事件的函数，相当于this.$emit

注意：

1、这个钩子会在created之前执行

2、内部不存在this

3、如果返回值是一个对象，那么这个对象中的键值对会被合并到created钩子的this中，而在视图上也能访问相应的数据值

ref与reactive

reactive:

(1)、它的响应式是更加‘深层次’的，底层本质是将传入的数据包装成一个Proxy。

(2)、参数必须是对象或者数组，如果要让对象的某个元素实现响应式时比较麻烦。需要使用toRefs

ref:

(1)、函数参数可以是基本数据类型，也可以接受对象类型

(2)、如果参数是对象类型时，其实底层的本质还是reactive,系统会自动根据我们给ref传入的值转换成：reactive

(3)、在template中访问，系统会自动添加.value;在js中需要手动.value

(4)、ref响应式原理是依赖于Object.defineProperty()的get()和set()的。