1、vue3.0和2.0的区别
Vue3.0正式发布后，我在各大视频教学平台和技术论坛里看了下评论，有开发者反馈其兼容性不是很好，同时在命令方面也有不少变化，总体使用情况不是特别的乐观。
vue3.0 的发布与 vue2.0 相比，优势主要体现在：更快、更小、更易维护、更易于原生、让开发者更轻松；
更快：
1、virtual DOM 完全重写，mounting & patching 提速 100%；
2、更多编译时 （compile-time）提醒以减少 runtime 开销；
3、基于 Proxy 观察者机制以满足全语言覆盖以及更好的性能；
4、放弃 Object.defineProperty ，使用更快的原生 Proxy；
5、组件实例初始化速度提高 100%;
6、提速一倍/内存使用降低一半；
更小：
1、Tree-shaking 更友好；
2、新的 core runtime：~ 10kb gzipped；
vue3.0 新加入了 TypeScript 以及 PWA 的支持
2、部分命令发生了变化：
(1)下载安装 npm install -g vue@cli
(2)删除了vue list
(3)创建项目 vue create
(4)启动项目 npm run serve
3、默认项目目录结构也发生了变化：
(1)移除了配置文件目录，config 和 build 文件夹
(2)移除了 static 文件夹，新增 public 文件夹，并且 index.html 移动到 public 中
(3)在 src 文件夹中新增了 views 文件夹，用于分类 视图组件 和 公共组件
4、在创建和启动方面：
创建文件方面：
3.0：vue create 进入工程文件夹，创建项目。
2.0：vue init webpack
启动项目方面：
3.0启动npm run serve
2.0启动npm run dev
其中，build没了、config没了、哦对了还有最重要的一点，3.0的安装项目时自动下载node-model。
在根目录下创建一个vue.config.js
module.exports = {
baseUrl: process.env.NODE_ENV === 'production' ? '/online/' : '/',
// outputDir: 在npm run build时 生成文件的目录 type:string, default:'dist'
// outputDir: 'dist',
// pages:{ type:Object,Default:undfind }
devServer: {
port: 8888, // 端口号
host: 'localhost',
https: false, // https:{type:Boolean}
open: true, //配置自动启动浏览器
// proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
proxy: {
'/api': {
target: '',
ws: true,
changeOrigin: true
},
'/foo': {
target: ''
}
}, // 配置多个代理
}
}
5、此外，Vue3.0和Vue2.0还有以下区别：
一、默认进行懒观察（lazy observation）。
在 2.x 版本里，不管数据多大，都会在一开始就为其创建观察者。当数据很大时，这可能会在页面载入时造成明显的性能压力。3.x 版本，只会对「被用于渲染初始可见部分的数据」创建观察者，而且 3.x 的观察者更高效。
描述的再通俗、再清晰一点就是：
1、对于diff算法的优化。
在vue2中，虚拟dom是全量比较的。
在vue3中，增加了静态标记PatchFlag。
在创建vnode的时候，会根据vnode的内容是否可以变化，为其添加静态标记PatchFlag。diff的时候，只会比较有PatchFlag的节点。PatchFlag是有类型的，比如一个可变化文本节点，会将其添加PatchFlag枚举值为TEXT的静态标记。这样在diff的时候，只需比对文本内容。需要比对的内容更少了。PatchFlag还有动态class、动态style、动态属性、动态key属性等枚举值。
2、render阶段的静态提升（render阶段指生成虚拟dom树的阶段）
在vue2中，一旦检查到数据变化，就会re-render组件，所有的vnode都会重新创建一遍，形成新的vdom树。
在vue3中，对于不参与更新的vnode，会做静态提升，只会被创建一次，在re-render时直接复用。
静态提升可以理解为第一次render不参与更新的vnode节点的时候，保存它们的引用。re-render新vdom树时，直接拿它们的引用过来即可，无需重新创建。
3、事件侦听缓存
在vue2中，我们写的@click="onClick"也是被当作动态属性，diff的时候也要对比。但我们知道它不会变化，比如变成@click="onClick2"，绑定别的值。
在vue3中，如果事件是不会变化的，会将onClick缓存起来（跟静态提升达到的效果类似），该节点也不会被标记上PatchFlag（也就是无需更新的节点）。这样在render和diff两个阶段，事件侦听属性都节约了不必要的性能消耗。
我曾经维护过一个拥有很庞大dom树的页面。由于节点非常多，无需参与更新的节点也很多，使用vue2的情况下，在render和diff两个阶段，消费了很多性能，如果当时有vue3的话，我想性能会被优化很多。
4、减少创建组件实例的开销
vue2.x每创建一个实例，在this上要暴露data、props、computed这些，都是靠Object.defineProperty去定义的。这部分操作还是挺费时的。
vue3.0中基于Proxy，减少了创建组件实例的性能开销。
二、更精准的变更通知
比例来说：2.x 版本中，你使用 Vue.set 来给对象新增一个属性时，这个对象的所有 watcher 都会重新运行；3.x 版本中，只有依赖那个属性的 watcher 才会重新运行。
三、3.0 新加入了 TypeScript 以及 PWA 的支持。
vue2不适合使用ts，原因在于vue2的Option API风格。options是个简单对象，而ts是一种类型系统、面向对象的语法。两者有点不匹配。
在vue2结合ts的具体实践中，要用 vue-class-component 强化 vue 组件，让 Script 支持 TypeScript 装饰器，用 vue-property-decorator 来增加更多结合 Vue 特性的装饰器，最终搞的ts的组件写法和js的组件写法差别挺大。
在vue3中，量身打造了defineComponent函数，使组件在ts下，更好的利用参数类型推断 。Composition API 代码风格中，比较有代表性的api就是 ref 和 reactive，也很好的支持了类型声明。
四、部分命令发生了变化：
下载安装 npm install -g vue@cli
删除了vue list
创建项目 vue create
启动项目 npm run serve
同时，vue3.0使用 vite开发构建工具 可以有更快的开发体验 。
在使用webpack作为开发构建工具时，npm run dev都要等一会，项目越大等的时间越长。热重载页有几秒的延迟，但是如果用vite来做vue3的开发构建工具，npm run dev 秒开，热重载也很快。
vite的原理还是用了浏览器支持import关键字了，启动项目不用webpack构建工具先构建了，浏览器直接请求路由对应的代码文件，代理服务器针对单个文件进行编译并返回。如果请求的文件里还import了其他文件，同理浏览器继续发请求，代理服务器返回。就这样实现了npm run dev时无需编译，实时请求实时编译。
五、默认项目目录结构也发生了变化：
移除了配置文件目录，config 和 build 文件夹。
移除了 static 文件夹，新增 public 文件夹，并且 index.html 移动到 public 中。
在 src 文件夹中新增了 views 文件夹，用于分类 视图组件 和 公共组件。
总结：
其他的，数据监听方式变成了Proxy，消除了Object.defineProperty现有的限制（例如无法检测新的属性添加），并提供更好的性能。
vue3解决了vue2的一些问题，大型应用的性能问题、ts支持不友好问题，自定义渲染API解决体系架构存在的问题，如果在vue3的基础上实现weex框架会好很多。也做出了很多优化，Compostion API让代码的组织形式更好。vite开发构建工具让开发体验更好，Tree shaking让包更小、性能更优。