Comprehensive inventory of ref and reactive in vue3

I know if you have such doubts when using Vue3, "ref and rective can create a responsive object, how should I choose?", "Why does a responsive object lose its responsiveness after destructuring? How should it be handled? ?” Today we will take a comprehensive inventory of ref and reactive. I believe you will gain something different after reading it. Let’s learn together!

reactive()

Basic usage

We can use it in Vue3 reactive() Create a responsive object or array:

import { reactive } from 'vue'

const state = reactive({ count: 0 })

This responsive object is actually a Proxy, Vue will use this Proxy Side effects are collected when the properties are accessed, and side effects are triggered when the properties are modified.

To use responsive state in component templates, you need to define and return it in the setup() function. [Related recommendations: vuejs video tutorial, web front-end development]

<script>
import { reactive } from &#39;vue&#39;

export default {  setup() {    const state = reactive({ count: 0 })    return {      state    }  }}
</script>

<template>
  <div>{{ state.count }}</div>
</template>

Of course, you can also use <script setup>,## Top-level imports and variable declarations in #<script setup> can be used directly in templates.

<script setup>
import { reactive } from &#39;vue&#39;

const state = reactive({ count: 0 })

Responsive proxy vs original object

reactive() returns a Proxy of the original object, they Are not equal:

const raw = {}
const proxy = reactive(raw)

console.log(proxy === raw) // false

The original object can also be used in the template, but modifying the original object will not trigger an update. Therefore, to use Vue's reactive system, you must use proxies.

<script setup>
const state = { count: 0 }
function add() {
  state.count++
}
</script>

<template>
  <button @click="add">
    {{ state.count }} <!-- 当点击button时，始终显示为 0 -->
  </button>
</template>

To ensure the consistency of access to the proxy, calling

reactive() on the same original object will always return the same proxy object, while calling ## on an existing proxy object #reactive() will return itself: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>const raw = {} const proxy1 = reactive(raw) const proxy2 = reactive(raw) console.log(proxy1 === proxy2) // true console.log(reactive(proxy1) === proxy1) // true</pre><div class="contentsignin">Copy after login</div></div>This rule also applies to nested objects. Relying on deep responsiveness, nested objects within responsive objects are still proxies:

const raw = {}
const proxy = reactive({ nested: raw })
const nested = reactive(raw)

console.log(proxy.nested === nested) // true

shallowReactive()

In Vue, the status is deep responsive by default of. But in some scenarios, we may want to create a

shallow reactive object

to make it responsive only at the top level. In this case, we can use shallowReactive(). <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>const state = shallowReactive({ foo: 1, nested: { bar: 2 } }) // 状态自身的属性是响应式的 state.foo++ // 下层嵌套对象不是响应式的，不会按期望工作 state.nested.bar++</pre><div class="contentsignin">Copy after login</div></div>Note: Shallow reactive objects should only be used for root-level state in components. Avoid nesting it in a deeply reactive object, as the properties inside it will have inconsistent responsive behavior and will be difficult to understand and debug after nesting.

Limitations of reactive()

Although reactive() is powerful, it also has the following limitations:

Only Valid for object types (objects, arrays, and collection types such as
• Map

  , Set), and for string, number, and boolean Such primitive types are invalid.

Because Vue's reactive system is tracked through property access, if we directly "replace" a reactive object, this will cause the reactive connection to the original reference to be lost:

• <script setup>
  import { reactive } from &#39;vue&#39;
  
  let state = reactive({ count: 0 })
  function change() {  // 非响应式替换
   state = reactive({ count: 1 })}
  </script>
  
  <template>
   <button @click="change">
     {{ state }} <!-- 当点击button时，始终显示为 { "count": 0 } -->
   </button>
  </template>

When assigning or destructuring the properties of a reactive object to local variables, or passing the property into a function, responsiveness will be lost:

• const state = reactive({ count: 0 })
  
  // n 是一个局部变量，和 state.count 失去响应性连接
  let n = state.count
  // 不会影响 state
  n++
  
  // count 也和 state.count 失去了响应性连接
  let { count } = state
  // 不会影响 state
  count++
  
  // 参数 count 同样和 state.count 失去了响应性连接
  function callSomeFunction(count) {
   // 不会影响 state
   count++
  }
  callSomeFunction(state.count)

In order to solve the above limitations,

ref

shines on the scene!

ref()

Vue provides a

ref()

method that allows us to create reactive refs using any value type.

Basic usage

ref()

Pack the incoming parameters into a ref object with value attributes : <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>import { ref } from &amp;#39;vue&amp;#39; const count = ref(0) console.log(count) // { value: 0 } count.value++ console.log(count.value) // 1</pre><div class="contentsignin">Copy after login</div></div>Similar to the properties of responsive objects, the

value

properties of ref are also responsive. At the same time, when the value is of object type, Vue will automatically use reactive() to process the value. A ref containing an object can reactively replace the entire object:

