vue.js

一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。

then()方法是异步执行
就是当.then()前的方法执行完后再执行then()内部的程序

import 语句 用于从一个已经导出的外部模块或另一个脚本中导入函数，对象或原始类型。
import命令具有提升效果，会提升到整个模块的头部，首先执行。
由于import是静态执行，所以不能使用表达式和变量，这些只有在运行时才能得到结果的语法结构。

export 语句 用于从给定的文件 (或模块) 中导出函数，对象或原语。
export命令除了输出变量，还可以输出函数或类（class）。
export语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。
axios

export default命令，为模块指定默认输出。
第一组是使用export default时，对应的import语句不需要使用大括号；第二组是不使用export default时，对应的import语句需要使用大括号。
本质上，export default就是输出一个叫做default的变量或方法，然后系统允许你为它取任意名字。
export default命令其实只是输出一个叫做default的变量，所以它后面不能跟变量声明语句。

生命周期
created
mounted
updated
destroyed

父子组件间的通讯
父组件的数据向子组件通讯是通过props传递的
子组件的内部数据状态发生改变要通知父组件api接口发送请求刷新数据是通过事件来传递
引用类型，不能直接改变，要用深拷贝避免影响父组件 42:51

props down events up？

非父子组件间的通讯
全局事件管理，bus
在简单的场景下，可以使用一个空的 Vue 实例作为中央事件总线

单向数据流
prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。
另外，每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。如果你这么做了，Vue 会在控制台给出警告。
为什么我们会有修改 prop 中数据的冲动呢？通常是这两种原因：
prop 作为初始值传入后，子组件想把它当作局部数据来用；

prop 作为初始值传入，由子组件处理成其它数据输出。

对这两种原因，正确的应对方式是：
1.定义一个局部变量，并用 prop 的值初始化它：
props: ['initialCounter'],
data: function () {
return { counter: this.initialCounter }
}

2.定义一个计算属性，处理 prop 的值并返回。
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}

用 Vue.js 添加双向绑定：
<input v-model="xxx">
上面的代码基本等价于
<input :value="xxx" @input="xxx = $event.target.value">
也就是说：
双向绑定 = 单向绑定 + UI 事件监听

注意在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
Vuex 和单纯的全局对象有以下两点不同：
1.Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
2.你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交(commit) mutations。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

可以通过 store.state 来获取状态对象，以及通过 store.commit 方法触发状态变更

globalData 就叫做全局数据源，管理所有的数据。
用 Vue.js 添加双向绑定：
<input v-model="xxx">
实际上，双向绑定不是魔法，上面的代码基本等价于
<input :value="xxx" @input="xxx = $event.target.value">
也就是说：
双向绑定 = 单向绑定 + UI 事件监听
单向绑定使得数据流也是单向的，对于复杂应用来说这是实施统一的状态管理（如redux）的前提。
双向绑定在一些需要实时反应用户输入的场合会非常方便（比如多级联动菜单）。但通常认为复杂应用中这种便利比不上引入状态管理带来的优势。
单向绑定牺牲一部分的便捷性，换来更大的「控制力」。

单向绑定的优点是相应的可以带来单向数据流，这样做的好处是所有状态变化都可以被记录、跟踪，状态变化通过手动调用通知，源头易追溯，没有“暗箱操作”。同时组件数据只有唯一的入口和出口，使得程序更直观更容易理解，有利于应用的可维护性。缺点则是代码量会相应的上升，数据的流转过程变长，从而出现很多类似的样板代码。同时由于对应用状态独立管理的严格要求(单一的全局store)，在处理局部状态较多的场景时(如用户输入交互较多的“富表单型”应用)，会显得啰嗦及繁琐。
基本上双向绑定的优缺点就是单向绑定的镜像了。优点是在表单交互较多的场景下，会简化大量业务无关的代码。缺点就是由于都是“暗箱操作”，我们无法追踪局部状态的变化(虽然大部分情况下我们并不关心)，潜在的行为太多也增加了出错时 debug 的难度。同时由于组件数据变化来源入口变得可能不止一个，新手玩家很容易将数据流转方向弄得紊乱，如果再缺乏一些“管制”手段，最后就很容易因为一处错误操作造成应用雪崩。这样来看，单向绑定跟双向绑定在功能上基本上是互补的，所以我们可以在合适的场景下使用合适的手段。比如在 UI控件 中(通常是类表单操作)，我会使用双向的方式绑定数据；而其他场景则统一采用 单向 + inline event ( <component msg="msg" on-update="updateMsg(msg)"></component> ) 的方式构建应用。

单向绑定大概的思路就是：
1.所有的数据只有一份
2.一旦数据变化，就去更新页面（data -> 页面单向绑定）
3.如果用户在页面上做了变动，那么就把变动手动收集起来（而不是自动的），合并到先有的数据中

Vuex 简介
Vuex 是适用于 Vue.js 应用的状态管理库，为应用中的所有组件提供集中式的状态存储与操作，保证了所有状态以可预测的方式进行修改。
Vuex 是单向数据流的一种实现。
核心概念
State
State 用来存状态。在根实例中注册了store 后，用this.$store.state
来访问。
Getters
Getters 从 state 上派生出来的状态。可以理解为基于 State 的计算属性。很多时候，不需要 Getters，直接用 State 即可。
Mutations
Mutations 用来改变状态。需要注意的是，Mutations 里的修改状态的操作必须是同步的。在根实例中注册了 store 后， 可以用this.$store.commit('xxx', data)
来通知 Mutations 来改状态。
Actions
Actions 通过调用 Mutations 来改状态。Actions 可以包含异步操作。在根实例中注册了 store 后， 可以用this.$store.dispatch('xxx', data)
来存触发 Action。
Vuex 的完整流程
组件中触发 Action，Action 提交 Mutations，Mutations 修改 State。 组件根据 State 或 Getters 来渲染页面。