查看vue3官网介绍：组合式 API：setup()
在 Vue 3 中，组合式 API 的 setup() 函数是一个非常重要的特性，它提供了一种更灵活和可维护的方式来组织组件的逻辑。
基本概念
setup() 函数是在组件实例创建之前执行的，它用于组合组件的逻辑，包括响应式数据、方法、计算属性、监听等。它接收两个参数：props 和 context，并返回一个对象，其中包含可以在组件模板中使用的属性和方法。
特点
setup函数返回的对象中的内容，可直接在模板中使用。setup中访问this是undefined。setup函数会在beforeCreate之前调用，它是“领先”所有钩子执行的。
示例：
<template>
<div>
<div>姓名：{{name}}</div>
<div>年龄：{{age}}</div>
<button @click="changeName">修改名字</button>
<button @click="changeAge">修改年龄</button>
</div>
</template>
<script lang="ts">
export default {
name: 'Person',
setup() {
console.log(this); // undefined
// 数据(在setup中直接声明变量，此时的name、age、tel都不是响应式的数据)
// 注意：直接声明变量，数据不是响应式的。
let name = '张三'
let age = 36
// 方法
function changeName() {
console.log('change name')
name = 'John' // 这样修改name，页面是不会响应的
console.log('changed name: ' + name); // changed name: John
// 成功修改 name ，但是页面没有响应
}
function changeAge() {
age--
console.log(age);
// 成功修改 age ，但是页面没有响应
}
// 将数据、方法暴露出去，模板中才可以使用
return { name, age, changeName, changeAge}
}
}
</script>
setup函数的返回值
- 若返回一个对象：则对象中的：属性、方法等，在模板中均可以直接使用。
- 若返回一个函数：则可以自定义渲染内容。代码如下：
// 不论页面模板是什么样，直接渲染返回的内容
setup(){
return ()=> 'vue3起飞！'
}
与选项式API的区别
setup与 选项式API可以在vue3项目中同时存在。- 选项式API（如
data、methods、computed等）中可以访问到setup中的属性、方法。
但在setup中不能访问到选项式API（如data、methods、computed等）。- 在选项式 API 中可以访问到
setup中定义的属性和方法，这是因为 Vue 在处理组件时，会先执行setup函数，然后将其返回值与选项式 API 的内容进行合并，最终形成组件的实例。 - 在
setup函数中不能直接访问选项式 API（如data、methods、computed等），这是因为setup函数在组件实例创建之前执行，此时选项式 API 的内容还未被处理和合并到组件实例中。
- 在选项式 API 中可以访问到
- 如果与选项式API冲突，则
setup优先。setup的执行优先级更高，setup返回的属性会覆盖选项式 API 中同名的属性。
示例：
<template>
<div>
<div>姓名：{{name}}</div>
<div>年龄：{{age}}</div>
<button @click="changeName">修改名字</button>
<button @click="changeAge">修改年龄</button>
<br />
<div>选项式API data 里的数据：{{ otherName }}</div>
<div>选项式API data 里读取setup函数中声明的变量： {{ setupName }}</div>
<button @click="handleShow">选项式API methods 定义的方法：点击显示消息</button>
</div>
</template>
<script lang="ts">
export default {
name: 'Person',
data() {
return {
otherName: '李四',
setupName: this.name
}
},
methods: {
handleShow() {
alert('点击了啊啊啊啊啊')
}
},
setup() {
console.log(this); // undefined
// 数据(在setup中直接声明变量，此时的name、age、tel都不是响应式的数据)
// 注意：直接声明变量，数据不是响应式的。
let name = '张三'
let age = 36
// 方法
function changeName() {
console.log('change name')
name = 'John' // 这样修改name，页面是不会响应的
console.log('changed name: ' + name); // changed name: John
// 成功修改 name ，但是页面没有响应
}
function changeAge() {
age--
console.log(age);
// 成功修改 age ，但是页面没有响应
}
// 将数据、方法暴露出去，模板中才可以使用
return { name, age, changeName, changeAge}
}
}
</script>
与传统的选项式 API（如 data、methods、computed 等）相比，组合式 API 更加灵活和可组合。它允许将相关的逻辑封装在函数中，提高了代码的复用性和可读性。同时，组合式 API 也更好地支持 TypeScript，提供了更好的类型推断和代码提示。
setup 语法糖
在 Vue 3 中，<script setup>是一种语法糖，它极大地简化了组合式 API 的使用方式。
<script setup>语法糖，可以把setup独立出去：
在 Vue 组件中，使用<script setup>标签来代替传统的<script>标签。
在<script setup>中，不需要使用传统的export default语法来包裹组件的逻辑。可以直接定义响应式数据、计算属性、方法等，并且这些定义会自动暴露给模板使用（不需要return语句来暴露数据、方法）。
把上面例子中的setup函数改为<script setup>语法糖：
<script setup lang="ts">
console.log(this) // undefined
// 数据(在setup中直接声明变量，此时的name、age、tel都不是响应式的数据)
// 注意：直接声明变量，数据不是响应式的。
let name = '张三'
let age = 36
// 方法
function changeName() {
console.log('change name')
name = 'John' // 这样修改name，页面是不会响应的
console.log('changed name: ' + name) // changed name: John
// 成功修改 name ，但是页面没有响应
}
function changeAge() {
age--
console.log(age)
// 成功修改 age ，但是页面没有响应
}
</script>
注意：用<script setup>改写setup函数后，现在有两个 <script> 标签：
- 一个用于使用组合式 API 的
<script setup>。 - 一个用于传统的选项式 API 和组件配置：
<script lang="ts">
export default {
name: 'Person'
}
</script>
这个<script> 标签目前只用来配置组件的名称。
是否可以在<script setup>标签上写组件的名称呢？
插件vite-plugin-vue-setup-extend
vite-plugin-vue-setup-extend是一个用于增强 Vue 3 在 Vite 项目中使用<script setup>语法的插件。
在 插件vite-plugin-vue-setup-extend 中，有更详细的用法示例。
安装插件：
npm i vite-plugin-vue-setup-extend -D
在vite.config.js文件中，引入并使用该插件：
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
VueSetupExtend(),
]
})
修改<script setup>标签：
<script setup lang="ts" name="Person">
<script>
参数介绍
setup() 函数接收两个参数：props 和 context:
props：包含了父组件传递给当前组件的属性。可以通过解构赋值的方式获取特定的属性。context：包含了一些与组件相关的上下文信息，如attrs、slots、emit等。可以通过解构赋值的方式获取特定的上下文信息。
示例：
<script setup lang="ts">
// defineProps 用于定义组件接收的父组件传递过来的属性（props）。
// defineExpose 用于明确指定哪些属性和方法可以在组件外部被访问。
import { defineProps, defineExpose } from 'vue';
// 定义props
// 通过 defineProps 返回的对象可以访问到父组件传递过来的这个属性的值。
const props = defineProps({
message: String
});
console.log(props.message);
// defineEmits 用于定义组件可以触发的自定义事件。
// 这里定义了一个名为 customEvent 的自定义事件。
const emit = defineEmits(['customEvent']);
// customMethod 是一个方法，当这个方法被调用时，
// 会触发 customEvent 事件，并传递 'some data' 作为事件参数。
const customMethod = () => {
emit('customEvent', 'some data');
};
// 通过 defineExpose 指定了组件外部可以访问的内容。
// 这里只暴露了 customMethod 方法，在父组件或者其他组件中可以调用这个方法，
// 但不能直接访问组件内部的其他未暴露的属性和方法。
defineExpose({
customMethod
});
</script>
返回值
- 响应式数据：可以在
setup()函数中使用ref或reactive函数来创建响应式数据。这些数据可以在组件模板中使用，并且会自动更新视图。
示例：
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const count = ref(0);
const increment = () => {
count.value++;
};
</script>
- 计算属性：可以在
setup()函数中使用computed函数来创建计算属性。计算属性是基于响应式数据计算得到的值，并且会自动更新。
示例：
<template>
<div>
<p>Full Name: {{ fullName }}</p>
</div>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue';
const firstName = ref('John');
const lastName = ref('Doe');
const fullName = computed(() => `${firstName.value} ${lastName.value}`);
</script>
- 方法：可以在
setup()函数中定义普通的函数，这些函数可以在组件模板中使用。
示例：
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
<button @click="decrement">Decrement</button>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const count = ref(0);
const increment = () => {
count.value++;
};
const decrement = () => {
count.value--;
};
</script>
