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

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

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)