响应式数据之ref

前文Car.vue的代码中声明变量，有两种方式：

//导入ref
import { ref } from 'vue'
//响应式数据
let vehicleAge = ref(1);
//非响应式数据
let vehicleNo = '车A12345';

响应式数据，就是在script中做了更改，会自动反映在页面上。

ref包裹的响应式数据，操作时必须加“.value”。

如代码：

<template>
    <div class="car">
        <h1>车龄：{{ vehicleAge }}</h1>
        <button @click="changeVehicleAge">修改车龄</button>
    </div>
</template>
<script lang="ts" setup name="Car">
//导入ref
import { ref } from 'vue'
//响应式数据
let vehicleAge = ref(1)
function changeVehicleAge() {
    // ref声明的响应式数据，操作时必须加".value"
    vehicleAge.value = vehicleAge.value + 1
    console.log('车龄：', vehicleAge);
}
</script>

点击“修改车龄”按钮，页面上的车龄数字会增加。

如果不被ref包裹，则是非响应式数据，在changeVehicleAge的方法里，vehicleAge会+1，但页面的数据不会变动。

响应式数据之reactive

创建文件
src/components/Driver/index.vue：

<template>
    <div class="driver">
        <h1>司机姓名：{{ driver.driverName }}</h1>
        <h1>联系电话：{{ driver.phoneNum }}</h1>
        <input type="tel" v-model="newPhoneNum" placeholder="请输入新的联系电话" />
        <button @click="changePhoneNum">修改联系电话</button>
    </div>
</template>
<script lang='ts' setup name='Driver'>
import { reactive } from 'vue';

let driver = reactive({ driverName: "张师傅", phoneNum: "13555555555" })
let newPhoneNum = ""

function changePhoneNum() {
    driver.phoneNum = newPhoneNum
    console.log('Driver：', driver);
}
</script>
<style>
.driver {
    background-color: burlywood;
    font-size: small;
    color: black;
    padding: 10px 10px 10px 10px;
}
</style>

v-model是双向绑定，script修改，页面也会同步变更，页面修改，script也会同步变更。

一般而言，ref定义基本类型，数字、字符串等，reactive定义的是对象、数组、Map、Set等。

但是，ref也可以定义对象，而reactive只能定义对象（这是官方文档给出的其局限性之一）。

操作ref的数据，需要加“.value”的后缀，reactive不需要。

ref定义的对象，其value就是一个reactive定义的对象。

reactive的局限性之二是不能替换整个对象，例如：

/**
 * 模拟通过HTTP请求获取新的司机信息，替换原有Driver
 */
function changeDriver() {
    //从服务器拿来的数据
    let driverFromServer = { driverName: "李师傅", phoneNum: "13888888888" }
    //错误的写法
    //driver = driverFromServer
    //driver = reactive(driverFromServer)
    //正确的写法
    Object.assign(driver, driverFromServer)
}

错误写法是将driver整体替换为driverFromServer，reactive就失效。

而Object.assign则是将driverFromServer里的属性一个一个复制到driver里，reactive生效。

如果用ref(driver)，则可以：

driver.value = driverFromServer

局限性之三是对解构操作不友好，例如：

//定义对象类型，类似Java的public class DriverEntity()
interface Driver {
    driverName: string;
    phoneNum: string
}
//类似Java的声明对象 DriverEntity driver=new DriverEntity() 
let driver: Driver = reactive({ driverName: "张师傅", phoneNum: "13555555555" })
function changeDriverName() {
    //将响应式对象的某个属性解构为本地变量
    let driverName = driver.driverName
    //修改本地变量，但原响应对象的数据不会变
    driverName = "X师傅"
    //将响应式对象的某个属性传递给函数，修改后，原响应对象的数据不会变
    //testReactiveObj1(driver.driverName)
    //将响应式对象整体传递给函数，修改后，数据才会变化
    //testReactiveObj2(driver)
}

function testReactiveObj1(driverName: string) {
    driverName = "Y师傅"
}

function testReactiveObj2(driver: Driver) {
    driver.driverName = "Z师傅"
}

以上，只有testReactiveObj2，修改之后，页面的数据会同步变动。

官网建议使用ref()作为声明响应式状态的主要 API。

解构赋值响应式数据

上节说到reactive的响应式对象局限性之一就是对解构操作不友好，但是我们在实际开发中，确实有解构为本地变量并操作，且要同步回去的要求，这就用到toRef（转属性）、toRefs（转对象）。

<template>
    <div class="driver">
        <h1>司机姓名：{{ driver.driverName }}</h1>
        <h1>联系电话：{{ driver.phoneNum }}</h1>
        <button @click="changeDriver">换司机</button>
    </div>
</template>
<script lang='ts' setup name='Driver'>
import { reactive, toRefs } from 'vue';

let driver = reactive({ driverName: "张师傅", phoneNum: "13555555555" })
//错误写法。修改driverName，页面不会同步修改
//let { driverName, phoneNum } = driver
//正确写法1。通过toRefs，将响应式对象driver的属性解构，并赋值给对应的ref属性
let { driverName, phoneNum } = toRefs(driver)
//正确写法2。将响应式对象driver转换为一个普通对象，但其每个属性都是ref。
let newDriver = toRefs(driver)
//以上两种写法，修改新的对象或属性，会同步修改driver的对应属性
console.log('新对象：', newDriver);

function changeDriver() {
    // 错误写法
    // driverName="X师傅"
    // phoneNum="13888888888"
    // 正确写法1
    // driverName.value = "X师傅"
    // phoneNum.value = "13888888888"
    // 正确写法2
    newDriver.driverName.value = "Y师傅"
    newDriver.phoneNum.value = "13999999999"
}
</script>
<style>
.driver {
    background-color: burlywood;
    font-size: small;
    color: black;
    padding: 10px 10px 10px 10px;
}
</style>

看toRefs源代码，其实就是遍历对象的Key，并调用toRef，toRef的写法：

let driverNameRef=toRef(driver,"driverName")

不展开讲了。