Vue学习笔记集--setup

setup

Vue 3 的 setup 是 Composition API 的核心入口

用于替代 Vue 2 的 data、methods、computed 等选项。

它在组件创建前执行，允许你以更灵活的方式组织逻辑。以下是 setup 的详细使用方法：

---

基本用法

定义 setup 函数

<script>export default {setup(){},beforeCreate(){}}
</script>

执行时机:

在beforeCreate钩子之前执行

setup 语法糖

< script setup>语法糖

script标签添加 setup标记，不需要再写导出语句，默认会添加导出语句

<script setup>const message = 'this is message'const logMessage = ()=>{console.log(message)}
</script>

setup 的参数

props 参数

• 父组件传递的 props 是响应式的，不可解构（否则失去响应性）。
• 使用 toRefs 或 toRef 解构 props：

import { toRefs } from 'vue';setup(props) {const { title } = toRefs(props); // 保持响应性console.log(title.value);
}

context 参数

包含三个属性：

• attrs：非响应式的组件属性（未在 props 中声明的属性）。
• slots：父组件传递的插槽内容。
• emit：触发自定义事件的函数。

setup(props, { attrs, slots, emit }) {emit('custom-event', 'payload'); // 触发事件
}