Vue.js 中实现响应式：深入探讨 effect、依赖收集和视图更新

前端

2023-10-27 16:06:36

前言

在 Vue.js 3.0 中，响应式系统得到了重大改进，引入了 effect 函数，它彻底改变了依赖收集和视图更新的方式。为了加深对这些新概念的理解，我们将通过一个实例深入探索它们的作用。

Vue.js 3.0 中的副作用 Effect

Effect 是一个函数，用于收集在函数执行期间访问的响应式依赖项。当这些依赖项发生变化时，该函数将被重新执行。在 Vue.js 3.0 中，我们可以使用 effect 函数来定义副作用，即与响应式数据交互的操作。

依赖收集

当 effect 函数执行时，它会自动收集函数中访问的所有响应式依赖项。这些依赖项包括响应式变量、属性和对象。通过依赖收集，Vue.js 可以跟踪哪些组件和函数依赖于哪些响应式数据。

触发视图更新

当一个响应式依赖项发生变化时，Vue.js 会触发视图更新。它首先收集受该依赖项影响的所有 effect 函数。然后，这些 effect 函数将被重新执行，更新相应的组件状态。最终，这些状态更新将反映到视图中，从而触发视图重新渲染。

实战：通过实例理解

让我们通过一个实例来理解 effect、依赖收集和视图更新是如何协同工作的。我们创建一个简单的计数器组件，其中一个按钮会递增计数器，另一个按钮会递减计数器。

// Counter.vue
<template>
  <div>
    <button @click="increment">+</button>
    <span>{{ count }}</span>
    <button @click="decrement">-</button>
  </div>
</template>

<script>
import { ref, effect } from 'vue'

export default {
  setup() {
    const count = ref(0)

    // 定义依赖于 count 的副作用
    effect(() => {
      console.log(`Count has changed to: ${count.value}`)
    })

    const increment = () => {
      count.value++
    }

    const decrement = () => {
      count.value--
    }

    return {
      count,
      increment,
      decrement
    }
  }
}
</script>