Vue 2 和 Vue 3 之间响应式区别

一、响应式系统

Vue 2 的响应式系统

Vue 2 使用了基于依赖收集的观察模式。对于对象，Vue 2 会遍历对象属性，为每个属性创建一个 Watcher 实例，并在访问这些属性时收集依赖。当属性改变时，会通知相关的 Watcher 更新视图。

Vue 2 响应式原理代码示例

Javascript
深色版本
// Vue 2 的数据响应式部分简化示例
function observe(value) {
  if (!value || typeof value !== 'object') {
    return;
  }
  new Observer(value);
}

function defineReactive(obj, key, val) {
  let dep = new Dep();
  Object.defineProperty(obj, key, {
    get() {
      Dep.target && dep.addDep(Dep.target);
      return val;
    },
    set(newVal) {
      if (newVal === val) return;
      val = newVal;
      dep.notify();
    }
  });
}

function initState(vm) {
  const opts = vm.$options;
  if (opts.data) {
    vm._data = data = opts.data;
    for (const key in data) {
      proxy(vm, '_data', key);
    }
    observe(data);
  }
}

function proxy(target, sourceKey, key) {
  Object.defineProperty(target, key, {
    get() {
      return target[sourceKey][key];
    },
    set(val) {
      target[sourceKey][key] = val;
    }
  });
}

class Dep {
  constructor() {
    this.deps = [];
  }
  addDep(dep) {
    this.deps.push(dep);
  }
  notify() {
    this.deps.forEach(dep => dep.update());
  }
}

Vue 3 的响应式系统

Vue 3 利用了 JavaScript 的 Proxy 对象来实现数据的响应性，这使得整个过程更为简洁和高效。Proxy 对象可以拦截对象的访问和修改操作，并执行相应的处理逻辑。

Vue 3 响应式原理代码示例

Javascript
深色版本
import { reactive, effect } from 'vue';

const state = reactive({ count: 0 });

effect(() => {
  console.log('Count is now ', state.count);
});

state.count++; // 输出 "Count is now 1"

这里 reactive 创建了一个响应式对象，而 effect 则是一个副作用函数，它会在依赖的数据发生变化时自动重新运行。

二、Composition API

Vue 3 引入了 Composition API，这是一组新的 API，用于在 Vue 组件中以函数的方式组织和重用逻辑。与 Options API 相比，Composition API 更适合逻辑的复用和测试。

Vue 2 Options API 示例

Vue
深色版本
<template>
  <div>{{ count }}</div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

Vue 3 Composition API 示例

Vue
深色版本
<template>
  <div>{{ count }}</div>
</template>

<script>
import { ref, onMounted } from 'vue';

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

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

    onMounted(() => {
      console.log('Component mounted');
    });

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

三、其他改进

• 性能优化：Vue 3 重构了渲染器，提高了性能。
• TypeScript 支持：Vue 3 原生支持 TypeScript，提供了更好的类型定义和工具支持。
• 构建工具：Vue 3 使用 Rollup 构建工具替代了 Webpack，提供了更好的 Tree-shaking 支持。
• 依赖项更新：Vue 3 升级了许多底层依赖库，如 Lodash 至按需引入的 lodash-es。

总结

Vue 3 相对于 Vue 2 的主要改进在于响应式系统的现代化（使用 Proxy）、Composition API 的引入以及整体性能和类型的改进。这些变化使得 Vue 3 更加灵活、强大和易于维护。

原文：https://juejin.cn/post/7426954121309962250