全栈开发之路——前端篇（3）setup和响应式数据

全栈开发一条龙——前端篇
第一篇：框架确定、ide设置与项目创建
第二篇：介绍项目文件意义、组件结构与导入以及setup的引入。
本文为该系列的第三篇，主要讲述Vue核心的setup语法，同时讲解再使用了setup后如何设置响应式数据。
辅助文档：HTML标签大全（实时更新）

一、Setup

setup是Vue3特有的方便设置数据和方法的api，是目前Vue3工程主要使用的。是组合式Api，更加方便且易于维护。

1. setup引入数据

setup(){//数据let name = "TTTi9er"let age = 20let 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 = 100let 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)