Vue3新特性——揭秘副作用函数与依赖收集的奥秘

2024-01-18 10:10:10

Vue3 中的副作用函数和依赖收集：实现高效响应式编程

在 Vue3 的响应式系统中，副作用函数 和 依赖收集 是两个关键概念，它们共同作用以实现高效的更新。

副作用函数

副作用函数 是指会产生副作用的函数，比如：

修改变量值
发起网络请求
操作 DOM 元素

在 Vue3 中，副作用函数必须用 createEffect() 函数包裹，以便能够被追踪和收集。

const effect = createEffect(() => {
  body.textContent = count.value
})

这个副作用函数会在 count 变量改变时更新 body 元素的文本内容。

依赖收集

依赖收集 是指 Vue3 收集副作用函数所依赖的响应式变量的过程。当响应式变量发生变化时，Vue3 会触发依赖收集，并将所有依赖于该变量的副作用函数收集起来。

在上面的示例中，副作用函数依赖于 count 变量。当 count 变量改变时，Vue3 会触发依赖收集，并将副作用函数收集起来。

触发更新

当收集到依赖于某个响应式变量的副作用函数后，Vue3 会在响应式变量发生变化时触发这些副作用函数。副作用函数会重新执行，以更新视图。

let count = ref(0)
const effect = createEffect(() => {
  body.textContent = count.value
})
count.value++

当 count 变量增加时，Vue3 会触发副作用函数，副作用函数重新执行，将 body 元素的文本内容更新为 1。

示例：一个动态计数器

以下示例演示了如何使用副作用函数和依赖收集来创建一个动态计数器：

<div id="app">
  <button @click="increment">+</button>
  <span>{{ count }}</span>
</div>

import { createApp, ref, createEffect } from 'vue'

const app = createApp({
  data() {
    return {
      count: ref(0)
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
})

// 追踪 count 变量，并在其改变时更新文本内容
createEffect(() => {
  document.getElementById('app').textContent = this.count
})

app.mount('#app')