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

声明响应式数据

一、 组合式API

1.1 ref()

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

  <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 等这样的 原始数据无效；
• 示例展示：

  <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()：转换 响应式对象 中 某个属性 为 单独响应式数据，并且 值是关联的；
• 语法：

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

• 🔺注意：
  • 使用 toRef() 的前提 是对象必须被 reactive() 转换成响应式了；
  • 要使用解构之后的数据，需要添加 .value 的后缀；
  • toRef() 转换响应式数据包装成对象，value存放值的位置；
• 使用场景：
  • 有一个响应式数据，但是模板中只需要使用其中一项数据；
• 示例展示：
  • 基于 1.4.2 代码，对 info 对象中的 某个属性 进行 解构；

    // 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() 可以 批量解构数据并保持响应式
  • 对象成为普通对象:

    const obj = reactive({ a: 1});
    const obj1 = toRefs(obj);
    

• 🔺注意：
  • 使用 toRefs() 的前提 是对象必须被 reactive() 转换成响应式了；
  • 要使用解构之后的数据，需要添加 .value 的后缀；
  • toRefs() 转换响应式数据包装成对象，value存放值的位置；
• 使用场景：剥离响应式对象（解构 / 展开），想使用响应式对象中的多个或者所有属性为响应式数据；
• 示例展示：
  • 基于 1.4.2 的代码，对 info 对象的 所有属性 进行 解构；

  // 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
  **/
  

• 效果展示：
  

// 这块还不是太清楚，还要我自己瞎鼓捣一会
// 如果是这种写法
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 上）；

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