<script setup>
import { ref } from &#39;vue&#39;

let state = ref({ count: 0 })
function change() {
  // 这是响应式替换
  state.value = ref({ count: 1 })
}
</script>

<template>
  <button @click="change">
    {{ state }} <!-- 当点击button时，显示为 { "count": 1 } -->
  </button>
</template>

ref No loss of responsiveness when deconstructing properties from a general object or passing properties to a function:

Reference

Detailed answers to front-end advanced interview questions

const state = {
  count: ref(0)
}
// 解构之后，和 state.count 依然保持响应性连接
const { count } = state
// 会影响 state
count.value++

// 该函数接收一个 ref, 和传入的值保持响应性连接
function callSomeFunction(count) {
  // 会影响 state
  count.value++
}
callSomeFunction(state.count)

ref()

allows us to create ref objects using any value type without losing them Pass these objects responsively. This feature is very important and is often used to extract logic into Combined functions. <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>// mouse.js export function useMouse() { const x = ref(0) const y = ref(0) // ... return { x, y } }</pre><div class="contentsignin">Copy after login</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;script setup&gt; import { useMouse } from &amp;#39;./mouse.js&amp;#39; // 可以解构而不会失去响应性 const { x, y } = useMouse() &lt;/script&gt;</pre><div class="contentsignin">Copy after login</div></div><h3 id="strong-ref-的解包-strong"><strong>ref 的解包</strong></h3><p>所谓解包就是获取到 ref 对象上 <code>value 属性的值。常用的两种方法就是 .value 和 unref()。 unref() 是 Vue 提供的方法，如果参数是 ref ，则返回 value 属性的值，否则返回参数本身。

ref 在模板中的解包

当 ref 在模板中作为顶层属性被访问时，它们会被自动解包，不需要使用 .value 。下面是之前的例子，使用 ref() 代替：

<script setup>
import { ref } from &#39;vue&#39;

const count = ref(0)
</script>

<template>
  <div>
    {{ count }} <!-- 无需 .value -->
  </div>
</template>

还有一种情况，如果文本插值（{{ }}）计算的最终值是 ref ，也会被自动解包。下面的非顶层属性会被正确渲染出来。

<script setup>
import { ref } from &#39;vue&#39;

const object = { foo: ref(1) }

</script>

<template>
  <div>
    {{ object.foo }} <!-- 无需 .value -->
  </div>
</template>

其他情况则不会被自动解包，如：object.foo 不是顶层属性，文本插值（{{ }}）计算的最终值也不是 ref：

const object = { foo: ref(1) }

下面的内容将不会像预期的那样工作：

<div>{{ object.foo + 1 }}</div>

渲染的结果会是 [object Object]1，因为 object.foo 是一个 ref 对象。我们可以通过将 foo 改成顶层属性来解决这个问题：

const object = { foo: ref(1) }
const { foo } = object

<div>{{ foo + 1 }}</div>

现在结果就可以正确地渲染出来了。

ref 在响应式对象中的解包

当一个 ref 被嵌套在一个响应式对象中，作为属性被访问或更改时，它会自动解包，因此会表现得和一般的属性一样：

const count = ref(0)
const state = reactive({ count })

console.log(state.count) // 0

state.count = 1
console.log(state.count) // 1

只有当嵌套在一个深层响应式对象内时，才会发生解包。当 ref 作为 浅层响应式对象 的属性被访问时则不会解包：

const count = ref(0)
const state = shallowReactive({ count })

console.log(state.count) // { value: 0 } 而不是 0

如果将一个新的 ref 赋值给一个已经关联 ref 的属性，那么它会替换掉旧的 ref：

const count = ref(1)
const state = reactive({ count })

const otherCount = ref(2)
state.count = otherCount

console.log(state.count) // 2
// 此时 count 已经和 state.count 失去连接
console.log(count.value) // 1

ref 在数组和集合类型的解包

跟响应式对象不同，当 ref 作为响应式数组或像 Map 这种原生集合类型的元素被访问时，不会进行解包。

const books = reactive([ref('Vue 3 Guide')])
// 这里需要 .value
console.log(books[0].value)

const map = reactive(new Map([['count', ref(0)]]))
// 这里需要 .value
console.log(map.get('count').value)

toRef()

toRef 是基于响应式对象上的一个属性，创建一个对应的 ref 的方法。这样创建的 ref 与其源属性保持同步：改变源属性的值将更新 ref 的值，反之亦然。

const state = reactive({
  foo: 1,
  bar: 2
})

const fooRef = toRef(state, 'foo')

// 更改源属性会更新该 ref
state.foo++
console.log(fooRef.value) // 2

// 更改该 ref 也会更新源属性
fooRef.value++
console.log(state.foo) // 3

toRef() 在你想把一个 prop 的 ref 传递给一个组合式函数时会很有用：

<script setup>
import { toRef } from &#39;vue&#39;

const props = defineProps(/* ... */)

