setup
setup概述
setup是Vue3中一个新的配置项，值是一个函数，它是 Composition API “表演的舞台”，组件中所用到的：数据、方法、计算属性、监视......等等，均配置在setup中。
特点如下：
setup函数返回的对象中的内容，可直接在模板中使用。setup中访问this是undefined。setup函数会在beforeCreate之前调用，它是“领先”所有钩子执行的。
参考代码：
<script lang="ts">//这里以下是vue2的语法export default {name: 'Person',beforeCreate() {console.log("beforeCreate", "执行");},setup() {console.log("setup", "执行");// console.log("查看对应setup中的this是: ", this); //可以看到对应的this是unidefined Vue3中已经开始弱化this了//###### 数据（原本写在data中） ######let name = '张三'; //注意此时的的name不是响应式的let age = 18; //注意此时的的age不是响应式的let tel = '18888888888' //tel 我们的设计只是查看，所以是不是响应式的无所谓//###### 方法（原本写在methods中） ######function changeName() {name = '李四';console.log(name); //name 改了但是其不是响应式的}function changeAge() {age += 1;console.log(age); //age 改了但是其不是响应式的}function showTel() {alert(tel);}// return {name:name, age:age} //同名可以进行简写return {name, age, changeName, changeAge, showTel} //最后需要通过这一句话把定义的变量和方法交出去}}
</script>
setup返回值
若返回一个对象：则对象中的：属性、方法等，在模板中均可以直接使用（重点关注）。
若返回一个函数：则可以自定义渲染内容，代码如下：
<script lang="ts">//这里以下是vue2的语法export default {name: 'Person',beforeCreate() {console.log("beforeCreate", "执行");},setup() {console.log("setup", "执行");return () => '你好世界' //setup的返回时也可以是一个渲染函数}}
</script>
setup与OptionsAPI
首先他们是可以共存的。
Vue2 的配置（data、methos......）中可以访问到 setup中的属性、方法
但在setup中不能访问到Vue2的配置（data、methos......）。
如果与Vue2冲突，则setup优先。
<script lang="ts">//这里以下是vue2的语法export default {name: 'Person',beforeCreate() {console.log("beforeCreate", "执行");},data() {return {a: 100,b: this.name //可以通过this读取到setup中的数据}},methods: {test() {alert('测试')}},setup() {console.log("setup", "执行");//###### 数据（原本写在data中） ######let name = '张三'; let age = 18; let tel = '18888888888' //###### 方法（原本写在methods中） ######function changeName() {name = '李四';console.log(name); }function changeAge() {age += 1;console.log(age); }function showTel() {alert(tel);}return {name, age, changeName, changeAge, showTel}}}
</script>
setup的语法糖
参考语法糖写法
目前我们定义的数据还不是响应式的。
<template><div class="person"><h2>姓名: {{ name }}</h2><h2>年龄: {{ age }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="showTel">查看联系方式</button></div>
</template><script lang="ts">export default {name: 'Person' //用于配置组件名，否则组件名就是文件名}
</script><script setup lang="ts">//###### 数据（原本写在data中） ######let name = "张三";let age = 18;let tel = "18888888888";//###### 方法（原本写在methods中） ######function changeName() {name = "李四";console.log(name);}function changeAge() {age += 1;console.log(age);}function showTel() {alert(tel);}
</script><style>
.person {background-color: skyblue;box-shadow: 0 0 10px; /* 盒子阴影 */border-radius: 10px;padding: 20px;
}button {margin: 0 5px;
}
</style>
插件简化组件命名
为了对应组件命名的灵活性，上面我们编写了两个script 一个用于编写组合式写法，一个用于编写组件名，这里我们可以通过插件的方式进行简化操作。
1、插件安装：
npm i vite-plugin-vue-setup-extend -D
2、vite.config.ts中配置
import vueSetupExtend from 'vite-plugin-vue-setup-extend' //导入插件export default defineConfig({plugins: [ //...已有的插件vueSetupExtend() //在已有的基础上添加插件]
})
3、在代码中使用
<script setup lang="ts" name="Person234"> //就可以只用写一个，加一个name参数即可
4、参考代码：
<template><div class="person"><h2>姓名: {{ name }}</h2><h2>年龄: {{ age }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="showTel">查看联系方式</button></div>
</template><script setup lang="ts" name="Person234">//###### 数据（原本写在data中） ######let name = "张三";let age = 18;let tel = "18888888888";//###### 方法（原本写在methods中） ######function changeName() {name = "李四";console.log(name);}function changeAge() {age += 1;console.log(age);}function showTel() {alert(tel);}
</script><style>
.person {background-color: skyblue;box-shadow: 0 0 10px; /* 盒子阴影 */border-radius: 10px;padding: 20px;
}button {margin: 0 5px;
}
</style>
