初识Vue

vue-loader 的作用

查看vue官方文档，发现组件注册一般都是这么写的

var Child = {
  template: 'A custom component!'
}
new Vue({
  // ...
  components: {
    //  将只在父模板可用
    'my-component': Child
  }
})

但是我们的实际项目中的代码都是这样的。

原因就在于我们在实际项目中使用了 vue-loader, 它可以非常好的帮我们自动加载所有的内容，按照某种约定。vue-loader文档

vue组件和实例

这样可以创建一个vue实例。每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例启动的：

var vm = new Vue({
  // 选项
})

可以扩展 Vue 构造器，从而用预定义选项创建可复用的组件构造器,这样可以创建一个vue实例。

image.png

所有的 Vue.js 组件其实都是被扩展的 Vue 实例。

全局组件

要注册一个全局组件，你可以使用 Vue.component(tagName, options)。例如：

Vue.component('my-component', {
  // 选项
})

组件在注册之后，便可以在父实例的模块中以自定义元素的形式使用。要确保在初始化根实例之前注册了组件：


  

// 注册
Vue.component('my-component', {
  template: 'A custom component!'
})
// 创建根实例
new Vue({
  el: '#example'
})

也可以这样注册组件

var apple = Vue.extend({
   ....
})
Vue.component('apple',apple)

这样相当于上面的一句Vue.component 。Vue.extend 返回的是一个“扩展实例构造器”，也就是一个预设了部分选项的 Vue 实例构造器。
Vue.component 是用来全局注册组件的方法，其作用是将通过 Vue.extend 生成的扩展实例构造器注册（命名）为一个组件，可以简单理解为当在模板中遇到该组件名称作为标签的自定义元素时，会自动调用类似于 new myVue 这样的构造函数来生成组件实例，并挂载到自定义元素上，当然实际情况要比这复杂得多。
vue.component

局部组件

不必在全局注册每个组件。通过使用组件实例选项注册，可以使组件仅在另一个实例/组件的作用域中可用：

var Child = {
  template: 'A custom component!'
}
new Vue({
  // ...
  components: {
    //  将只在父模板可用
    'my-component': Child
  }
})

我们项目中的组件一般都是局部注册。该页面需要什么组件引入什么组件。

vuex

什么时候需要vuex？
他的意思其实就是如果开发的程序并不是很庞大，一个页面中的组件不是很多并且他们之间并不需要大量频繁的互相读写操作，那么就可以直接使用传统的Vue.js中的组件Prop或者事件触发来修改状态，或者用组件 - vue.js**#非父子组件通信中介绍的new一个空的Vue对象实例，并且通过事件触发等方式来跨组件通信。如果中大型，尤其是有许多事件传播，那么vuex作用就体现出现了，为什么？ok， $dispatch,$ on,这种传播，如果是单向的还好，向上，向下，但是如果非单向，那么必定是先传上去，在传下来，中间还要监听好各自事件别给我整乱了。。。试想一下，一个中大型项目，这里会发生什么？一个字乱，有的时候一个事件，对应的模块都要找半天

必须将所有 state 都维护在 Redux 中吗？可以用 React 的 setState() 方法吗？

没有 “标准”。有些用户选择将所有数据都在 Redux 中维护，那么在任何时刻，应用都是完全有序及可控的。也有人将类似于“下拉菜单是否打开”的非关键或者 UI 状态，在组件内部维护。适合自己的才是最好的。

使用局部组件状态是更好的。作为一名开发者，应该决定使用何种 state 来组装你的应用，每个 state 的生存范围是什么。在两者之间做好平衡，然后就去做吧。
这么个应用场景

一个按钮，点击它的时候显示上面的文字，再点击它的时候不显示上面的文字。

redux是一个状态管理工具，使用它本来就是为了管理公共状态的。组件A发生的变化影响了组件BCD，那么使用它很方便。但是，如果组件A的变化只影响它本身（包括未来也不会影响其他组件），那么何不回到react，把这个状态直接存储到组件本身上呢？只需要一步，this.setState()

这里有一些将怎样的数据放入 Redux 的经验法则：

应用的其他部分是否关心这个数据？
是否需要根据需要在原始数据的基础上创建衍生数据？
相同的数据是否被用作驱动多个组件？
能否将状态恢复到特定时间点（在时光旅行调试的时候）？
是否要缓存数据（比如：数据存在的情况下直接去使用它而不是重复去请求他）？
组织state
vuex实践
vuex源码