面试题：Vue中Options API和Composition API在数据响应式方面有何不同

Question

请阐述在Vue的Options API和Composition API中，数据响应式的实现方式、特点以及应用场景有哪些差异。

Answer 1

实现方式差异

• Options API：通过Object.defineProperty()方法来实现数据的响应式。Vue会遍历data对象的属性，使用Object.defineProperty()为每个属性定义getter和setter，从而追踪依赖和触发更新。例如：

const data = { message: 'Hello' };
Object.defineProperty(data, 'message', {
  get() {
    // 依赖收集
  },
  set(newValue) {
    // 触发更新
  }
});

• Composition API：在Vue 3中基于ES6的Proxy实现数据响应式。Proxy可以对整个对象进行代理，而不是像Object.defineProperty()那样需要对每个属性逐一处理。例如：

const data = { message: 'Hello' };
const proxy = new Proxy(data, {
  get(target, prop) {
    // 依赖收集
    return target[prop];
  },
  set(target, prop, value) {
    // 触发更新
    target[prop] = value;
    return true;
  }
});

特点差异

• Options API：
  • 代码组织：以组件为中心，将数据、方法、生命周期等逻辑分散在不同的选项中。例如，data选项定义数据，methods选项定义方法，created等选项定义生命周期钩子。这使得代码在组件较复杂时，逻辑可能变得分散，维护和理解成本增加。
  • 复用性：复用逻辑通常通过mixin来实现，但mixin可能会导致命名冲突和数据来源不清晰的问题，因为mixin的逻辑会被混入到组件的各个选项中。
• Composition API：
  • 代码组织：以逻辑功能为中心，允许将相关的逻辑代码组合在一起。例如，数据、方法以及它们依赖的生命周期钩子可以放在同一个函数中，提高了代码的可读性和可维护性。
  • 复用性：通过自定义组合函数（Composition Functions）可以方便地复用逻辑，且不存在命名冲突问题，因为每个组合函数都有自己独立的作用域。同时，组合函数可以接收参数，更加灵活。

应用场景差异

• Options API：
  • 简单项目：对于小型、逻辑简单的项目，Options API的代码结构清晰，易于上手，因为它的语法直观，符合传统面向对象编程的思维方式。
  • 快速原型开发：在快速搭建原型阶段，不需要过多考虑逻辑复用和复杂的代码结构，Options API能快速实现功能。
• Composition API：
  • 大型项目：在大型项目中，逻辑复杂且需要高度复用，Composition API的逻辑组织和复用优势能更好地应对，使代码更易于维护和扩展。
  • 团队协作：当团队成员较多时，Composition API的清晰逻辑结构有助于成员快速理解和修改代码，减少因逻辑分散导致的沟通成本。