Vue3 组合式API setup语法糖

目录

1.setup语法糖       

 defineProps：

defineEmits:

defineExpose：

2.Vue3中的组合式 API

---

1.setup语法糖       

 Vue 3 引入了 setup 语法糖，以取代 Vue 2.x 中的选项对象方式。通过使用 setup，我们可以更好地将组件的逻辑代码与模板代码分离，提高代码的可读性和维护性。

        以前使用setup比较麻烦，还得导出属性和方法，setup语法糖只需要在script 标签中添加一个setup即可

        setup中新增的API：

                defineProps：用来接收父组件传递过来的数据

                defineEmits：子组件触发父组件的方法

                defineExpose：将子组件中属性导出

 defineProps：

        父组件：

子组件：

defineEmits:

        父组件：

子组件：

defineExpose：

        父组件：

子组件：

2.Vue3中的组合式 API

Vue 3 中的组合式 API 提供了一种新的方式来组织和复用组件的逻辑代码。它由一系列的函数和钩子组成，可以在 setup 函数内部使用，以下是setup中常用的组合式api：

1. setup：setup函数是组合式API的入口点，它在组件实例化之前执行。你可以在setup函数中编写响应式状态、引入其他组合式API以及执行其他初始化逻辑。

2. ref：ref函数用于创建一个响应式的数据引用。它接受一个初始值，并返回一个可通过.value访问和修改的响应式对象。

3. reactive：reactive函数用于创建一个响应式的数据对象。它接受一个普通对象，并返回一个可以被Vue追踪的响应式代理对象。

4. computed：computed函数用于创建一个计算属性。它接受一个getter函数，并返回一个可读的计算属性。

5. watch：watch函数用于监听一个响应式状态或计算属性的变化，并执行相应的回调函数。

6. toRefs：toRefs函数用于将一个响应式对象转换为普通对象，其中每个属性都是一个独立的响应式引用。

7. toRef：toRef函数用于创建一个指向响应式对象属性的引用。它接受一个响应式对象和属性名，并返回一个只读的引用。

8. watchEffect：watchEffect函数用于执行一个响应式副作用函数，并自动追踪其依赖。当依赖发生变化时，副作用函数会被重新执行。

9. onMounted：onMounted函数用于注册组件实例被挂载到DOM后执行的回调函数。

10. onUpdated：onUpdated函数用于注册组件实例被更新后执行的回调函数。

11. onUnmounted：onUnmounted函数用于注册组件实例被卸载前执行的回调函数。

12. provide / inject：provide函数用于在组件树中向下传递数据，而inject函数用于在组件树中向上获取提供的数据。

13. nextTick：nextTick函数用于在下一次DOM更新循环之后执行回调函数。这在需要等待DOM更新后执行某些操作时非常有用。