【Vue3】06-利用setup编写vue（1）

其它篇章：
1.【Vue3】01-创建Vue3工程
2.【Vue3】02-Vue3工程目录分析
3.【Vue3】03-编写app组件——src
4.【Vue3】04-编写vue实现一个简单效果
5.【Vue3】05-Options API和Composition API的区别
合集篇：
1.【Vue3】创建并运行一个简易的Vue3项目

setup

setup概述

理解概念

概念：

• 在Vue3中，setup函数是一个全新的选项，用于替代Vue2中的beforeCreate和created钩子函数。
• 它是在 组件创建 时执行的一个函数，主要用于 声明 组件的状态和行为，使得组件更加清晰和易于维护。

优点：

在vue3中，相对vue2有一个优点，它可以在直接连写几个<Person/>(引入vue组件，这里用Person举例)。
举例：代码如下。

<template><Person/><Person/><Person/><Person/><Person/>
</template>

验证：最终效果如下，可以看到有很多组件，vue2就不能这样写。

实操验证：基本用法

原始代码：

<template><div class="person"><h1>姓名：{{name}}</h1><h1>年龄：{{age}}</h1><button @click="show">查看生日</button></div>
</template><script lang="ts">export default{name:"person",data() {return{name:'zhangsan',age:20,birth:'2005.1.1'}            },methods:{show(){alert(this.birth)}}}
</script><style>.person {background-color: rgb(200, 255, 0);box-shadow: 0 0 10px;border-radius: 20px;padding: 20px;}
</style>

• 在此基础上完成对setup的实操。

步骤一：创建setup，删除data()、methods

对script标签内容进行修改，在<script>的export中添加setup(){}，代码如下：

<script lang="ts">export default{name:"person",setup(){//之后在这添加内容}}
</script>

步骤二：添加数据

1. 在setup()里添加数据，代替之前的data()（vue2写法）的内容，代码如下：

   <script lang="ts">export default{name:"person",setup(){let name = 'zhangsan';let age = 20;let birth = '2025.1.1';}}
   </script>
   

注意：这里添加的name、age、birth的数据都不是响应式的，在后面添加函数时，修改后的数据，是不会覆盖开始就显示的数据的。

2. 修改过后，发现前面对数据的引用飘红了：
   
   这是因为没有加return，在setup中添加return {n:name,a:age}，再将{{ }}的内容分别改为n,a就行了：
   

3. return中的内容，冒号左边对应引用，冒号对应setup内的定义，但我们一般把这两部分设置为一样的，比如：{name:name,age:age}，这样更容易分辨。而两部分一样的话，就可以简写为这样的形式：{name,age}。
   添加数据后，最终的代码如下：

   <template><div class="person"><h1>姓名：{{name}}</h1><h1>年龄：{{age}}</h1></div>
   </template><script lang="ts">export default{name:"person",setup(){let name = 'zhangsan';let age = 20;let birth = '2025.1.1';return {name,age}}}
   </script>
   

步骤三：添加方法

接下来在setup里添加方法。

注意：

1. 记住要添加在return之前，不然到return就结束了，后面的方法就没用了。
2. 不要在setup里用this，this在setup函数里是undefined。要修改变量比如name，直接name='???'就可以了。

1. 定义一个函数，代码如下：

   function show(){//之后在这添加内容
   }
   

2. 在函数中添加内容，完成指定功能，并将其添加到return中，代码如下：

   function show(){alert(birth)
   }
   return {name,age,show}
   

3. 在<template>里的容器里添加按钮，最终完整代码如下：

<template><div class="person"><h1>姓名：{{name}}</h1><h1>年龄：{{age}}</h1><button @click="show">查看生日</button></div>
</template><script lang="ts">export default{name:"person",setup(){let name = 'zhangsan';let age = 20;let birth = '2025.1.1';function show(){alert(birth)}return {name,age,show}}}
</script>
<style>.person {background-color: rgb(200, 255, 0);box-shadow: 0 0 10px;border-radius: 20px;padding: 20px;}
</style>

步骤四：验证

终端输入npm run dev启动服务器，浏览器访问，并点击“查看生日”，的到以下界面：

完整代码：

App.vue:

<template><Person/><Person/><Person/><Person/><Person/>
</template><script lang="ts">import Person from './components/Person.vue';export default{name:"app",components:{Person}}
</script>
<style>.app {background-color: aqua;box-shadow: 0 0 10px;border-radius: 20px;padding: 20px;}
</style>

Person.vue：

<template><div class="person"><h1>姓名：{{name}}</h1><h1>年龄：{{age}}</h1><button @click="show">查看生日</button></div>
</template><script lang="ts">export default{name:"person",setup(){let name = 'zhangsan';let age = 20;let birth = '2025.1.1';function show(){alert(birth)}return {name,age,show}}}
</script>
<style>.person {background-color: rgb(200, 255, 0);box-shadow: 0 0 10px;border-radius: 20px;padding: 20px;}
</style>

vue工程的基本创建与运行方法可参考以下篇章：

其它篇章：
1.【Vue3】01-创建Vue3工程
2.【Vue3】02-Vue3工程目录分析
3.【Vue3】03-编写app组件——src
4.【Vue3】04-编写vue实现一个简单效果
5.【Vue3】05-Options API和Composition API的区别
合集篇：
1.【Vue3】创建并运行一个简易的Vue3项目