Inventori komprehensif ref dan reaktif dalam vue3

Saya tertanya-tanya jika anda mempunyai sebarang keraguan seperti ini apabila menggunakan Vue3, "ref dan reective boleh mencipta objek responsif, bagaimana saya harus memilih?", "Mengapa objek responsif kehilangan responsifnya selepas memusnahkannya? Bagaimana saya harus menangani dengannya? ?” Hari ini kita akan mengambil inventori komprehensif tentang ref dan reaktif.

reactive()

Penggunaan asas

Dalam Vue3 kita boleh menggunakan reactive() Cipta objek atau tatasusunan responsif:

import { reactive } from 'vue'

const state = reactive({ count: 0 })

Objek responsif ini sebenarnya adalah Proxy Vue akan mengumpulkan kesan sampingan apabila sifat Proxy ini diakses dan apabila sifat tersebut diubah suai. Mencetuskan kesan sampingan.

Untuk menggunakan keadaan reaktif dalam templat komponen, ia perlu ditakrifkan dan dikembalikan dalam fungsi setup(). [Cadangan berkaitan: tutorial video vuejs, pembangunan bahagian hadapan web]

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

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

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

Sudah tentu, anda juga boleh menggunakan <script setup>, import peringkat atas dan Pengisytiharan berubah boleh digunakan secara langsung dalam templat. <script setup>

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

const state = reactive({ count: 0 })

Proksi reaktif lwn objek asal

mengembalikan reactive() objek asal, ia tidak sama: Proxy

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

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

Objek asal juga boleh digunakan dalam templat, tetapi mengubah suai objek asal tidak akan mencetuskan kemas kini. Oleh itu, untuk menggunakan sistem reaktif Vue, anda mesti menggunakan proksi.

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

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

Untuk memastikan ketekalan akses kepada proksi, memanggil

pada objek asal yang sama akan sentiasa mengembalikan objek proksi yang sama, manakala memanggil reactive() pada objek proksi sedia ada akan mengembalikannya sendiri : reactive()

const raw = {}
const proxy1 = reactive(raw)
const proxy2 = reactive(raw)

console.log(proxy1 === proxy2) // true

console.log(reactive(proxy1) === proxy1) // true

Peraturan ini juga digunakan pada objek bersarang. Bergantung pada responsif mendalam, objek bersarang dalam objek responsif masih merupakan proksi:

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

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

shallowReactive()

Dalam Vue, statusnya dalam secara lalai Responsif. Tetapi dalam beberapa senario, kita mungkin mahu mencipta

untuk menjadikannya responsif hanya pada peringkat teratas Dalam kes ini, 浅层响应式对象 boleh digunakan. shallowReactive()

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

// 状态自身的属性是响应式的
state.foo++

// 下层嵌套对象不是响应式的，不会按期望工作
state.nested.bar++

Nota: Objek reaktif cetek hanya boleh digunakan untuk keadaan peringkat akar dalam komponen. Elakkan sarangnya dalam objek yang sangat reaktif, kerana sifat di dalamnya akan mempunyai gelagat responsif yang tidak konsisten dan sukar untuk difahami dan nyahpepijat selepas bersarang.

Penghadan reaktif()

reaktif() berkuasa, tetapi ia juga mempunyai pengehadan berikut:

• Sahaja Sah untuk jenis objek (objek, tatasusunan dan jenis koleksi seperti

  , Map), tetapi tidak sah untuk jenis primitif seperti Set, string dan number. boolean

• Oleh kerana sistem reaktif Vue dijejaki melalui akses hartanah, jika kita terus "menggantikan" objek reaktif, ini akan menyebabkan sambungan reaktif kepada rujukan asal hilang:

  < .

  Untuk menyelesaikan batasan di atas,

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

  bersinar di tempat kejadian!

• ref()

  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)

Vue menyediakan kaedah

yang membolehkan kami mencipta rujukan reaktif menggunakan sebarang jenis nilai.

ref

Penggunaan asas

Pek parameter masuk ke dalam objek ref dengan atribut

: ref()

Serupa dengan sifat objek responsif, atribut ref juga responsif. Pada masa yang sama, apabila nilai adalah jenis objek, Vue akan menggunakan secara automatik untuk memproses nilai.

Ruj yang mengandungi objek boleh menggantikan keseluruhan objek secara reaktif: ref()value

ref Tiada kehilangan tindak balas dicapai apabila memusnahkan sifat daripada objek umum atau menghantar sifat kepada fungsi:

import { ref } from 'vue'

const count = ref(0)

console.log(count) // { value: 0 }

count.value++
console.log(count.value) // 1

RujukanvalueJawapan terperinci untuk soalan temuduga lanjutan bahagian hadapanreactive()

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

membolehkan kami mencipta objek ref menggunakan sebarang jenis nilai tanpa kehilangan responsif Lulus objek ini pada premis . Ciri ini sangat penting dan sering digunakan untuk mengekstrak logik ke dalam

.

// mouse.js
export function useMouse() {
  const x = ref(0)
  const y = ref(0)

  // ...
  return { x, y }
}

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

ref 的解包

所谓解包就是获取到 ref 对象上 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入门教程、编程基础视频）

Atas ialah kandungan terperinci Inventori komprehensif ref dan reaktif dalam vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!