Vue 源码分析（九）：“set” 和响应式系统的维护

当我们使用 Vue.js 进行前端开发时，响应式系统是一个至关重要的概念。它允许我们轻松地维护数据变动，并在数据发生变化时自动更新视图。在本文中，我们将深入剖析 Vue.js 中 “set” 方法的运作机制，揭示响应式系统是如何维护数据变动，并促使视图及时更新的。

“set” 方法概述

“set” 方法是 Vue.js 中一个核心的方法，它允许我们修改响应式对象的属性值。当我们调用 “set” 方法时，Vue.js 会检测值的变化，并触发派发更新的逻辑。这将导致视图重新渲染，以反映数据的最新状态。

源码分析

让我们深入到 Vue.js 的源码中，逐行分析 “set” 方法的具体实现。

set: function set (key, value) {
  const vm = this
  if (key === 'value' && this.composing) {
    this.composingValue = value
  } else if (hasOwn(vm._data, key)) {
    const oldValue = vm._data[key]
    vm._data[key] = value
    if (oldValue !== value) {
      vm._dirty = true
      vm.dep.notify()
    }
  } else if (hasOwn(vm.$options.props, key)) {
    setupComponentProps(vm, key, value)
  } else if (hasOwn(vm.$options.computed, key)) {
    vm.$options.computed[key].call(vm, value)
  } else {
    vm.$set(vm, key, value)
  }
}

检测值的变化

首先，Vue.js 会检测值的变化。如果新值和旧值相同，则不会触发任何更新。这是因为 Vue.js 使用了一个优化算法，该算法可以检测值的变化，并只在值发生变化时才触发更新。

触发派发更新的逻辑

如果值发生了变化，Vue.js 会触发派发更新的逻辑。这将导致视图重新渲染，以反映数据的最新状态。

订阅和发布数据变动事件

Vue.js 的响应式系统使用订阅和发布模式来维护数据变动。当数据发生变化时，Vue.js 会发布一个事件，通知所有订阅该数据的组件。组件收到事件后，会重新渲染视图，以反映数据的最新状态。

实际案例

为了更好地理解 “set” 方法的运作机制，让我们来看一个实际的例子。

假设我们有一个 Vue.js 组件，如下所示：

<div id="app">
  <p>{{ message }}</p>
</div>

const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, world!'
  }
})

当我们调用 “set” 方法来修改 message 的值时，Vue.js 会检测到值的变化，并触发派发更新的逻辑。这将导致视图重新渲染，以反映数据的最新状态。

总结

通过对 Vue.js 中 “set” 方法的源码分析，我们深入了解了响应式系统是如何维护数据变动，并促使视图及时更新的。我们也看到了 Vue.js 如何使用订阅和发布模式来维护数据变动，以及如何使用优化算法来检测值的变化。这些知识对于理解 Vue.js 的响应式系统至关重要，它将帮助我们更好地开发出高效、可维护的前端应用程序。