揭开Vue双向数据绑定的秘密：新老数据背后的故事

2023-10-23 15:44:40

深入了解新老数据如何同步

Vue的数据绑定机制是其强大功能的核心之一，它允许视图和模型之间实现自动更新。本文旨在揭示这种双向绑定的工作原理，特别是聚焦于Vue如何通过特定的设置方法（set）以及数组方法来监听并响应数据的变化。

数据变化侦测与依赖收集

Vue中的双向数据绑定主要依靠Observer、Compiler和Watcher三个模块协同工作。当Vue实例初始化时，会递归遍历data对象的所有属性，并使用Object.defineProperty()或Proxy（在某些条件下）将它们转换为getter/setter形式，以便能够监听到数据的变化并触发相应的视图更新。

Observer

Observer模块负责对对象的属性进行劫持，将其转化为响应式。对于数组，则覆盖原生数组方法如push、pop等，确保操作时也同步更新视图。

代码示例：

var Vue = require('vue');
var vm = new Vue({
  el: '#app',
  data: {
    items: ['Apple', 'Banana']
  }
});
vm.items.push('Cherry'); // 视图自动更新，显示新增的元素

在上述示例中，通过push方法向数组添加新元素会触发Vue内部机制，使得视图相应地进行同步更新。

设置特定值与set方法

为了更细粒度控制数据变化，Vue提供了一个set方法。当需要直接修改对象属性或数组时，使用set可以确保这些改变被正确追踪并反映到用户界面中。

代码示例：

var Vue = require('vue');
var vm = new Vue({
  el: '#app',
  data: {
    fruitList: { apple: 'red', banana: 'yellow' }
  }
});
Vue.set(vm.fruitList, 'orange', 'orange'); // 添加新属性并触发更新

在上述代码中，通过使用set方法添加到fruitList的新属性会正确地被监听到，并且视图也会随之更新。

数组变化侦测

对于数组，Vue覆盖了一些常见方法如push、pop等来实现响应式。但直接修改索引值不会触发这些机制。例如：

var Vue = require('vue');
var vm = new Vue({
  el: '#app',
  data: {
    items: ['Apple', 'Banana']
  }
});
vm.items[1] = 'Grape'; // 视图未自动更新

直接修改数组索引值不会触发Vue的响应式系统，因此视图没有自动更新。为了确保这类变化被正确监听，应使用set方法或Vue提供的变异方法如splice来代替。

代码示例：

var Vue = require('vue');
var vm = new Vue({
  el: '#app',
  data: {
    items: ['Apple', 'Banana']
  }
});
vm.items.splice(1, 1, 'Grape'); // 正确触发视图更新