Day 56/100 Vue3.0比2.0优化的点有哪些

写在前面的话

Vue也在进化，同样，我们的能力也可以提升~

（一）代码和双向绑定原理

1、使用TypeScript重构

TypeScript 包括了 ES5、ES5+ 和其他一些诸如泛型、类型定义、命名空间等特征的集合，而且能够编译成普通的Java 代码；

支持任意浏览器，任意环境，任意系统并且是开源的 

2、使用Proxy API代替defineProperty API 作数据劫持

 

3、默认进行懒观察（lazy observation）

在 2.x 版本里，不管数据多大，都会在一开始就为其创建观察者。当数据很大时，这可能会在页面载入时造成明显的性能压力。3.x 版本，只会对「被用于渲染初始可见部分的数据」创建观察者，而且 3.x 的观察者更高效。

人话：被用于渲染初始可见部分的数据才创建观察者；

 

4、 更精准的变更通知

比例来说：2.x 版本中，使用 Vue.set 来给对象新增一个属性时，这个对象的所有 watcher 都会重新运行；3.x 版本中，只有依赖那个属性的 watcher 才会重新运行。

人话：只有依赖那个属性的 watcher 才会重新运行

 

（二）安装及目录结构

1、部分命令发生了变化：

下载安装 npm install -g vue@cli

删除了vue list

创建项目 vue create

启动项目 npm run serve

2、默认项目目录结构也发生了变化：

移除了配置文件目录，config 和 build 文件夹

移除了 static 文件夹，新增 public 文件夹，并且 index.html 移动到 public 中

在 src 文件夹中新增了 views 文件夹，用于分类 视图组件 和 公共组件

 

3、提供了 vue ui 命令

通过可视化界面来使用 GUI 安装和管理插件（当然也可以通过vue add plugin添加插件），例如使用 iView 按需引入的时候，可以直接在可视化界面中安装 vue-cli-plugin-iview，则可以实现按需引入

 

4、新增 webpack 的配置文件 vue.config.js ，可以在该文件中进行webpack的相关配置，例如 loader、开发环境等等；

 

5、新增 .browserslistrc 文件，指定了项目的目标浏览器的范围，用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀，可以理解为浏览器兼容；

 

 

参考资料

html.cn/qa/vue-js/18936.html