写在前面的话
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
网友评论