Vue2与Vue3的区别

伸个大懒腰
137 阅读4分钟

      最近在面试，被问到最多的问题问题莫过于Vue2与Vue3的区别，(vue3确实是用起来挺香)，好多公司之前的Vue2项目都也在升级Vue3，今天来总结下Vue2与Vue3在使用上的一些更新点。

基本区别点

  1. 新增了setup组合式api替代了选项式api,使用setup语法糖，使用了setup函数替代了this，Vue3中没有this。
    image.png
          不用再将数据包在data里，不用将函数和方法写在methed里面，直接使用const/let定义变量和函数，写逻辑调用等；
  2. 引入了ref、reactive两个api来定义响应式数据
          原理是Vue3使用了ES6的proxy代理的形式实现的响应式，解决了数组无法通过下标修改数据，无法监听到对象属性的新增和删除的问题，也提升了响应式的效率,这使得 Vue 3 的响应式系统更加灵活和高效。
    注：但是Vue3并不是完全抛弃了defineProperty,通过reactive包装的响应式数据，使用proxy包装出来，而ref还是用的defineProperty去给一个空对象，通过.value属性去去的响应式数据。
  3. 生命周期去掉了beforeCreate和created,在使用生命周期钩子函数的时候需要加上on； 卸载的生命周期改为unmounted,使用的时候可使用onunMounted(()=>{})
    还有一点就是在组件中可调用钩子函数多次，在逻辑需要的地方像onMounted(()=>{})可以写多个。
  4. Vue3中v-if高于v-for的优先级，但是不建议将v-if和v-for指令写在同一个标签上。
  5. 根实例的创建从new app变成了createApp方法。
  6. 一些全局注册，比如mixin，注册全局组件，use改成了用app实例调用，而不是Vue类调用。
  7. 新增了传送门teleport组件
    使用 teleport 组件可以将组件的内容渲染到指定的目标位置，而不受组件自身所在位置的限制。这在处理模态框、弹出菜单、通知栏等需要脱离组件原始位置的场景下非常有用。
  8. template模板可以不包在一个根div里
    这是由于 Vue3 引入了 Fragments（片段）的概念，允许模板中存在多个根级别的元素，而无需使用额外的包裹元素。
    使用 Fragments，你可以在一个模板中直接编写多个元素，而不需要将它们包裹在一个根级别的 <div> 元素中。
    Fragments 在编译时会被优化，实际上不会在最终渲染的 DOM 结构中生成额外的包裹元素。因此，使用 Fragments 不会产生性能负担。
    因此Vue3 中的模板可以不包裹在一个根级别的 <div> 元素中，可以直接使用 Fragments 来包裹多个根级别的元素，提高模板的可读性和灵活性。

进阶区别点

  1. 支持按需引入，可以更好的tree-shaking
    通过按需引入，只会将实际使用的组件和功能打包到最终的构建文件中，减少了不必要的代码体积。
  2. 性能优化，Vue3增加了静态节点标记。
    Vue2使用的虚拟DOM的编译优化技术,Vue3中增加了标记静态节点，不对静态节点进行比对。从而增加渲染效率。
    具体原理是文本内容为变量会标记为1，属性为动态会标记为2，如果静态则不标记跳过比对。
  3. Vue3不推荐使用mixin进行复用逻辑提取，而是推荐写成hooks
    Hooks 是一种函数式的 API，用于将组件的逻辑进行封装和复用。
    Vue 3 的组合式 API 提供了一组钩子函数，如 setup、onMounted、onUpdated 等，用于定义组件的行为和响应式逻辑。
    通过使用 Hooks，可以将相关的逻辑部分组织为一个可复用的函数，并在组件中使用。这样可以实现更灵活、可组合的逻辑复用，而不会像 Mixin 一样引入命名冲突和代码耦合的问题。
import { ref, onMounted } from 'vue';

// 定义一个逻辑复用的 Hook
const useCounter = () => {
  const count = ref(0);

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

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

  return {
    count,
    increment
  };
}

// 在组件中使用逻辑复用的 Hook
export default {
    const { count, increment } = useCounter();
};
  1. 在组件封装方面可以在引用组件时使用 v-model应用于组件，监听事件和传递的值改变，实现数据的双向传递。
  2. Vue3和ts更好地配合,而不需要额外的配置
    Vue3 和 TypeScript 之间的更好配合主要是因为 Vue3 原生支持 TypeScript，提供了完整的类型声明文件和组合式 API，以及更好的编辑器支持和编译检查。这使得开发者可以享受到 TypeScript 提供的静态类型检查和智能补全等功能和优势，从而提高开发效率和代码质量。
avatar
文章
阅读
粉丝