Vue3全家桶 - Vue3 - 【2】声明响应式数据（ref + reactive + toRef + toRefs）

声明响应式数据

一、组合式API

1.1 ref()

ref() 函数，可以创建 任何数据类型 的 响应式数据；
🔺注意：
- 当值为 对象类型 时，会用 reactive() 自动转换它的 .value；
  - ref 函数的内部实现依赖于 reactive 函数；
- 在 script 中 使用值 的时候，需要添加 .value 的后缀；
- 在 模板中 使用 ref申明 的 响应式数据 ，可以省略 .value；
使用场景：
- 基本数据类型；
- 数组；

示例展示：

html 复制代码

<script setup>
    // 引入 ref 函数，来声明响应式对象
    import { ref } from 'vue'

    // 使用 ref 函数来声明原始类型的数据源，具备响应式
    let account = ref('Abc')

    // 更改账号，控制台查看最新值
    function changeAccount() {
        // 通过 ref 函数声明的响应式数据，需要使用 .value 来获取数据的值
        account.value += '='
        console.log(account)
    }

    // 使用 ref 函数来声明对象类型的数据源：具备响应式
    let emp = ref({
        salary: 7000,
        name: 'Jack'
    })

    // 更改员工薪资，控制台查看最新值
    function changeEmpSalary() {
        // 通过 ref 函数声明的响应式数据，需要使用 .value 来获取数据的值
        emp.value.salary += 100
        console.log(emp)
    }
</script>

<template>
  <h1>账号：{{ account }}</h1>
  <button @click="changeAccount">点我更改账号</button>

  <hr>

  <h1>员工：{{ emp }}</h1>
  <button @click="changeEmpSalary">点我更改员工薪资</button>
</template>

1.2 ractive()

reactive() 函数，它可以定义一个 引用数据类型 成为 响应式数据（Object、Array、Set、Map）；
使用场景：
- Object；
🔺注意：
- 使用的时候不能对数据进行 普通解构 ，解构出来的数据 不具备响应式 ；
  - 如果需要进行解构，需要使用特殊的函数；
- 对 string、number、boolean 等这样的 原始数据无效；

示例展示：

html 复制代码

<script setup>
    import { ref, reactive, toRef, toRefs } from 'vue';
    // NOTE ref - 使用 - 将基本数据类型转换成响应式数据
    let account = ref(123456)

    // NOTE reactive - 使用 - 将引用数据类型转换成响应式数据
    let info = reactive({
        name: '奥特曼',
        age: 22
    })

    // NOTE 将 info 进行解构，查看解构后的数据是否具有响应式
    // NOTE 结论：使用 reactive 将引用数据类型转换成响应式数据的时候，不能对其进行解构，因为解构出来的数据不具备响应式
    let { name, age } = info

    function changeAccount() {
        account.value++
    }

    function changeInfo() {
        info.age++
    }

    function changeName() {
        name += '1'
    }

    function changeAge() {
        age++
    }

</script>

<template>
  <h3> {{ account }} </h3>
  <button @click="changeAccount"> 改变数字的值 </button>
  <br>
  <h3> {{ info }} </h3>
  <button @click="changeInfo"> 改变对象的值 </button>
  <br>
  <h3> {{ name }} </h3>
  <button @click="changeName"> 改变name的值 - 解构 </button>
  <br>
  <h3> {{ age }} </h3>
  <button @click="changeAge"> 改变age的值 - 解构 </button>
</template>

效果展示：

1.3 toRef()

toRef() ：转换 响应式对象 中 某个属性 为 单独响应式数据 ，并且 值是关联的；

语法：

js 复制代码

import { toRef } from 'vue'
let 新变量名 = toRef(要转换的对象名, '要转换对象中的属性名')

🔺注意：
- 使用 toRef() 的前提是对象必须被 reactive() 转换成响应式了；
- 要使用解构之后的数据，需要添加 .value 的后缀；
- toRef() 转换响应式数据包装成对象，value存放值的位置；
使用场景：
- 有一个响应式数据，但是模板中只需要使用其中一项数据；

