Vue2.0和3.0区别(总结版，不断更新)(推荐阅读)

Vue 3.0是一个用于构建用户界面的JavaScript框架。相比于Vue 2.x，Vue 3.0在性能、体积和开发体验上都有了很大的提升。有更快的渲染速度：Vue 3.0在虚拟DOM和响应式系统方面进行了优化，可以实现更快的渲染速度。有更小的代码体积：Vue 3.0采用了Tree-shaking技术，可以消除未使用的代码，从而减小应用程序的体积。有更高的容错性：在Vue 3.0中，模板编译错误会抛出编译期错误而不是运行时错误，从而更早地发现问题。

Vue3相较于Vue2的主要改进：1. 响应式系统升级：Vue3采用Proxy替代Object.defineProperty，解决Vue2无法检测动态属性/数组长度变化等问题；2. 组合式API：提供setup()和ref/reactive等函数，按功能组织代码，优于Vue2的OptionsAPI；3. 新特性支持：包括多根节点(Fragment)、Teleport传送门、Suspense异步组件处理等；4. 性能优化：基于PatchFlag的靶向更新、Tree-shaking支持，内存占用降低40%；

个人实际开发中，使用下来感受到的区别和不同点，欢迎大佬们修正与补充。借用人民日报今年的广告语，“请你努力，为了你自己。

vue经历从2.0到3.0更新之后，简⽽⾔之就是变得更轻，更快，使⽤起来更加⽅便，每⼀次的版本迭代都是对上⼀个版本的升级优化，不管 是对于我们开发者还是对于⽤户体验都是不断地在越来越⽅便，接下来我会着重于开发者来说⼀下两个不同版本的区别，1.vue2.0和3.0的初始化就存在着⼀定区别，⽐如vue3.0可以在安装脚⼿架同时提前安装好⼀些项⽬开发必备的插件，并且3.0提供了可视 化创建脚⼿架，可以更加⽅便的对插件和依赖进⾏管理和配置，同时两个版本的⽬录结构也是有些许差别的。2.在开发过程中两个版本的使⽤⽅法虽

1. 性能优化：Vue 3.0对内部的响应式系统进行了重写，采用了Proxies代理对象来提供更高效的观测机制，这使得Vue 3.0在性能方面比Vue 2.0更快。3. TypeScript支持：Vue 3.0增强了对TypeScript的支持，提供了更好的类型推断和类型安全检查。总结起来，Vue 3.0相较于Vue 2.0在性能、组织逻辑、TypeScript支持、Tree-shaking和生命周期等方面都有一些改进和优化，使得开发者可以更好地编写高效、可组织和易于维护的Vue应用程序。

对比 入口使用方式 首先我们先打开main.js文件，会发现它与过去的版本发生了一些变化： //vue3.0 import { createApp } from 'vue'; import App from './App.vue' createApp(App).mount('#app') //vue2.0 import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false new Vue({ render

1、性能提升 一句话简介：更小巧，更快速；支持摇树优化；支持 Fragments 和跨组件渲染；支持自定义渲染器。 2、API 变动 一句话介绍：除渲染函数 API 和 scoped-slot 语法之外，其余均保持不变或者将通过另外构建一个兼容包 来兼容 2.x。 模板语法的 99% 将保持不变。除了 scoped slot 语法可能会有一些微调之外变动最大的部分将是渲染函数 (render) 中的虚拟 DOM 的格式。 3、重写虚拟 DOM (Virtual DOM Rewrite) 随着虚拟 DOM 重

默认进行懒观察（lazy observation）。 在 2.x 版本里，不管数据多大，都会在一开始就为其创建观察者。当数据很大时，这可能会在页面载入时造成明显的性能压力。3.x 版本，只会对「被用于渲染初始可见部分的数据」创建观察者，而且 3.x 的观察者更高效。 更精准的变更通知。 比例来说：2.x 版本中，使用 Vue.set 来给对象新增一个属性时，这个对象的所有 watcher 都会重新运行；3.x 版本中，只有依赖那个属性的 watcher 才会重新运行。 3.0 新加入了 TypeSc

一、默认进行懒观察（lazy observation）　　在 2.x 版本里，不管数据多大，都会在一开始就为其创建观察者。当数据很大时，这可能会在页面载入时造成明显的性能压力。3.x 版本，只会对「被用于渲染初始可见部分的数据」创建观察者，而且 3.x 的观察者更高效。 二、更精准的变更通知。　　举例来说：2.x 版本中，使用 Vue.set 来给对象新增一个属性时，这个对象的所有 watcher 都会重新运行；3.x 版本中，只有依赖那个属性的 watcher 才会重新运行。 三、3.0 新加入了 Ty.

混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。 以上是官网的定义，mixin的作用是多个组件可以共享数据和方法，在使用mixin的组件中引入后，mixin中的方法和属性也就并入到该组件中，可以直接使用，在已有的组件数据和方法进行了扩充。引入mixin分全局引用和局部引...

1.重构响应式系统，使用Proxy替换Object.defineProperty，使用Proxy优势： •可直接监听数组类型的数据变化 •监听的目标为对象本身，不需要像Object.defineProperty一样遍历每个属性，有一定的性能提升 •可拦截apply、ownKeys、has等13种方法，而Object.defineProperty不行 •直接实现对象属性的新增/删除 2.新增Composition API，更好的逻辑复用和代码组织 3.重构 Virtual DOM •模板编译时的优化，将一些静

26. this.$ router.push()与this.$ routrt.replace()区别 this.$ router.push() 跳转到不同的url，但这个方法会向history栈添加一个记录，点击后退会返回到上一个页面。 this.$ router.replace()同样是跳转到指定的url，但是这个方法不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的。 27.导航钩子 1)全局导航钩子 全局前置守卫 beforeEach(to,from,nex

一.重构响应式系统，使用Proxy替换Object.defineProperty，使用Proxy优势： 1可直接监听数组类型的数据变化 2监听的目标为对象本身，不需要像Object.defineProperty一样遍历每个属性，有一定的性能提升 3可拦截apply、ownKeys、has等13种方法，而Object.defineProperty不行 4直接实现对象属性的新增/删除 二.重构 Virtual DOM 1模板编译时的优化，将一些静态节点编译成常量 2slot优化，将slot编译为la