安装
使用,会极大提升Vuejs的调试效率。/浏览器都有插件可以安装。通过,可以实时查看组件属性,数据,vuex状态,事件,比.log方便太多。
https://github.com/vuejs/vue-devtools
安装l
这个扩展插件能够查看Vue组件的性能表现。
https://chrome.google.com/webstore/detail/vue-performance-devtool/koljilikekcjfeecjefimopfffhkjbne
安装之后,加入下边一行代码,就可以开启成功了
组件通信
组件通信有好多种方式,现在我们使用属性来传递数据给组件。
上边这个只是单向通信,如果想通知父组件,告诉它某个数据改变,那就需要用到事件了。
这里用到了$emit, 父组件中可以监听响应这个$emit事件。
$emit()方法只适用于父子组件数据通信。
如果遇到了更复杂的组件通信情况,那么就需要使用或Vuex。适用于小型应用项目,组件之间没有太多状态需要共享的情况。大型一些项目,那么就直接上Vuex。
代码分离,按需加载
随着项目越来越大和复杂,我们需要优化应用的加载速度和减小JS主文件的体积。这就需要用到Code 代码分离,它能加速应用初始化加载完成的速度。
简写组件注册
使用组件化开发,我们经常需要引入别的组件。于是会经常这样写:
这样写没毛病,但是可以试试下边这个省力的简写方式:
简写注册全局组件
有时候需要全局注册组件,一般方式是先引入组件,然后调用vue.()方法注册。
组件少的话,还不费力。多的话,这个工作量就有点大了。其实可以使用一个对象,组件是value, 然后循环对象的key,注册组件。如下:
不要把所有组件都注册成全局组件
全局组件应该只作为基础组件,这些组件会在应用中很多地方使用。比如/这类组件。
不只可以在路由配置文件中,使用组件异步(使用()加载)。常规情况下也可以:
()函数可以执行,然后返回一个组件。
有些高性能要求下,组件内的组件也可以使用异步加载。如下:
打开浏览器,查看网络面板,可以看到有个0.js异步请求:
异步加载组件能够减小js文件的初始化体积,也能提升应用的性能。
未完待续~