Why

以下主要是个人目前学习Vue的最基本的响应式基础的笔记。

How

众所周知，在最新的vue3中主要是使用的是组合式api，区别于上一个版本的选项式api。其中的理念差别就相当于是将原来的零散的方法和数据监视等都整合，因为我其实之前接触的选项式比较少，所以直接上手就是选项式了，同时使用最新的语法糖setup。
以下是一个简单的示例：

<script lang="ts" setup>  
import {ref} from "vue";  
  
let name = ref("Test");  
let age = ref(18);  
let phone = ref(1515);  
let address = "湖北省武汉市";  
  
function changePhone() {  
  phone.value = 4545;  
}  
  
function changeName() {  
  name.value = "454545";  
}  
  
function changeAge() {  
  age.value += 1;  
}  
  
  
</script>  
  
<template>  
  <div>  
    <h2>  
      <h2>名字：{{ name }}</h2>  
      <h2>年龄：{{ age }}</h2>  
      <h2>手机号码：{{ phone }}</h2>  
      <h2>住址：{{ address }}</h2>  
  
      <button @click="changeName()">修改名字</button>  
      <button @click="changeAge()">修改年龄</button>  
      <button @click="changePhone()">修改号码</button>  
    </h2>  
  </div>  
  
  
</template>  
  
<style scoped>  
  
</style>

其中在script中使用语法糖setup可以不用写返回成对象从而调用数据，大大的简省的精力。如果是简单的数据类型，需要使用ref将数据变换成响应式，不然的话点击修改页面的数据会无法刷新。如果不需要页面数据变化的例如address就不需要。
以下是Reactive的示例：

<script setup lang="ts">  
import {reactive, ref} from "vue";  
  
let person = reactive({  
  name: 'Peng',  
  age: 3,  
  phone: 15154  
})  
  
let person2 = ref({  
  name: 'January',  
  age: 5,  
  phone: 15154  
})  
  
let games = reactive([  
  {id: '0', name: 'game1'},  
  {id: '1', name: 'game2'},  
  {id: '2', name: 'game3'},  
])  
  
function changeAge() {  
  person.age += 1;  
}  
  
function changePhone() {  
  person.phone += 1;  
}  
  
function changeGameName() {  
  games[0].name = "game11111";  
}  
  
function changePerson() {  
  // person = {name: 'John', age: 4, phone: 15154}; //页面数据不会更新  
  // person = reactive({name: 'John', age: 4, phone: 15154});//页面数据不会更新  
  
  Object.assign(person, {name: 'John', age: 4, phone: 15154})  
}  
  
function changePerson2() {  
  person2.value = {name: 'Jerry', age: 45, phone: 78789151}  
}  
</script>  
  
<template>  
  <div>  
    <h2>我是{{ person.name }},年龄：{{ person.age }} 手机号是：{{ person.phone }}</h2>  
    <button @click="changeAge">修改年龄</button>  
    <button @click="changePhone">修改手机号</button>  
    <hr>   
    <ul>      
	    <li v-for="g in games" :key="g.id">{{ g.name }}</li>  
    </ul>  
    <button @click="changeGameName">修改游戏名称</button>  
    <hr/>  
    <button @click="changePerson">修改第一个人的个人信息（Reactive）</button>  
    <hr/>    
    <h2>第二个人的名字是{{ person2.name }}，年龄是:{{ person2.age }},手机号是：{{ person2.phone }}</h2>  
    <button @click="changePerson2">修改第二个人的个人信息（Ref）</button>  
  </div>  
</template>  
  
<style scoped>  
  
</style>

上述的person和games都是使用reactive封装为响应式的对象。你会发现上述的person2是个对象但是使用了ref，其实这个使用方法是没问题的，因为ref的底层其实是通过了reactive实现的，但是需要注意的是使用了ref的时候取值需要使用.value才可以。
函数changePerson方法中有两个注释的表示无法形成响应式对象。两种对象替换了，无法响应。这告诉我们如果你是使用reactive封装成对象的话，那么在重新赋值对象的时候一定要使用内部方法Object.assign，表示将后续的对象的所有属性依次赋值给第一个对象。
函数changePerson2方法中使用ref封装的对象，可以直接将.value赋值给新的对象。
或许你会想说那么以后所有的数据直接都是用ref不就好了，其实大致也可以，但是在你这个对象内部嵌套特别多的时候，层次很多建议还是使用reactive的。或者延续当前项目的前辈的开发习惯。

Tips

注意想要页面元素更新。一定要使用响应式。
注意ul内部遍历的使用方法。

目录CONTENT

Vue响应式基础

Why

How

Tips