Vue2和Vue3的区别整理

    前言

        本文将从源码层面、性能层面、api方面、hook函数增加代码复用性、代码写法方面、生命周期方面等6个方面简单描述vue2和vue3的区别。

1. 源码层面

        Vue 2 使用 Options API，组件的数据、方法和生命周期钩子都通过选项对象的形式组织。这种结构虽然直观，但在处理复杂组件时可能导致代码冗长，且不易复用逻辑。

        Vue 3 引入了 Composition API，它允许开发者通过函数来组织代码，将相关逻辑聚合在一起。这不仅提高了代码的可读性和复用性，还使得大型组件的维护更加容易。

// Vue 2 - Options API
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count++;
    },
  },
  mounted() {
    console.log('组件已挂载！');
  },
};

// Vue 3 - Composition API
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const increment = () => count.value++;

    onMounted(() => {
      console.log('组件已挂载！');
    });

    return {
      count,
      increment,
    };
  },
};

2. 性能层面

        Vue 3 在性能方面进行了多项优化，包括更快的虚拟 DOM 实现、更高效的组件初始化、以及更好的模板编译器。

• 更快的虚拟 DOM：Vue 3 的虚拟 DOM 实现了更高效的 Diff 算法，减少了不必要的 DOM 操作。
• 高效的组件初始化：Vue 3 的组件初始化速度比 Vue 2 快约 1.3 到 2 倍。
• 更好的模板编译器：Vue 3 的编译器生成更优化的代码，减少了解析和编译时间。

3. API 方面

        Vue 3 引入了新的 API，如 ref、reactive、watchEffect 等，这些 API 使得状态管理和副作用处理更加直观和灵活。

对比代码：

// Vue 2 - 状态管理
export default {
  data() {
    return {
      message: '你好，Vue 2！',
    };
  },
  created() {
    this.$watch('message', (newVal, oldVal) => {
      console.log(`消息从 ${oldVal} 变为 ${newVal}`);
    });
  },
};

// Vue 3 - 状态管理
import { ref, watch } from 'vue';

export default {
  setup() {
    const message = ref('你好，Vue 3！');

    watch(message, (newVal, oldVal) => {
      console.log(`消息从 ${oldVal} 变为 ${newVal}`);
    });

    return {
      message,
    };
  },
};

4. Hook 函数增加代码复用性

        Vue 3 的 Composition API 通过 setup 函数和各种 Hook 函数（如 onMounted、onUpdated），使得代码复用变得更加简单。开发者可以将逻辑提取到独立的函数中，然后在多个组件中复用。

对比代码：

// Vue 2 - Mixins（代码复用）
const mixin = {
  methods: {
    logMessage() {
      console.log('混合日志消息');
    },
  },
};

export default {
  mixins: [mixin],
  mounted() {
    this.logMessage();
  },
};

// Vue 3 - Composition API（代码复用）
import { onMounted } from 'vue';

function useLogMessage() {
  const logMessage = () => {
    console.log('钩子函数日志消息');
  };

  onMounted(logMessage);
}

export default {
  setup() {
    useLogMessage();
  },
};

 

5. 代码写法方面

        Vue 3 引入了 TypeScript 支持的增强，使得类型检查更加严格和准确，有助于减少运行时错误。此外，Composition API 的函数式编程风格使得代码更加简洁和易读。

对比代码：

// Vue 2 - TypeScript 支持
interface Data {
  count: number;
}

export default {
  data(): Data {
    return {
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count++;
    },
  },
};

// Vue 3 - TypeScript 支持
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const count = ref<number>(0);

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

    return {
      count,
      increment,
    };
  },
});

6. 生命周期方面

        Vue 3 的生命周期函数与 Vue 2 大致相同，但有一些细微的变化。Vue 3 中，所有的生命周期函数都可以在 setup 函数中通过 Hook 函数来调用。

对比代码：

// Vue 2 - 生命周期钩子
export default {
  created() {
    console.log('Vue 2 组件已创建');
  },
  mounted() {
    console.log('Vue 2 组件已挂载');
  },
  updated() {
    console.log('Vue 2 组件已更新');
  },
};

// Vue 3 - 生命周期钩子
import { onCreated, onMounted, onUpdated } from 'vue';

export default {
  setup() {
    onCreated(() => {
      console.log('Vue 3 组件已创建');
    });

    onMounted(() => {
      console.log('Vue 3 组件已挂载');
    });

    onUpdated(() => {
      console.log('Vue 3 组件已更新');
    });
  },
};

总结

        Vue 3 通过引入 Composition API、优化性能、增强 TypeScript 支持等特性，使得开发者在编写和维护复杂应用时更加高效和灵活。虽然 Vue 2 的 Options API 仍然可用，但 Vue 3 的新特性无疑为现代前端开发提供了更多的可能性。