全栈开发一条龙——前端篇
第一篇：框架确定、ide设置与项目创建
第二篇：介绍项目文件意义、组件结构与导入以及setup的引入。
本文为该系列的第三篇，主要讲述Vue核心的setup语法，同时讲解再使用了setup后如何设置响应式数据。
辅助文档：HTML标签大全（实时更新）
目录
- 一、Setup
- 1. setup引入数据
- 2. setup传方法
- 3. setup与Vue2中data等的依赖
- 4. setup语法糖
- 二、响应式数据设置
- 1. ref法 创建基本类型响应式数据
- 2. reactive方法
setup与data、method是同级，所以不要忘记段后逗号。
一、Setup
setup是Vue3特有的方便设置数据和方法的api，是目前Vue3工程主要使用的。是组合式Api，更加方便且易于维护。
1. setup引入数据
setup(){
//数据
let name = "TTTi9er"
let age = 20
let tel = '114514'
return {a:name,b:age}
},
return什么数据取决于模板里用不用，你也可以使用传数据的快捷方式，在return里你可以直接写return (name,age)这样相当于return (name = name, age = age)
**注意，此时的name等变量不是相应式的，即数据发生改变的时候不会立刻反应在屏幕上。后续会说，在setup语法糖讲完之后会说。（vue2data中，全是相应式）
**
2. setup传方法
function showTel(){
alert(tel)
}
return {a:name,b:age,showTel}
在setup块里，用function定义方法，然后把方法名return即可。
注意，setup的返回值也可以是一个函数，但是不常用，知道即可，下面给出一个实例
return function(){
return '函数返回测试'
}
可以忽略所有，直接在页面渲染’函数返回测试‘。
3. setup与Vue2中data等的依赖
setup与Vue2的data等是可以共存的。
setup里的数据是最早解析的，所以Vue2能读取Vue3，比如setup里有let a=10，你可以在data中使用c=this.a,是可以在模板里读取c的。
setup中的数据不能读取Vue2写法中的data中的数据！
比如data里写了d:900,你不能在Vue3的setup中写let e = d
总体来说，Vue3向下兼容Vue2，建议不要混写
4. setup语法糖
<template>
<div class = "style_test">
<h1>其他组件</h1>
<h2>姓名：{{name}}</h2>
<h2>年龄: {{age}}</h2>
<button @click="showTel">查看电话</button>
</div>
</template>
<script>
export default{
name : 'Test',//组件名
}
</script>
<script setup>
let name = "TTTi9er"
let age = 100
let tel = '114514'
function showTel(){
alert(tel)
}
</script>
<style>
.style_test{
background-color: rgb(72, 138, 166);
box-shadow: 0 0 10px;
border-radius:10px;
padding: 20px;
}
</style>
如以上代码所示，我们如果要每一个返回，就会很麻烦，所以Vue3提供了一个setup语法糖，我们用标签<script setup></script>来声明语法糖，他会自动返回其中出现的所有内容。以上代码效果如下。
二、响应式数据设置
1. ref法 创建基本类型响应式数据
import {ref} from 'vue'
let name = ref('TTTi9er')
我们先引入ref函数，然后在需要相应的数据前加入ref()即可。当你用其他方法修改数据后，会直接渲染在网页上。
注意，这么操作之后，nmae会变成类（RefImpl对象），其value值为你设置的值。实际上，就是vue给你写了个方法，让数据可以实时更新。在框架中，加上ref的数据与原来的用法不变，千万不要改成name.value。
但是，后续的方法中，你需要写.value。例子如下
<script setup>
import {ref} from 'vue'
let name = 'TTTi9er'
let age = ref(100)
let tel = '114514'
function showTel(){
alert(tel)
}
function changeage_test(){
age.value += 1
}
</script>
<template>
<div class = "style_test">
<h1>其他组件</h1>
<h2>姓名：{{name}}</h2>
<h2>年龄: {{age}}</h2>
<button @click="showTel">查看电话</button>
<button @click="changeage_test">增加年龄</button>
</div>
</template>
这样你就已经把age设置为响应式变量了，点击增加后可以即时渲染到屏幕上。
注意，ref用于封装基本变量，字符串、整数等等，一般不包装对象
2. reactive方法
注意，reactive方法用于包装对象。使用方法与ref类似
let person = reactive({name : 'TTTiger',age : 19})
function changeage_test(){
person.age += 1
}
<template>
<div class = "style_test">
<h1>其他组件</h1>
<h2>姓名：{{person.name}}</h2>
<h2>年龄: {{person.age}}</h2>
<button @click="showTel">查看电话</button>
<button @click="changeage_test">增加年龄</button>
</div>
</template>
完全一样，只是把之前的.value换成 对象名.属性名 就行了,只要是对象即可，哪怕是类似别表对象等也行，样例如下 。
let games = reactive([
{id: '1', name: '我超，原'},
{id: '2', name: '我超，铲'},
{id: '3', name: '我超，农'}
])
function change_game(){
games[0].name = "原神，启动！"
}
<template>
<div class = "style_test">
<h1>其他组件</h1>
<h2>姓名：{{person.name}}</h2>
<h2>年龄: {{person.age}}</h2>
<button @click="showTel">查看电话</button>
<button @click="changeage_test">增加年龄</button>
<ul>
<li v-for="g in games" :key = "g.id">{{g.name}}</li>
</ul>
<button @click="change_game">修改第一个游戏</button>
</div>
</template>
以上代码展示了用reactive响应式包裹一个对象列表，操作是完全一样的。如果各位看不懂上面的结构，我会实时更新一个HTML标签大全，方便你理解结构。但是实际上，上面的结构你多写自然就会了，如果你没接触过，可以直接望文生义，比如这个v-for显然就是循环取出games中的元素。
注意，reactive定义的对象，不能再方法里给他分配新的对象，而要使用Object.assign(car,new_car)
