热搜: fiddler git ip 代理
历史搜索

Vuejs代码实践中篇

游客2024-07-21 15:03:01

安装

使用,会极大提升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文件的初始化体积,也能提升应用的性能。

未完待续~