Vue3中的setup函数
2022-07-22 04:40:08
Vue3中的setup函数
概述：
setup 函数是 Vue 3 中引入的组合式 API（Composition API）的核心部分。它作为一个新的组件选项，为开发者提供了一个在组件实例创建之前执行代码的地方。setup 函数在组件实例创建之前被调用，这意味着你不能在 setup 函数中使用 this 关键字来访问组件实例。相反，你需要通过 setup 函数的参数和返回值来与组件的模板和其他选项式 API 钩子进行交互。
详细解析：
返回值：
setup 函数返回的对象会暴露给模板和其他的选项式 API 钩子。这意味着你可以在模板中直接访问 setup 函数返回的对象属性，并在其他生命周期钩子中通过 this 关键字访问它们（尽管在 setup 函数内部不能使用 this）。
例如，在提供的代码中，setup 函数返回了一个包含 count 的对象，这使得 count 可以在模板中被访问和修改。
Props：
setup 函数的第一个参数是组件的 props。这些 props 是响应式的，会实时更新。
如果直接解构 props 对象，解构出的变量会变成非响应性，不能实时更新。为了保持响应性，可以使用 toRefs 或 toRef 函数。
toRefs 会将 props 转为一个其中全是 ref 的对象，然后可以对其进行解构，而每个解构出的变量都是一个追踪着对应 props 属性的 ref。
toRef 则可以将 props 的单个属性转为一个 ref。
Setup上下文：
setup 函数的第二个参数是一个 setup 上下文对象，这个对象包含了 attrs、slots、emit 和 expose 等属性。
attrs 包含了传递给组件但未被声明为 props 的特性（attributes）。
slots 是一个包含所有插槽内容的对象。
emit 是一个用于触发事件的函数。
expose 是一个函数，用于显式地限制该组件暴露出的属性。当父组件通过模板引用访问该组件的实例时，将仅能访问 expose 函数暴露出的内容。
与渲染函数一起使用：
setup 函数也可以与渲染函数一起使用。在这种情况下，setup 函数需要返回一个渲染函数，该函数接收一个 createElement 函数（在 Vue 3 中通常通过 h 导入）作为参数，并返回一个 VNode。
如果想暴露一些属性或方法给父组件，可以使用 expose 函数。但请注意，一旦返回了渲染函数，setup 函数就不能再返回其他对象了。
总结：
setup 函数为 Vue 3 的组合式 API 提供了强大的灵活性和组织能力。通过合理使用 setup 函数，开发者可以更加清晰地组织和管理组件的逻辑，同时保持与模板和其他选项式 API 钩子的良好交互。
热门标签