示例展示：

基于 1.4.2 代码，对 info 对象中的某个属性进行解构；

js 复制代码

// NOTE 将 info 进行解构，查看解构后的数据是否具有响应式
// NOTE 结论：使用 reactive 将引用数据类型转换成响应式数据的时候，不能对其进行解构，因为解构出来的数据不具备响应式
// let { name, age } = info

// NOTE 使用 toRef 对 info对象 的 某个属性 进行解构，并转换成响应式数据
let name = toRef(info, 'name')
let age = toRef(info, 'age')

function changeName() {
    console.log(name)
    // 添加 .value 后缀才会生效
    name.value += '1'
}

const changeAge = () => {
    // NOTE 对象数据格式
    console.log(typeof age)
    // NOTE 数字
    console.log(typeof age.value)
    // 添加 .value 后缀才会生效
    age.value++
}

效果展示：
- 可以看到使用 toRef() 解构之后的数据，是一个Object，value 存放数据；

1.4 toRefs()

toRefs() ：
- 将一个响应式数据转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的 ref。每个单独的 ref 都是使用 toRef() 创建的；
- 转换 响应式对象 中 所有属性 为 单独响应式数据 ，对象成为 普通对象 ，并且 值是关联的
- 🔺 toRefs() 可以 批量解构数据并保持响应式
- 对象成为普通对象:
  js 复制代码
```
const obj = reactive({ a: 1});
const obj1 = toRefs(obj);
```
🔺注意：
- 使用 toRefs() 的前提是对象必须被 reactive() 转换成响应式了；
- 要使用解构之后的数据，需要添加 .value 的后缀；
- toRefs() 转换响应式数据包装成对象，value存放值的位置；
使用场景：剥离响应式对象（解构 / 展开），想使用响应式对象中的多个或者所有属性为响应式数据；

示例展示：

基于 1.4.2 的代码，对 info 对象的所有属性进行解构；

js 复制代码

// NOTE 使用 toRef 对 info对象 的 某个属性 进行结构，并转换成响应式数据
// let name = toRef(info, 'name');
// let age = toRef(info, 'age');

// NOTE 使用 toRefs 将对象的所有属性进行解构，此时，该对象是个普通对象，所有的值具有响应式
const info1 = toRefs(info);
let { name, age } = toRefs(info);
// 以上两种方式，使用的时候都需要添加 .value 的后缀
/**
* info1.nmae.age += 1
* age.value += 1
**/

效果展示：

js 复制代码

// 这块还不是太清楚，还要我自己瞎鼓捣一会
// 如果是这种写法
let info1 = toRefs(info)
// 1. 不改变 info1 里面数据的时候，改变 info 数据，info1数据也会同步发生变化；
// 2. 改变 info1 里面某个属性的数据
    // info 对应属性的数据不会发生变化，视图上info1展示的信息不会立即发生变化
    // 只有当info数据改变的时候（只要有一个属性改变，info1就会展示这次修改的数据），info1才会展示这次修改之后的数据
    // 再次改变 info 里面对应属性的数据，info1里面对应属性的数据不会发生改变；
// 新增方法
    const changeAge1 = () => {
        console.log(info1)
        info1.age = 456
    }
// 新增结构
<h3> {{ info1 }} </h3>
<button @click="changeAge1"> 改变info1-age的值 </button>

二、选项式API的响应式数据

可用 data 选项来声明组件的响应式状态，该 data 选项的值应为返回一个对象的函数；
data 函数返回对象的所有顶层属性都会被代理到组的实例（既方法和生命周期钩子中的 this 上）；

js 复制代码

<script>
export default {
    data: () => ({
        // 定义数据
    }),
    methods: {
        // 定义方法
    }
}
</script>

Vue3全家桶 - Vue3 - 【2】声明响应式数据（ref + reactive + toRef + toRefs）

声明响应式数据

一、 组合式API

1.1 ref()

1.2 ractive()

1.3 toRef()

1.4 toRefs()

二、 选项式API的响应式数据

一、组合式API

二、选项式API的响应式数据