Composition API(常用)

仅仅为了方便学习记录信息，未有其他用途。（采摘）

setup()

• 所有的组合API函数都在此使用, 只在初始化时执行一次
• 函数如果返回对象, 对象中的属性或方法, 模板中可以直接使用

setup的参数
setup(props, context) / setup(props, {attrs, slots, emit})

• props: 包含props配置声明且传入了的所有属性的对象
• attrs: 包含没有在props配置中声明的属性的对象, 相当于 this.$attrs
• slots: 包含所有传入的插槽内容的对象, 相当于 this.$slots
• emit: 用来分发自定义事件的函数, 相当于 this.$emit

---

ref () 深度 一般用来定义一个基本类型的响应式数据

const count = ref(1);
//基本类型==> 返回一个Ref对象
//用 count.value=*** 来修改值
//如果传入一个 {}  也可以,ref会自动将count.value 调用reactive方法将对象里的每个属性转成proxy对象
//通过给value属性添加getter/setter来实现对数据的劫持

---

reactive() 接收一个普通对象然后返回该普通对象的响应式代理

const count = reactive({
  name:'',
});
//基本类型==> 返回一个proxy对象 响应式转换是“深层的”：会影响对象内部所有嵌套的属性
//用 count.name=*** 来修改值
//内部基于 ES6 的 Proxy 实现

---

toRefs() 把一个响应式对象转换成普通对象，该普通对象的每个属性都转成一个 Ref对象

---

ref 获取元素

---

计算属性 监控属性

计算属性与监视

1. computed函数:
   与computed配置功能一致
   只有getter
   有getter和setter
2. watch函数
   与watch配置功能一致
   监视指定的一个或多个响应式数据, 一旦数据变化, 就自动执行监视回调
   默认初始时不执行回调, 但可以通过配置immediate为true, 来指定初始时立即执行第一次
   通过配置deep为true, 来指定深度监视
3. watchEffect函数
   不用直接指定要监视的数据, 回调函数中使用的哪些响应式数据就监视哪些响应式数据
   默认初始时就会执行第一次, 从而可以收集需要监视的数据
   监视数据发生变化时回调

vue2=>vue3原理解析<===========================>Composition API(其他)