Vue3学习笔记（二）：响应式数据

总所周知，Vue2的数据天然响应式。但是我们是Vue3，要高人一等，因此，他有他自己的响应式说法的…… ::aru:spit::

ref 创建：基本类型的响应式数据（基本类型+对象）

需要在setup中导入ref import {ref} from 'vue'
然后把需要响应式的数据使用ref()包裹起来
在setup中使用响应式数据，需要加.value
语法：let xxx = ref(初始值)。
**返回值：**一个RefImpl的实例对象，简称ref对象或ref，ref对象的value属性是响应式的。
注意点：
tS中操作数据需要：xxx.value，但模板中不需要.value，直接使用即可。
何时需要.value？模板中不需要；包裹在响应式对象里面的ref不需要；未包裹的ref需要。
对于let name = ref(‘张三’)来说，name不是响应式的，name.value是响应式的。

<script setup lang="ts" name="Person123">
import {ref} from 'vue'
        let name = '张三'
        let age = ref(20)
        let tel = '13465659898'
        
        function showTel(){
            alert(tel)
        }
        function changeAge(){
            age.value += 1
            console.log(age)
        }
</script>

reactive 创建：对象类型的响应式数据（只能对象）

作用：定义一个响应式对象（基本类型不要用它，要用ref，否则报错）
语法：let 响应式对象= reactive(源对象)。
返回值：一个Proxy的实例对象，简称：响应式对象。
注意点：reactive定义的响应式数据是“深层次”的。、

<template>
  <div class="person">
    <h2>汽车信息：一台{{ car.brand }}汽车，价值{{ car.price }}万</h2>
    <h2>游戏列表：</h2>
    <ul>
      <li v-for="g in games" :key="g.id">{{ g.name }}</li>
    </ul>
    <h2>测试：{{obj.a.b.c.d}}</h2>
    <button @click="changeCarPrice">修改汽车价格</button>
    <button @click="changeFirstGame">修改第一游戏</button>
    <button @click="test">测试</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { reactive } from 'vue' //引入reactive

// 数据
let car = reactive({ brand: '奔驰', price: 100 })  //使用reactive定义，和ref一样的使用
let games = reactive([
  { id: 'ahsgdyfa01', name: '英雄联盟' },
  { id: 'ahsgdyfa02', name: '王者荣耀' },
  { id: 'ahsgdyfa03', name: '原神' }
])
let obj = reactive({
  a:{
    b:{
      c:{
        d:666
      }
    }
  }
})

function changeCarPrice() {
  car.price += 10  //修改reactive定义的对象时，无需使用.value，ref需要
}
function changeFirstGame() {
  games[0].name = '流星蝴蝶剑'
}
function test(){
  obj.a.b.c.d = 999
}
</script>

可以发现，在ref中，在使用ref定义后的变量时，需要添加“.value”，但是在reactive中，无需使用”.value”，这是它俩的区别之一。

总结

其实ref接收的数据可以是：基本类型、对象类型。
若ref接收的是对象类型，底层其实也是调用了reactive函数。

所以在使用响应式数据是，其实ref足够完成一切，无脑使用他即可。但是由于每次都需要添加.value，略显麻烦，但是在vscode中，有一个官方插件volar，可以在设置中启动自动.value，只要检测到是ref定义的对象或基本类型，都会自动添加.value，不会再忘记添加导致项目报错啦~

Ref天下第一！！！

ref 对比 reactive

宏观角度看：

ref用来定义：基本类型数据、对象类型数据；

reactive用来定义：对象类型数据。

区别：

ref创建的变量必须使用.value（可以使用volar插件自动添加.value）。

reactive重新分配一个新对象，会失去响应式（可以使用Object.assign去整体替换）。

Object.assign(car, { brand: '奥拓', price: 1 })

使用原则：

若需要一个基本类型的响应式数据，必须使用ref。

若需要一个响应式对象，层级不深，ref、reactive都可以。

若需要一个响应式对象，且层级较深，推荐使用reactive。

toRef&&toRefs

作用：将一个响应式对象中的每一个属性，转换为ref对象。
备注：toRefs与toRef功能一致，但toRefs可以批量转换。

<template>
  <div class="person">
    <h2>姓名：{{person.name}}</h2>

    <h2>年龄：{{person.age}}</h2>

    <h2>性别：{{person.gender}}</h2>

    <button @click="changeName">修改名字</button>

    <button @click="changeAge">修改年龄</button>

    <button @click="changeGender">修改性别</button>

  </div>

</template>

<script lang="ts" setup name="Person">
  import {ref,reactive,toRefs,toRef} from 'vue'

  // 数据
  let person = reactive({name:'张三', age:18, gender:'男'})
    
  // 解构，通过toRefs将person对象中的n个属性批量取出，且依然保持响应式的能力
  let {name,gender} =  toRefs(person)
    
  // 通过toRef将person对象中的age属性取出，且依然保持响应式的能力
  let age = toRef(person,'age')

  // 方法
  function changeName(){
    name.value += '~'
  }
  function changeAge(){
    age.value += 1
  }
  function changeGender(){
    gender.value = '女'
  }
</script>