// 将 `props.foo` 转换为 ref，然后传入一个组合式函数
useSomeFeature(toRef(props, &#39;foo&#39;))
</script>

当 toRef 与组件 props 结合使用时，关于禁止对 props 做出更改的限制依然有效。如果将新的值传递给 ref 等效于尝试直接更改 props，这是不允许的。在这种场景下，你可以考虑使用带有 get 和 set 的 computed 替代。

注意：即使源属性当前不存在，toRef() 也会返回一个可用的 ref。这让它在处理可选 props 的时候非常有用，相比之下 toRefs 就不会为可选 props 创建对应的 refs 。下面我们就来了解一下 toRefs 。

toRefs()

toRefs() 是将一个响应式对象上的所有属性都转为 ref ，然后再将这些 ref 组合为一个普通对象的方法。这个普通对象的每个属性和源对象的属性保持同步。

const state = reactive({
  foo: 1,
  bar: 2
})

// 相当于
// const stateAsRefs = {
//   foo: toRef(state, 'foo'),
//   bar: toRef(state, 'bar')
// }
const stateAsRefs = toRefs(state)

state.foo++
console.log(stateAsRefs.foo.value) // 2

stateAsRefs.foo.value++
console.log(state.foo) // 3

从组合式函数中返回响应式对象时，toRefs 相当有用。它可以使我们解构返回的对象时，不失去响应性：

// feature.js
export function useFeature() {
  const state = reactive({
    foo: 1,
    bar: 2
  })

  // ...
  // 返回时将属性都转为 ref
  return toRefs(state)
}

<script setup>
import { useFeature } from &#39;./feature.js&#39;
// 可以解构而不会失去响应性
const { foo, bar } = useFeature()
</script>

toRefs 只会为源对象上已存在的属性创建 ref。如果要为还不存在的属性创建 ref，就要用到上面提到的 toRef。

以上就是 ref、reactive 的详细用法，不知道你有没有新的收获。接下来，我们来探讨一下响应式原理。

响应式原理

Vue2 的限制

大家都知道 Vue2 中的响应式是采⽤ Object.defineProperty() , 通过 getter / setter 进行属性的拦截。这种方式对旧版本浏览器的支持更加友好，但它有众多缺点：

• 初始化时只会对已存在的对象属性进行响应式处理。也是说新增或删除属性，Vue 是监听不到的。必须使用特殊的 API 处理。

• 数组是通过覆盖原型对象上的7个⽅法进行实现。如果通过下标去修改数据，Vue 同样是无法感知的。也要使用特殊的 API 处理。

• 无法处理像 Map、 Set 这样的集合类型。

• 带有响应式状态的逻辑不方便复用。

Vue3 的响应式系统

针对上述情况，Vue3 的响应式系统横空出世了！Vue3 使用了 Proxy 来创建响应式对象，仅将 getter / setter 用于 ref ，完美的解决了上述几条限制。下面的代码可以说明它们是如何工作的：

function reactive(obj) {
  return new Proxy(obj, {
    get(target, key) {
      track(target, key)
      return target[key]
    },
    set(target, key, value) {
      target[key] = value
      trigger(target, key)
    }
  })
}

function ref(value) {
  const refObject = {
    get value() {
      track(refObject, 'value')
      return value
    },
    set value(newValue) {
      value = newValue
      trigger(refObject, 'value')
    }
  }
  return refObject
}

不难看出，当将一个响应性对象的属性解构为一个局部变量时，响应性就会“断开连接”。因为对局部变量的访问不会触发 get / set 代理捕获。

我们回到响应式原理。在 track() 内部，我们会检查当前是否有正在运行的副作用。如果有，就会查找到存储了所有追踪了该属性的订阅者的 Set，然后将当前这个副作用作为新订阅者添加到该 Set 中。

// activeEffect 会在一个副作用就要运行之前被设置
let activeEffect

function track(target, key) {
  if (activeEffect) {
    const effects = getSubscribersForProperty(target, key)
    effects.add(activeEffect)
  }
}

副作用订阅将被存储在一个全局的 WeakMap<target, Map<key, Set<effect>>> 数据结构中。如果在第一次追踪时没有找到对相应属性订阅的副作用集合，它将会在这里新建。这就是 getSubscribersForProperty() 函数所做的事。

在 trigger() 之中，我们会再次查找到该属性的所有订阅副作用。这一次我们全部执行它们：

function trigger(target, key) {
  const effects = getSubscribersForProperty(target, key)
  effects.forEach((effect) => effect())
}

这些副作用就是用来执行 diff 算法，从而更新页面的。

这就是响应式系统的大致原理，Vue3 还做了编译器的优化，diff 算法的优化等等。不得不佩服尤大大，把 Vue 的响应式系统又提升了一个台阶！

（学习视频分享：vuejs入门教程、编程基础视频）

The above is the detailed content of Comprehensive inventory of ref and reactive in vue3. For more information, please follow other related articles on the PHP Chinese website!