vue数据绑定详解

vue2 中关于数组和对象数据观察时有做什么特殊处理

在 Vue2 中，对于数组和对象的数据观察有一些特殊处理。

对于数组，Vue2 使用了一种名为“拦截器”的技术来实现数据观察。具体来说，Vue2 会通过修改 JavaScript 原生数组方法（如 push、pop 等）的方式来劫持所有数组操作，并在这些操作完成后通知 Vue 进行响应式更新。这样就可以使用常规的数组操作语法（如 arr.push(item)）来触发响应式更新了。

对于对象，Vue2 使用了另一种名为“defineProperty”的技术来实现数据观察。具体来说，Vue2 会使用 Object.defineProperty()方法将每个属性转化为 getter/setter 函数，并在 getter 函数中收集依赖，在 setter 函数中触发响应式更新。这样就可以通过访问对象的属性来触发响应式更新了。

除此之外，Vue2 还提供了一些辅助函数来帮助开发者更方便地操作数组和对象。例如，Vue2 提供了一个$set方法来向响应式对象中添加新属性，以及一个$delete 方法来从响应式对象中删除属性等。

需要注意的是，由于 Vue2 使用了以上的技术来实现数据观察，因此它并不能检测到以下情况下的数据变化：

1. 直接使用索引修改数组某个元素的值（例如 arr[0] = newValue）
2. 修改对象某个属性的子属性（例如 obj.foo.bar = newValue）

针对这些情况，Vue2 提供了一些解决方案。例如，对于第一种情况，可以使用数组的 splice 方法来触发响应式更新；对于第二种情况，可以使用 Vue.set 方法或者手动重新赋值对象的整个子属性来触发响应式更新。

definePropety 和 proxy 有什么区别

Object.defineProperty 是用于修改或定义单个对象属性的方法，而 Proxy 是用于创建一个代理对象以控制对原始对象的访问和修改。Proxy 可以拦截并自定义操作，例如获取、设置、删除和枚举属性等，而 Object.defineProperty 只能修改单个属性的特性，如可写、可枚举和可配置等。Proxy 还可以实现更复杂的功能，如数据验证、数据绑定和虚拟化等。

vue 中的数据为什么频繁变化但只会更新一次

Vue 使用了一种称为“异步更新队列”的机制来优化组件的更新性能。当数据发生变化时，Vue 会将更新操作放入到异步更新队列中，等到下一个事件循环周期开始时再执行更新操作，这样可以避免不必要的重复渲染。

如果在同一个事件循环周期内，多次修改同一个响应式数据，则只有最后一次修改会被保留下来，并触发更新操作。这是因为在同一个事件循环周期内，Vue 会将所有的数据变更记录在一个队列中，而只执行一次更新操作，从而提高性能和效率。

事件循环周期

JavaScript 的事件循环周期包括以下步骤：

1. 执行同步代码，直到遇到第一个异步操作。
2. 将异步操作添加到任务队列中。
3. 继续执行同步代码直到完成。
4. 检查任务队列是否有待处理的任务。如果有，则按照它们被添加到队列的顺序依次执行，并将它们从队列中删除。
5. 当任务队列为空时，等待新的任务加入队列。
6. 重复步骤 4 和 5，直到程序退出或者调用了一些特定的 API（如 setTimeout）来终止事件循环。