引入vue.js和安装vue的区别_Vuejs代码实践中篇

---

系列文章：

Vuejs代码实践上篇

---

安装VueDevtools

使用VueDevtools，会极大提升Vuejs的调试效率。Chrome/Firefox浏览器都有插件可以安装。通过VueDevtools，可以实时查看组件属性，数据，vuex状态，事件，比console.log方便太多。

https://github.com/vuejs/vue-devtools

安装VuePerformanceDevtool

这个Chrome扩展插件能够查看Vue组件的性能表现。

https://chrome.google.com/webstore/detail/vue-performance-devtool/koljilikekcjfeecjefimopfffhkjbne

安装之后，加入下边一行代码，就可以开启成功了

组件通信

组件通信有好多种方式，现在我们使用属性来传递数据给组件。

上边这个只是单向通信，如果想通知父组件，告诉它某个数据改变，那就需要用到事件了。

这里用到了$emit, 父组件中可以监听响应这个$emit事件。

$emit()方法只适用于父子组件数据通信。

如果遇到了更复杂的组件通信情况，那么就需要使用EventBus或Vuex。EventBus适用于小型应用项目，组件之间没有太多状态需要共享的情况。大型一些项目，那么就直接上Vuex。

代码分离，按需加载

随着项目越来越大和复杂，我们需要优化应用的加载速度和减小JS主文件的体积。这就需要用到Code Splitting 代码分离，它能加速应用初始化加载完成的速度。

简写组件注册

使用组件化开发，我们经常需要引入别的组件。于是会经常这样写：

这样写没毛病，但是可以试试下边这个省力的简写方式：

简写注册全局组件

有时候需要全局注册组件，一般方式是先引入组件，然后调用vue.component()方法注册。

组件少的话，还不费力。多的话，这个工作量就有点大了。其实可以使用一个对象，组件是value, 然后循环对象的key，注册组件。如下：

不要把所有组件都注册成全局组件

全局组件应该只作为基础组件，这些组件会在应用中很多地方使用。比如Buttons/Inputs这类组件。

不只可以在路由配置文件中，使用组件异步(使用import()加载)。常规情况下也可以：

import()函数可以执行Promise，然后返回一个组件。

有些高性能要求下，组件内的组件也可以使用异步加载。如下：

打开Chrome浏览器，查看network网络面板，可以看到有个0.js异步请求：

异步加载组件能够减小js文件的初始化体积，也能提升应用的性能。

未完待续~