Vue2 和 Vue3 的区别详解

阿贾克斯的黎明

于 2024-10-06 22:59:57 发布

阅读量165

点赞数 1

分类专栏：前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_57836225/article/details/142733283

版权

前端专栏收录该内容

97 篇文章 0 订阅

订阅专栏

2024 年 10 月 6 日，星期日。

今天为大家带来关于 Vue2 和 Vue3 区别的详细内容，这些内容来自一个专门讲解 Vue3 面试题的视频。

一、视频背景

视频博主为大家录制了 Vue3 的面试题，这些题目是博主从学生的面试经历中收集而来，都是企业中的真实真题。博主表示会持续关注并为大家分享更多 Vue3 的面试题，只要是听到值得分享的内容，都会录制下来。

二、Vue2 和 Vue3 的主要区别

（一）双向绑定方法不同

Vue2 的双向绑定方法：Vue2 采用object.defineProperty来实现双向绑定。
Vue3 的双向绑定方法：Vue3 使用new Proxy来完成双向绑定。

博主通过创建 Vue3 和 Vue2 项目，并编写代码进行对比演示。在 Vue3 中，可以使用setup形式和reactive方法定义响应式数据。例如：

let obj = {
  a: 1,
  b: 2
};
let obg = reactive(obj);

在页面中可以展示和修改响应式数据，并且添加新的属性时，数据和视图能够自动更新。

而在 Vue2 中，如果采用类似的方式添加新属性，数据虽然更新了，但视图却不会自动更新。例如：

data() {
  return {
    obg: {
      a: 1,
      b: 2
    }
  };
},
methods: {
  addBtn() {
    this.obg.c = 3;
  }
}

在 Vue2 中出现这种问题时，需要使用this.$set来解决。但在 Vue3 中，不存在这个问题，也没有this.$set这个方法。

（二）写法不同

Vue2 的写法：Vue2 是选项式 API，需要按照特定的写法进行开发，例如可以直接写this.xxx。
Vue3 的写法：Vue3 可以向下兼容，既可以采用选项式 API，也可以使用组合式 API 或者setup语法糖形式。在setup中不能直接写this，需要通过其他方式获取上下文。

三、其他细节区别

v-if和v-for优先级不同：在 Vue2 中，v-for优先级大于v-if；在 Vue3 中，v-if优先级大于v-for。
ref和某些特定的属性（如$children等）在 Vue2 和 Vue3 中也有所不同，但博主未详细展开说明。

在面试中，如果被问到 Vue2 和 Vue3 的区别，博主建议首先强调双向绑定方法的不同，即 Vue2 采用object.defineProperty，Vue3 采用new Proxy，并说明object.defineProperty后添加的属性劫持不到，可能导致数据更新但视图不更新的问题，而 Vue3 不存在这个问题。其次提到写法上的不同，Vue2 是选项式 API，Vue3 可以向下兼容，可采用组合式 API 或setup语法糖形式。最后可以简单提及其他一些细节和 API 的不同。

希望以上内容对大家理解 Vue2 和 Vue3 的区别有所帮助。期待博主的下一节课关于 hooks 写法的讲解。