当前位置：首页 > news >正文

setup函数相关【3】

news 2025/9/6 8:42:01

1.setup函数：

1.概述：

setup 是Vue3中一个新的配置项,他是一个函数，是组合式API的舞台，组件中所用到的数据方法计算属性监视属性等都在setup函数中；
setup 函数中 返回的对象中的内容，可以在模板中直接使用；
setup 函数中的this 是undefined，因此在setup函数中不使用this；
setup 函数会beforeCreate之前调用，领先所有的钩子执行的；

2.案例分析：

   在vue3开始学习的时候我们搭建了一个简单的vue项目，但实际上我们是通过vue2语法来编写的，也就是将数据放置在data属性中，方法放置在methods属性中这种分散的语法；在vue3中我们将这些数据，方法等全部放置在setup函数中；

<template><h2>名称：{{ name }}</h2><h2 v-text="'地址：'+address"></h2><button @click="changeName">更新名称</button>
</template><script>
export default {name: "School",setup() {console.log("setup函数执行了")//声明(默认是 非响应式的) 变量  并 赋值let name = "猿究院";let address = "北大街";//不能使用this 是 undefined// console.log(this)// function changeName() {}const changeName = () => {console.log("更新name属性:", name);name += "~";}return {//返回变量  可以在模板中直接使用name, address, changeName}},beforeCreate() {console.log("生命周期函数 beforeCreate")}
}</script><style scoped></style>

<template>
<School></School>
</template><script>import School from "./School.vue"
export default {name: "App",components: {School}
}
</script><style scoped></style>

说明：在上述案例的school.vue组件中，我们将此组件的数据，及事件的回调函数全部写到了setup函数中，并将数据和回调函数写到了setup函数的return属性中，注意，setup函数中的数据及方法必须在return中返回，才能在模板中直接使用；

通过测试结果发现，可以正常将数据渲染到页面上，但同时也存在两个问题：

setup函数书写过于繁琐，在此函数中需要被渲染的数据必须在return中返回才可使用；
setup函数中的方法默认是非响应式的，也就是说案例中的改变名称函数虽然会实际修改属性的值，但不会将修改后的值渲染到页面上；

通过测试结果可以看出，name属性的值确实被改变了，但却并未渲染到页面上；

2.setup函数的优化：（setup语法糖）

优化1：

<template><h2>名称：{{ name }}</h2><h2 v-text="'地址：'+address"></h2><button @click="changeName">更新名称</button>
</template><!-- script setup用于主要逻辑 -->
<script lang="ts" setup>const name = '猿究院';
const address = '北大街';// 定义函数
const changeName = () => {console.log("更新name属性:", name.value);name.value += '~';
};
</script><!-- 普通script用于定义组件相关属性等 -->
<script lang="ts">
export default {name: 'School'
};
</script><style scoped></style>

通过上述setup语法糖优化后，需要渲染到页面的数据不用再写到return中返回后才可使用了；

此时仍可以在页面上获取到相应的值，但此时的值仍是非响应式的，而且优化后需要写两个script编写，所以仍然需要进一步优化；

优化2：

可以安装一个vite插件，就可以将两个script标签进行合并了

安装插件：

安装指令：只对当前项目安装

npm i vite-plugin-vue-setup-extend -D

配置vite.config.ts：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
//导入插件
import vueSetupExtend from 'vite-plugin-vue-setup-extend'
// https://vite.dev/config/
export default defineConfig({plugins: [vue(),//使用插件vueSetupExtend()],
})

代码编写：

<template><h2>名称：{{ name }}</h2><h2 v-text="'地址：'+address"></h2><button @click="changeName">更新名称</button>
</template><!--setup  语法糖-->
<script lang="ts" setup name="School">let name = "猿究院";
let address = "北大街";
const changeName = () => {console.log("更新name属性:", name);name += '~'
}
</script><style scoped></style>

<template><School></School>
</template><script setup lang="ts" name="App">import School from "./components/School.vue";</script><style scoped></style>

上面优化案例中，我们合并了两个script标签，并且实现了数据的正常渲染；