VUE3学习小记（2）- ref 与 reactive

ref()

在组合式 API 中，推荐使用ref()函数来声明响应式状态：

import { ref } from 'vue'
 
const count = ref(0)

ref() 接收参数，并将其包裹在一个带有 .value 属性的 ref 对象中返回：

const count = ref(0)
 
console.log(count) // { value: 0 }
console.log(count.value) // 0
 
count.value++
console.log(count.value) // 1

在模板中使用 ref 时，我们不需要附加 .value。为了方便起见，当在模板中使用时，ref 会自动解包

<div>{{ count }}div>

对于更复杂的逻辑，我们可以在同一作用域内声明更改 ref 的函数，并将它们作为方法与状态一起公开：

 
<template>
  <button @click="increment">
    {{ count }}
  button>
template>

为什么要使用 ref？

当你在模板中使用了一个 ref，然后改变了这个 ref 的值时，Vue 会自动检测到这个变化，并且相应地更新 DOM。这是通过一个基于依赖追踪的响应式系统实现的。当一个组件首次渲染时，Vue 会追踪在渲染过程中使用的每一个 ref。然后，当一个 ref 被修改时，它会触发追踪它的组件的一次重新渲染。

在标准的 JavaScript 中，检测普通变量的访问或修改是行不通的。然而，我们可以通过 getter 和 setter 方法来拦截对象属性的 get 和 set 操作。

该 .value 属性给予了 Vue 一个机会来检测 ref 何时被访问或修改。在其内部，Vue 在它的 getter 中执行追踪，在它的 setter 中执行触发。从概念上讲，你可以将 ref 看作是一个像这样的对象：

// 伪代码，不是真正的实现
const myRef = {
  _value: 0,
  get value() {
    track()
    return this._value
  },
  set value(newValue) {
    this._value = newValue
    trigger()
  }
}

另一个 ref 的好处是，与普通变量不同，你可以将 ref 传递给函数，同时保留对最新值和响应式连接的访问。当将复杂的逻辑重构为可重用的代码时，这将非常有用。

深层响应性​

Ref 可以持有任何类型的值，包括深层嵌套的对象、数组或者 JavaScript 内置的数据结构，比如 Map。

简单的理解为对于复杂的对象中的每一个单一对象都会被包装成响应式的。

DOM 更新时机​

当你修改了响应式状态时，DOM 会被自动更新。但是需要注意的是，DOM 更新不是同步的。Vue 会在“next tick”更新周期中缓冲所有状态的修改，以确保不管你进行了多少次状态修改，每个组件都只会被更新一次。

要等待 DOM 更新完成后再执行额外的代码，可以使用nexttick()全局 API：

import { nextTick } from 'vue'
 
async function increment() {
  count.value++
  await nextTick()
  // 现在 DOM 已经更新了
}

reactive()​

还有另一种声明响应式状态的方式，即使用 reactive() API。与将内部值包装在特殊对象中的 ref 不同，reactive() 将使对象本身具有响应性：

import { reactive } from 'vue'
 
const state = reactive({ count: 0 })

在模板中使用：

<button @click="state.count++">
  {{ state.count }}
button>

响应式对象是javascript代理，其行为就和普通对象一样。不同的是，Vue 能够拦截对响应式对象所有属性的访问和修改，以便进行依赖追踪和触发更新。

reactive() 将深层地转换对象：当访问嵌套对象时，它们也会被 reactive() 包装。当 ref 的值是一个对象时，ref() 也会在内部调用它。与浅层 ref 类似，这里也有一个 shallowreactive API 可以选择退出深层响应性。

值得注意的是，reactive() 返回的是一个原始对象的 proxy，它和原始对象是不相等的：

const raw = {}
const proxy = reactive(raw)
 
// 代理对象和原始对象不是全等的
console.log(proxy === raw) // false

只有代理对象是响应式的，更改原始对象不会触发更新。因此，使用 Vue 的响应式系统的最佳实践是 仅使用你声明对象的代理版本。

为保证访问代理的一致性，对同一个原始对象调用 reactive() 会总是返回同样的代理对象，而对一个已存在的代理对象调用 reactive() 会返回其本身：

// 在同一个对象上调用 reactive() 会返回相同的代理
console.log(reactive(raw) === proxy) // true
 
// 在一个代理上调用 reactive() 会返回它自己
console.log(reactive(proxy) === proxy) // true

ref 与  reactive 的区别

数据类型不同

ref : 将一个普通的 JavaScript 值包装成响应式的引用类型。可以理解为 ref 是对普通值的包装。虽然ref 可以包装复杂对象，但其内部会使用reactive转成对象代理。

reactive：将一个普通的 JavaScript 对象（或数组）转换为响应式代理对象。可以理解为 reactive 是对对象（或数组）的包装。

访问方式不同

ref：使用 .value 属性来访问和修改值。

reactive：可以直接访问和修改对象或数组的属性或元素，而无需使用 .value。

更新触发方式不同

ref：通过 ref() 或 .value 的赋值来触发更新。

reactive：通过直接修改对象或数组的属性或元素来触发更新。

示例

import { ref, reactive } from 'vue';
 
// ref示例
const count = ref(0);
console.log(count.value); // 访问值
count.value += 1; // 修改值
 
// reactive示例
const state = reactive({
  name: 'Alice',
  age: 25,
});
console.log(state.name); // 访问属性
state.age += 1; // 修改属性
 

总结

1.ref 主要针对基础类型，复杂类型内部会使用reactive转为代理对象

2.响应式可以针对某一个属性和对象进行页面更新（即局部数据更新）

3.响应式更新也不是立即就更新，它会先缓存更新内容，等待nexttick的到来，要立即更新，可直接调用nexttick函数

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

参考文章：reactive和ref有什么区别_ref和reactive的区别_LuoBoof的博客-CSDN博客