声明响应式数据

一、 组合式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 += 100console.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 } = infofunction 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>