Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

5种
用于进行 AJAX 调用的顶级 JavaScript 库

Fetch API
Fetch API 是 XMLHttpRequest 的现代替代方法，用于从服务器检索资源

Axios
Axios 是一个基于 XMLHttpRequest 构建的现代 JavaScript 库，用于进行 AJAX 调用

jQuery
jQuery 曾经是 JavaScript 的一线类库，涵盖从 AJAX 调用到操作 DOM 的内容。

SuperAgent
SuperAgent 是一个轻量级和渐进式 AJAX 库，更侧重于可读性和灵活性。

Request - 一个简单的 HTTP 客户端
这个 Request 库是进行 HTTP 调用最简单的方法之一。

我个人喜欢的是 Axios ，因为就我个人而言感觉它更具可读性和友好（easy on the eyes）。你也可以使用 Fetch ，因为它有良好的文档记录和标准化的解决方案。

promise

https

DNS

vuex总结(这个也是插件哦)

vuex官网

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

什么是“状态管理模式”？(这个例子别和后面的搞混了)

让我们从一个简单的 Vue 计数应用开始：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

new Vue({
  // state
  data () {
    return {
      count: 0
    }
  },
  // view
  template: `
    <div>{{ count }}</div>
  `,
  // actions
  methods: {
    increment () {
      this.count++
    }
  }
})

注意看上面的注释
这个状态自管理应用包含以下3个部分：

• state，驱动应用的数据源；
• view，以声明方式将 state 映射到视图；
• actions，响应在 view 上的用户输入导致的状态变化。

以下是一个表示“单向数据流”理念的极简示意：

但是，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：

• 多个视图依赖于同一状态。
• 来自不同视图的行为需要变更同一状态。

对于问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。
对于问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。

因此，我们为什么不把组件的共享状态抽取出来，以一个全局单例模式管理呢？在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！

另外，通过定义和隔离状态管理中的各种概念并强制遵守一定的规则，我们的代码将会变得更结构化且易维护。

这就是 Vuex 背后的基本思想，借鉴了 Flux、Redux、和 The Elm Architecture。与其他模式不同的是，Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。

什么情况下我应该使用 Vuex？

虽然 Vuex 可以帮助我们管理共享状态，但也附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 global event bus 就足够您所需了。但是，如果您需要构建是一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。引用 Redux 的作者 Dan Abramov 的话说就是：

Flux 架构就像眼镜：您自会知道什么时候需要它。

开始(这里开始才是重头戏)

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：

1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

最简单的 Store

安装 Vuex 之后，让我们来创建一个 store。创建过程直截了当——仅需要提供一个初始 state 对象和一些 mutation(这个当成类actions好了)：

1
2
3
4
5
6
7
8
9
10
11

// 如果在模块化构建系统中，请确保在开头调用了 Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

现在，你可以通过 store.state 来获取状态对象(后面用computed来返回)，以及通过 store.commit 方法触发状态变更：

1
2
3
4

//commit一个increment到mutations触发，然后这个mutations会mutate一个state
store.commit('increment')

console.log(store.state.count) // -> 1

再次强调，我们通过提交 mutation 的方式，而非直接改变 store.state.count，是因为我们想要更明确地追踪到状态的变化。这个简单的约定能够让你的意图更加明显，这样你在阅读代码的时候能更容易地解读应用内部的状态改变。此外，这样也让我们有机会去实现一些能记录每次状态改变，保存状态快照的调试工具。有了它，我们甚至可以实现如时间穿梭般的调试体验。

由于 store 中的状态是响应式的，在组件中调用 store 中的状态简单到仅需要在计算属性中返回即可。触发变化也仅仅是在组件的 methods 中提交 mutation。

这是一个最基本的 Vuex 记数应用示例。

接下来，我们将会更深入地探讨一些核心概念。让我们先从 State 概念开始

核心概念

在这一章，我们将会学到 Vue 的这些核心概念。他们是：

• State
• Getter
• Mutation
• Action
• Module

State

单一状态树
Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。

单状态树和模块化并不冲突——在后面的章节里我们会讨论如何将状态和状态变更事件分布到各个子模块中。

那么我们如何在 Vue 组件中展示状态呢？由于 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态：

1
2
3
4
5
6
7
8
9

// 创建一个 Counter 组件
const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {   //稳得一比，前面console.log只是打印
    count () {
      return store.state.count      //下面的例子会改下这里，从store变为this.$store
    }
  }
}

每当 store.state.count 变化的时候, 都会重新求取计算属性，并且触发更新相关联的 DOM。

然而，这种模式导致组件依赖全局状态单例。在模块化的构建系统中，在每个需要使用 state 的组件中需要频繁地导入，并且在测试组件时需要模拟状态。

Vuex 通过 store 选项，提供了一种机制将状态从根组件“注入”到每一个子组件中（需调用 Vue.use(Vuex)）：

1
2
3
4
5
6
7
8
9
10
11

const app = new Vue({
  el: '#app',
  // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件(多个了store，和router一样用法)
  store,
  components: { Counter },
  template: `
    <div class="app">
      <counter></counter>
    </div>
  `
})

通过在根实例中注册 store 选项，该 store 实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store 访问到。让我们更新下 Counter 的实现：

1
2
3
4
5
6
7
8

const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count     //这里从store变为this.$store(从vue实例)
    }
  }
}

mapState 辅助函数

当一个组件需要获取多个状态时候，将这些状态都声明为计算属性(这个函数还是在computed中用哦)会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({      //还是computed中用
    // 箭头函数可使代码更简练
    count: state => state.count,

    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。

1
2
3
4

computed: mapState([
  // 映射 this.count 为 store.state.count
  'count'
])

对象展开运算符(…)

mapState 函数返回的是一个对象。我们如何将它与局部计算属性混合使用呢？通常，我们需要使用一个工具函数将多个对象合并为一个，以使我们可以将最终对象传给 computed 属性。但是自从有了对象展开运算符（现处于 ECMASCript 提案 stage-3 阶段），我们可以极大地简化写法：

1
2
3
4
5
6
7

computed: {
  localComputed () { /* ... */ },
  // 使用对象展开运算符将此对象混入到外部对象中,上面算完后，这里获取
  ...mapState({
    // ...
  })
}

组件仍然保有局部状态

使用 Vuex 并不意味着你需要将所有的状态放入 Vuex。虽然将所有的状态放到 Vuex 会使状态变化更显式和易调试，但也会使代码变得冗长和不直观。如果有些状态严格属于单个组件，最好还是作为组件的局部状态。你应该根据你的应用开发需要进行权衡和确定。

Getter(在state基础上，可以认为是 store 的计算属性)

有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数：

1
2
3
4
5
6

computed: {
  doneTodosCount () {
      //在state中的todos进行过滤
    return this.$store.state.todos.filter(todo => todo.done).length
  }
}

如果有多个组件需要用到此属性，我们要么复制这个函数，或者抽取到一个共享函数然后在多处导入它——无论哪种方式都不是很理想。

Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

Getter 接受 state 作为其第一个参数(废话，在state的基础上啊，然后也有mapGetters的)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
      //这就直接上了，这里就一个参数
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

Getter 会暴露为 store.getters 对象(废话了，和state调用一样)：

1

store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]

Getter 也可以接受其他 getter 作为第二个参数：

1
2
3
4
5
6
7

getters: {
  // 话说第二个参数就是自己么
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}
store.getters.doneTodosCount // -> 1

我们可以很容易地在任何组件中使用它：

1
2
3
4
5

computed: {
  doneTodosCount () {
    return this.$store.getters.doneTodosCount
  }
}

你也可以通过让 getter 返回一个函数，来实现给 getter 传参。在你对 store 里的数组进行查询时非常有用。

1
2
3
4
5
6
7

getters: {
  // 这还两个箭头了
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}
store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }

mapGetters 辅助函数

mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中,也是多个getters
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}
如果你想将一个 getter 属性另取一个名字，使用对象形式：

mapGetters({
  // 映射 `this.doneCount` 为 `store.getters.doneTodosCount`
  doneCount: 'doneTodosCount'
})

Mutation(mutation 都是同步事务)

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数(毕竟要改state)：

1
2
3
4
5
6
7
8
9
10
11
12

//还是那个计数的例子
const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
  }
})

你不能直接调用一个 mutation handler。这个选项更像是事件注册：“当触发一个类型为 increment 的 mutation 时，调用此函数。”要唤醒一个 mutation handler，你需要以相应的 type 调用 store.commit 方法：

1

store.commit('increment')

提交载荷（Payload）

你可以向 store.commit 传入额外的参数，即 mutation 的 载荷（payload）：

1
2
3
4
5
6
7
8

// 这个n就是payload
mutations: {
  increment (state, n) {
    state.count += n
  }
}
//当然相应的
store.commit('increment', 10)

在大多数情况下，载荷应该是一个对象，这样可以包含多个字段并且记录的 mutation 会更易读：

1
2
3
4
5
6
7
8
9

// ...
mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}
store.commit('increment', {
  amount: 10
})

对象风格的提交方式

提交 mutation 的另一种方式是直接使用包含 type 属性的对象：

1
2
3
4

store.commit({
  type: 'increment',
  amount: 10
})

当使用对象风格的提交方式，整个对象都作为载荷传给 mutation 函数，因此 handler 保持不变：

1
2
3
4
5

mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}

Mutation 需遵守 Vue 的响应规则

既然 Vuex 的 store 中的状态是响应式的，那么当我们变更状态时，监视状态的 Vue 组件也会自动更新。这也意味着 Vuex 中的 mutation 也需要与使用 Vue 一样遵守一些注意事项：

1. 最好提前在你的 store 中初始化好所有所需属性(响应式都这样)。

2. 当需要在对象上添加新属性(这不就和v-for那个一样么，用set)时，你应该

   • 使用 Vue.set(obj, ‘newProp’, 123), 或者

   • 以新对象替换老对象。例如，利用 stage-3 的对象展开运算符我们可以这样写：

     state.obj = { ...state.obj, newProp: 123 }

使用常量替代 Mutation 事件类型

使用常量替代 mutation 事件类型在各种 Flux 实现中是很常见的模式。这样可以使 linter 之类的工具发挥作用，同时把这些常量放在单独的文件中可以让你的代码合作者对整个 app 包含的 mutation 一目了然：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// mutation-types.js    这些大写的就是啦
export const SOME_MUTATION = 'SOME_MUTATION'
// store.js
import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-types'

const store = new Vuex.Store({
  state: { ... },
  mutations: {
    // 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名，还有这操作
    [SOME_MUTATION] (state) {
      // mutate state
    }
  }
})

用不用常量取决于你——在需要多人协作的大型项目中，这会很有帮助。但如果你不喜欢，你完全可以不这样做

Mutation 必须是同步函数

一条重要的原则就是要记住 mutation 必须是同步函数。为什么？请参考下面的例子：

1
2
3
4
5
6
7

mutations: {
  someMutation (state) {
    api.callAsyncMethod(() => {
      state.count++
    })
  }
}

现在想象，我们正在 debug 一个 app 并且观察 devtool 中的 mutation 日志。每一条 mutation 被记录，devtools 都需要捕捉到前一状态和后一状态的快照。然而，在上面的例子中 mutation 中的异步函数中的回调让这不可能完成：因为当 mutation 触发的时候，回调函数还没有被调用，devtools 不知道什么时候回调函数实际上被调用——实质上任何在回调函数中进行的状态的改变都是不可追踪的。

在组件中提交 Mutation

你可以在组件中使用 this.$store.commit(‘xxx’) 提交 mutation，或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

      // `mapMutations` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
  }
}

下一步：Action

在 mutation 中混合异步调用会导致你的程序很难调试。例如，当你能调用了两个包含异步回调的 mutation 来改变状态，你怎么知道什么时候回调和哪个先回调呢？这就是为什么我们要区分这两个概念。在 Vuex 中，mutation 都是同步事务：

store.commit('increment')
// 任何由 “increment” 导致的状态变更都应该在此刻完成。
为了处理异步操作，让我们来看一看 Action。

Action(为了处理异步操作)

Action 类似于 mutation，不同在于：

• Action 提交的是 mutation，而不是直接变更状态。
• Action 可以包含任意异步操作。

让我们来注册一个简单的 action：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  //就是这个了，看图是mutation之前的一个
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。当我们在之后介绍到 Modules 时，你就知道 context 对象为什么不是 store 实例本身了。

实践中，我们会经常用到 ES2015 的 参数解构 来简化代码（特别是我们需要调用 commit 很多次的时候）：

1
2
3
4
5

actions: {
  increment ({ commit }) {
    commit('increment')
  }
}

分发 Action

Action 通过 store.dispatch 方法触发：

store.dispatch('increment')
乍一眼看上去感觉多此一举，我们直接分发 mutation 岂不更方便？实际上并非如此，还记得 mutation 必须同步执行这个限制么？Action 就不受约束！我们可以在 action 内部执行异步操作：

1
2
3
4
5
6
7

actions: {
  incrementAsync ({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}

Actions 支持同样的载荷方式和对象方式进行分发：

1
2
3
4
5
6
7
8
9
10

// 以载荷形式分发
store.dispatch('incrementAsync', {
  amount: 10
})

// 以对象形式分发
store.dispatch({
  type: 'incrementAsync',
  amount: 10
})

来看一个更加实际的购物车示例，涉及到调用异步 API 和分发多重 mutation：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

actions: {
  checkout ({ commit, state }, products) {
    // 把当前购物车的物品备份起来
    const savedCartItems = [...state.cart.added]
    // 发出结账请求，然后乐观地清空购物车
    commit(types.CHECKOUT_REQUEST)
    // 购物 API 接受一个成功回调和一个失败回调
    shop.buyProducts(
      products,
      // 成功操作
      () => commit(types.CHECKOUT_SUCCESS),
      // 失败操作
      () => commit(types.CHECKOUT_FAILURE, savedCartItems)
    )
  }
}

注意我们正在进行一系列的异步操作，并且通过提交 mutation 来记录 action 产生的副作用（即状态变更）。

在组件中分发 Action

你在组件中使用 this.$store.dispatch(‘xxx’) 分发 action，或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用（需要先在根节点注入 store）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions([
      'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`

      // `mapActions` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    })
  }
}

组合 Action

Action 通常是异步的，那么如何知道 action 什么时候结束呢？更重要的是，我们如何才能组合多个 action，以处理更加复杂的异步流程？

首先，你需要明白 store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise，并且 store.dispatch 仍旧返回 Promise：

1
2
3
4
5
6
7
8
9
10

actions: {
  actionA ({ commit }) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit('someMutation')
        resolve()
      }, 1000)
    })
  }
}

现在你可以：

1
2
3

store.dispatch('actionA').then(() => {
  // ...
})

在另外一个 action 中也可以：

1
2
3
4
5
6
7
8

actions: {
  // ...
  actionB ({ dispatch, commit }) {
    return dispatch('actionA').then(() => {
      commit('someOtherMutation')
    })
  }
}

最后，如果我们利用 async / await，我们可以如下组合 action：

1
2
3
4
5
6
7
8
9
10

// 假设 getData() 和 getOtherData() 返回的是 Promise
actions: {
  async actionA ({ commit }) {
    commit('gotData', await getData())
  },
  async actionB ({ dispatch, commit }) {
    await dispatch('actionA') // 等待 actionA 完成
    commit('gotOtherData', await getOtherData())
  }
}

一个 store.dispatch 在不同模块中可以触发多个 action 函数。在这种情况下，只有当所有触发函数完成后，返回的 Promise 才会执行。

Module

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

模块的局部状态

对于模块内部的 mutation 和 getter，接收的第一个参数是模块的局部状态对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

const moduleA = {
  state: { count: 0 },
  mutations: {
    increment (state) {
      // 这里的 `state` 对象是模块的局部状态
      state.count++
    }
  },

  getters: {
    doubleCount (state) {
      return state.count * 2
    }
  }
}

同样，对于模块内部的 action，局部状态通过 context.state 暴露出来，根节点状态则为 context.rootState：

1
2
3
4
5
6
7
8
9
10
11

const moduleA = {
  // ...
  actions: {
      //这有3个参数了，第3个参数是根节点的状态
    incrementIfOddOnRootSum ({ state, commit, rootState }) {
      if ((state.count + rootState.count) % 2 === 1) {
        commit('increment')
      }
    }
  }
}

对于模块内部的 getter，根节点状态会作为第三个参数暴露出来：

1
2
3
4
5
6
7
8

const moduleA = {
  // ...
  getters: {
    sumWithRootCount (state, getters, rootState) {
      return state.count + rootState.count
    }
  }
}

命名空间(暂不懂)

默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。

如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为命名空间模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。例如：

1
2

在命名空间模块内访问全局内容（Global Assets）

带命名空间的绑定函数

给插件开发者的注意事项

模块动态注册

模块重用

项目结构

Vuex 并不限制你的代码结构。但是，它规定了一些需要遵守的规则：

1. 应用层级的状态应该集中到单个 store 对象中。

2. 提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。

3. 异步逻辑都应该封装到 action 里面。

只要你遵守以上规则，如何组织代码随你便。如果你的 store 文件太大，只需将 action、mutation 和 getter 分割到单独的文件。

对于大型应用，我们会希望把 Vuex 相关代码分割到模块中。下面是项目结构示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

├── index.html
├── main.js
├── api
│   └── ... # 抽取出API请求
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── actions.js        # 根级别的 action
    ├── mutations.js      # 根级别的 mutation
    └── modules
        ├── cart.js       # 购物车模块
        └── products.js   # 产品模块

严格模式

开启严格模式，仅需在创建 store 的时候传入 strict: true：

1
2
3
4

const store = new Vuex.Store({
  // ...
  strict: true
})

在严格模式下，无论何时发生了状态变更且不是由 mutation 函数引起的，将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。

开发环境与发布环境
不要在发布环境下启用严格模式！严格模式会深度监测状态树来检测不合规的状态变更——请确保在发布环境下关闭严格模式，以避免性能损失。

类似于插件，我们可以让构建工具来处理这种情况：

1
2
3
4

const store = new Vuex.Store({
  // ...
  strict: process.env.NODE_ENV !== 'production'
})

vue-route(这货是个插件)

主要想整理的是这个配合v-for一起用

vue-router官网的介绍

使用vue-cli来构建路由

先说下3个基本概念：route, routes, router
详解vue-router基本使用

1， route，它是一条路由，是单数。
Home按钮 => home内容， 这是一条route,
about按钮 => about 内容， 这是另一条路由。

2， routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。
[
{home 按钮 =>home内容 }，
{ about按钮 => about 内容}
]

3， router 是一个机制，相当于一个管理者，它来管理路由。
因为routes 只是定义了一组路由放在那里，是静止的，当有请求时，怎么找到对应的那条route呢？ 比如当用户点击home 按钮的时候，怎么知道跳转到home页面？这时router 就起作用了，它到routes 中去查找，去找到对应的route(home页面)，所以页面中就显示了home 内容。

4，客户端中的路由，实际上就是dom 元素的显示和隐藏。当页面中显示home 内容的时候，about 中的内容全部隐藏，反之也是一样。
客户端路由有两种实现方式：基于hash 和基于html5 history api.

基本的路由(静态路由)

下面开始
官网一个基本的例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

HTML
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <!-- 当 <router-link> 对应的路由匹配成功，将自动设置 class 属性值 .router-link-active -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

JavaScript
// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由(就是放在children中)。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

// 现在，应用已经启动了！

可以看到html中只用了2个标签
<router-link> <router-view>

<router-view>反正是显示路由内容的，
功能都在<router-link>，它定义了to那个路由 。

javascript页面
可以简单的理解为就是定义了一组routers，然后通过vue的vuerouter来管理

动态路由（也就是把routers中的path改了: 多对一，传参而已。另外注意watch和beforeRouteUpdate）

除了这个传参，还有url 这个query传参
上面的例子中router里面都是静态的,一一对应

1
2
3
4
5
6
7

<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

我们来看下动态路由，然后比较他们的区别

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件(组件复用)。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用『动态路径参数』（dynamic segment）来达到这个效果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

//这还是原来的User组件
const User = {
  template: '<div>User</div>'
}
//动态路由下复用这个User组件，改为
const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性，使用 props 将组件和路由解耦，详见路由组件传参

现在呢，像 /user/foo 和 /user/bar 都将映射到相同的路由。

一个『路径参数』使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。于是，我们可以更新 User 的模板，输出当前用户的 ID：

这里如果你看<router-link>这个to还是不动的，该foo该bar。只是routes和组件内变化(毕竟动态)

把这个当做函数的传参记，比如<router-link to="/ser/foo">这个to中传过来一个foo,(这里的话还是和静态一样，只是routes变了，组件复用当然也给改，就是拿出参数问题)
然后再routers中的{ path: ‘/user/:id’, component: User } 匹配到了这个id，成了这么一个对象{id：foo}
最后去User组件中用$route.params这个对象可以拿出来用，毕竟就是传过来用的
还有就是beforeRouteUpdate的用处

响应路由参数的变化
提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。

复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch（监测变化） $route 对象：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // 对路由变化作出响应...
    }
  }
}

或者使用 2.2 中引入的 beforeRouteUpdate 守卫：

const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

匹配优先级
有时候，同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级就最高。

嵌套路由 (就是一个套一个，在<router-view>中套，在routes中套children)(同级的呢，命名看命名视图)

前面的例子并没有嵌套，现在搞下嵌套

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

//这个是默认app挂在的地方，看到app了么
<div id="app">
  <router-view></router-view>
</div>

//这是User组件
const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}
//配置哦
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

在app中的 <router-view>是最顶层的出口，渲染最高级路由匹配到的组件。同样地，一个被渲染组件同样可以包含自己的嵌套 。例如，在 User 组件的模板添加一个 ：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

//这是User组件，现在就有两层了
const User = {
  template: `
    <div class="user">
      <h2>User {{ $route.params.id }}</h2>
      <router-view></router-view>
    </div>
  `
}

//要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置(上面嵌套了2层，**想一下再往下呢，就是再放一个children咯**)：
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [   //要再嵌套可以在放一个children
        {
          // 当 /user/:id/profile 匹配成功，
          // UserProfile 会被渲染在 User 的 <router-view> 中
          path: 'profile',    //可以注意这里是相对路径哦
          component: UserProfile
        },
        {
          // 当 /user/:id/posts 匹配成功
          // UserPosts 会被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        },
        // 这是一个当做默认路由的，空路由
        // 当 /user/:id 匹配成功，
        // UserHome 会被渲染在 User 的 <router-view> 中
        { path: '', component: UserHome },

        // ...其他子路由
      ]
    }
  ]
})

问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

//嵌套不是这样嵌套，
<div id="app">
  <router-view>
    <router-view></router-view>
  </router-view>
</div>
//也不是这样哦。  嵌套是一对一啊，这个user套在app去，同理 你要多层的嵌套就再导入一个组件呗，在那个组件里写router-view
const User = {
  template: `
    <div class="user">
      <h2>User {{ $route.params.id }}</h2>
      <router-view>
        <router-view></router-view> <!-- 不报错，不过反正是丢弃 -->
      </router-view>
    </div>
  `
}

//还有既然这样不行，那么直接在router-view写东西怎么样，和slot一回事么
<div id="app">
  <router-view>
    在这写东西怎么处理的？<!-- 这个直接丢弃了 -->
  </router-view>
</div>

命名路由

有时候，通过一个名称来标识(name)一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。(只要先记住name好了，下面的编程式路由接着往下看)

1
2
3
4
5
6
7
8
9

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',   //就多了这个name
      component: User
    }
  ]
})

要链接到一个命名路由，可以给 <router-link>的 to 属性传一个对象：(这块往下看)

1

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

这跟代码调用 router.push() 是一回事(就是编程式路由一回事)：

1

router.push({ name: 'user', params: { userId: 123 }})

这两种方式都会把路由导航到 /user/123 路径。

编程式的导航(借助 router 的实例方法，通过编写代码来实现，重要的是学to的参数用法)

1

router.push(location, onComplete?, onAbort?)

在 2.2.0+，可选的在 router.push 或 router.replace 中提供 onComplete 和 onAbort 回调作为第二个和第三个参数。这些回调将会在导航成功完成 (在所有的异步钩子被解析之后) 或终止 (导航到相同的路由、或在当前导航完成之前导航到另一个不同的路由) 的时候进行相应的调用。

注意：如果目的地和当前路由相同，只有参数发生了改变 (比如从一个用户资料到另一个 /users/1 -> /users/2)，你需要使用 beforeRouteUpdate 来响应这个变化 (比如抓取用户信息) (就是前面的动态路由 组件复用)。

注意：在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。

想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击 <router-link :to="...">(看到这个用了v-bind哦动态) 等同于调用 router.push(…)。

上面没啥，下面重要来了，to的参数
同样的规则也适用于 router-link 组件的 to 属性。

该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如：

(3种传参，[path]/[name params]/[path/name+query])

1
2
3
4
5
6
7
8
9
10
11

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

Get请求传参, 看最后一个带查询参数
这个明明实在不好形容啊。不过真的是和Get请求一样。你完全可以在链接后加上?进行传参。
样例：http://localhost:8080/linkParamsQuestion?age=18
项目里获取：
let age = this.$route.query.age; //问号后面参数会被封装进 this.$route.query;

注意：如果提供了 path，params 会被忽略(毕竟路径就代表参数)，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path：

1
2
3
4
5

const userId = 123
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123  es6写法
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

router.replace(location, onComplete?, onAbort?)

跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

router.go(n)
这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。

例子

1
2
3
4
5
6
7
8
9
10
11
12

// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)

// 后退一步记录，等同于 history.back()
router.go(-1)

// 前进 3 步记录
router.go(3)

// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)

操作 History(我怎么觉得这东西都不用了)
你也许注意到 router.push、 router.replace 和 router.go 跟 window.history.pushState、 window.history.replaceState 和 window.history.go好像， 实际上它们确实是效仿 window.history API 的。

因此，如果你已经熟悉 Browser History APIs，那么在 vue-router 中操作 history 就是超级简单的。

还有值得提及的，vue-router 的导航方法 （push、 replace、 go） 在各类路由模式（history、 hash 和 abstract）下表现一致。

命名视图(同级的视图view，前面讲过嵌套的)

有时候想同时（同级）展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar（侧导航） 和 main（主内容） 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。

1
2
3

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components 配置（带上 s）：

1
2
3
4
5
6
7
8
9
10
11
12

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

嵌套命名视图(厉害了，嵌套，同级的合在一起)

重点记住这个就好了
我们也有可能使用命名视图创建嵌套视图的复杂布局。这时你也需要命名用到的嵌套 router-view 组件。我们以一个设置面板为例：

1
2
3
4
5
6
7
8
9

/settings/emails                                       /settings/profile
+-----------------------------------+                  +------------------------------+
| UserSettings                      |                  | UserSettings                 |
| +-----+-------------------------+ |                  | +-----+--------------------+ |
| | Nav | UserEmailsSubscriptions | |  +------------>  | | Nav | UserProfile        | |
| |     +-------------------------+ |                  | |     +--------------------+ |
| |     |                         | |                  | |     | UserProfilePreview | |
| +-----+-------------------------+ |                  | +-----+--------------------+ |
+-----------------------------------+                  +------------------------------+

• UserSettings 是一个视图组件。
• Nav 只是一个常规组件。
• UserEmailsSubscriptions、UserProfile、UserProfilePreview 是嵌套的视图组件。

就是UserSettings下有左右两块，右边那块又有嵌套。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!-- UserSettings.vue -->
<div>
  <h1>User Settings</h1>
  <NavBar/>
  <router-view/>
  <router-view name="helper"/>
</div>

{
  path: '/settings',
  // 你也可以在顶级路由就配置命名视图
  component: UserSettings,
  children: [{
    path: 'emails',
    component: UserEmailsSubscriptions
  }, {
    path: 'profile',
    components: {
      default: UserProfile,
      helper: UserProfilePreview
    }
  }]
}

重定向 和 别名

重定向(一对一，有3种: ‘’, name, =>)

重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b：

1
2
3
4
5
6
7
8

const router = new VueRouter({
  routes: [
    { 
      path: '/a',
      redirect: '/b'  //就加了这么一条redirect
    }
  ]
})

重定向的目标也可以是一个命名的路由(和编程式to的 name写法一样)：

1
2
3
4
5
6
7
8

const router = new VueRouter({
  routes: [
    { 
      path: '/a', 
      redirect: { name: 'foo' }
    }
  ]
})

甚至是一个方法(es6的箭头函数)，动态返回重定向目标：

1
2
3
4
5
6
7
8
9
10

const router = new VueRouter({
  routes: [
    { 
      path: '/a', 
      redirect: to => {
      // 方法接收 目标路由 作为参数
      // return 重定向的 字符串路径/路径对象
    }}
  ]
})

注意导航守卫并没有应用在跳转路由上，而仅仅应用在其目标上。在下面这个例子中，为 /a 路由添加一个 beforeEach 或 beforeLeave 守卫并不会有任何效果。

别名(一对多)
『重定向』的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b，那么『别名』又是什么呢？

/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。

上面对应的路由配置为：

1
2
3
4
5
6
7
8
9

const router = new VueRouter({
  routes: [
    { 
      path: '/a', 
      component: A, 
      alias: '/b' 
    }
  ]
})

『别名』的功能让你可以自由地将 UI 结构映射到任意的 URL，而不是受限于配置的嵌套路由结构。

路由组件传参(props 也有3种模式: 布尔，对象，函数)

在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。

使用 props 将组件和路由解耦，取代与 $route 的耦合

1
2
3
4
5
6
7
8
9

//这是动态路由那块的东西
const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

通过 props 解耦

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

const User = {
  props: ['id'],
  template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User, props: true },

    // 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：
    {
      path: '/user/:id',
      components: { default: User, sidebar: Sidebar },
      props: { default: true, sidebar: false }
    }
  ]
})

布尔模式
如果 props 被设置为 true，route.params 将会被设置为组件属性。

对象模式
如果 props 是一个对象，它会被按原样设置为组件属性。当 props 是静态的时候有用。

1
2
3
4
5
6
7
8
9

const router = new VueRouter({
  routes: [
    { 
      path: '/promotion/from-newsletter', 
      component: Promotion, 
      props: { newsletterPopup: false } <!-- 这个newsletterPopup是name么？和布尔模式啥区别，就是同级的用命名视图解耦用么？ -->
    }
  ]
})

函数模式
你可以创建一个函数返回 props。这样你便可以将参数转换成另一种类型，将静态值与基于路由的值结合等等。

1
2
3
4
5
6
7
8
9

const router = new VueRouter({
  routes: [
    { 
      path: '/search', 
      component: SearchUser, 
      props: (route) => ({ query: route.query.q }) 
    }
  ]
})

URL /search?q=vue 会将 {query: ‘vue’} 作为属性传递给 SearchUser 组件。

请尽可能保持 props 函数为无状态的，因为它只会在路由发生变化时起作用。如果你需要状态来定义 props，请使用包装组件，这样 Vue 才可以对状态变化做出反应。

HTML5 History 模式(暂时不知道)

进阶

导航守卫（『导航』表示路由正在发生改变。暂时用全局的）

(做登录拦截 或 loading)

正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。
记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察(watch) $route 对象来应对这些变化，或使用 beforeRouteUpdate 的组件内守卫。

全局守卫

你可以使用 router.beforeEach 注册一个全局前置守卫：

1
2
3
4
5

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。

每个守卫方法接收三个参数：

to: Route: 即将要进入的目标 路由对象

from: Route: 当前导航正要离开的路由

next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

• next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed （确认的）。

• next(false): 中断当前的导航。如果浏览器的 URL 改变了（可能是用户手动或者浏览器后退按钮），那么 URL 地址会重置到 from 路由对应的地址。

• next(‘/‘) 或者 next({ path: ‘/‘ }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: ‘home’ 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。

• next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

确保要调用 next 方法，否则钩子就不会被 resolved。

全局解析守卫（router.beforeResolve）

2.5.0 新增

在 2.5.0+ 你可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。

全局后置钩子

你也可以注册全局后置钩子，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身：

1
2
3

router.afterEach((to, from) => {
  // ...
})

组件内的守卫(3个)

最后，你可以在路由组件内直接定义以下路由导航守卫：

beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

beforeRouteEnter 守卫 不能访问 this，因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。

不过，你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。

1
2
3
4
5

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
}

注意 beforeRouteEnter 是支持给 next 传递回调的唯一守卫。对于 beforeRouteUpdate 和 beforeRouteLeave 来说，this 已经可用了，所以不支持传递回调，因为没有必要了。

1
2
3
4
5

beforeRouteUpdate (to, from, next) {
  // just use `this`
  this.name = to.params.name
  next()
}

这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。

1
2
3
4
5
6
7
8

beforeRouteLeave (to, from , next) {
  const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  if (answer) {
    next()
  } else {
    next(false)
  }
}

完整的导航解析流程

1. 导航被触发。
2. 在失活的组件里调用离开守卫。
3. 调用全局的 beforeEach 守卫。
4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
5. 在路由配置里调用 beforeEnter。
6. 解析异步路由组件。
7. 在被激活的组件里调用 beforeRouteEnter。
8. 调用全局的 beforeResolve 守卫 (2.5+)。
9. 导航被确认。
10. 调用全局的 afterEach 钩子。
11. 触发 DOM 更新。
12. 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

路由元信息(可以用来搞允许登录页面)

定义路由的时候可以配置 meta 字段：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          // a meta field 和props挺像的啊
          //设置一个允不允许登录的标志
          meta: { requiresAuth: true }
        }
      ]
    }
  ]
})

那么如何访问这个 meta 字段呢？

用处

首先，我们称呼 routes 配置中的每个路由对象为 路由记录。路由记录可以是嵌套的，因此，当一个路由匹配成功后，他可能匹配多个路由记录

例如，根据上面的路由配置，/foo/bar 这个 URL 将会匹配父路由记录以及子路由记录。

一个路由匹配到的所有路由记录会暴露为 $route 对象（还有在导航守卫中的路由对象）的 $route.matched 数组。因此，我们需要遍历 $route.matched 来检查路由记录中的 meta 字段。

下面例子展示在全局导航守卫中检查元字段：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

//全局导航守卫
router.beforeEach((to, from, next) => {
  //这个就难懂了
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // this route requires auth, check if logged in
    // if not, redirect to login page 登录页.
    //这个auth.loggedIn 方法是外部引入的，你可以先写好一个校验是否登录的方法，再import进 router.js中去判断
    if (!auth.loggedIn()) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next() // 确保一定要调用 next()
  }
})

过渡效果(暂时不管)

数据获取（这里有渲染导航，还有获取数据两块的）

有时候，进入某个路由后，需要从服务器获取数据。例如，在渲染用户信息时，你需要从服务器获取用户的数据。我们可以通过两种方式来实现：

• 导航完成之后获取：先完成导航，然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示『加载中』之类的指示。

• 导航完成之前获取：导航完成前，在路由进入的守卫中获取数据，在数据获取成功后执行导航。

从技术角度讲，两种方式都不错(我喜欢之后的) —— 就看你想要的用户体验是哪种。

导航完成后获取数据

当你使用这种方式时，我们会马上导航和渲染组件，然后在组件的created 钩子中获取数据。这让我们有机会在数据获取期间展示一个 loading 状态，还可以在不同视图间展示不同的 loading 状态。

假设我们有一个 Post 组件，需要基于 $route.params.id 获取文章数据：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

<template>
  <div class="post">
    <div class="loading" v-if="loading">
      Loading...
    </div>

    <div v-if="error" class="error">
      {{ error }}
    </div>

    <div v-if="post" class="content">
      <h2>{{ post.title }}</h2>
      <p>{{ post.body }}</p>
    </div>
  </div>
</template>

export default {
  data () {
    return {
      loading: false,
      post: null,
      error: null
    }
  },
  created () {
    // 组件创建完后获取数据，
    // 此时 data 已经被 observed 了
    this.fetchData()
  },
  watch: {
    // 如果路由有变化，会再次执行该方法
    '$route': 'fetchData'
  },
  methods: {
    fetchData () {
      this.error = this.post = null
      this.loading = true
      // replace getPost with your data fetching util / API wrapper
      getPost(this.$route.params.id, (err, post) => {
        this.loading = false
        if (err) {
          this.error = err.toString()
        } else {
          this.post = post
        }
      })
    }
  }
}

在导航完成前获取数据

通过这种方式，我们在导航转入新的路由前获取数据。我们可以在接下来的组件的 beforeRouteEnter 守卫中获取数据，当数据获取成功后只调用 next 方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

export default {
  data () {
    return {
      post: null,
      error: null
    }
  },
  beforeRouteEnter (to, from, next) {
    getPost(to.params.id, (err, post) => {
      next(vm => vm.setData(err, post))
    })
  },
  // 路由改变前，组件就已经渲染完了
  // 逻辑稍稍不同
  beforeRouteUpdate (to, from, next) {
    this.post = null
    getPost(to.params.id, (err, post) => {
      this.setData(err, post)
      next()
    })
  },
  methods: {
    setData (err, post) {
      if (err) {
        this.error = err.toString()
      } else {
        this.post = post
      }
    }
  }
}

在为后面的视图获取数据时，用户会停留在当前的界面，因此建议在数据获取期间，显示一些进度条或者别的指示。如果数据获取失败，同样有必要展示一些全局的错误提醒。

滚动行为(就是跳转后滚动条位置确定, 用scrollBehavior方法)

使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。

注意: 这个功能只在支持 history.pushState 的浏览器中可用。

当创建一个 Router 实例，你可以提供一个 scrollBehavior 方法：

1
2
3
4
5
6

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {  
    // return 期望滚动到哪个的位置
  }
})

scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。

这个方法返回滚动位置的对象信息，长这样：

1
2

{ x: number, y: number }
{ selector: string, offset? : { x: number, y: number }} (offset 只在 2.6.0+ 支持)

如果返回一个 falsy (译者注：falsy 不是 false，参考这里)的值，或者是一个空对象，那么不会发生滚动。

举例：

1
2
3

scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 }
}

对于所有路由导航，简单地让页面滚动到顶部
返回 savedPosition，在按下 后退/前进 按钮时，就会像浏览器的原生表现那样：

1
2
3
4
5
6
7

scrollBehavior (to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  } else {
    return { x: 0, y: 0 }
  }
}

如果你要模拟『滚动到锚点』的行为：

1
2
3
4
5
6
7

scrollBehavior (to, from, savedPosition) {
  if (to.hash) {
    return {
      selector: to.hash
    }
  }
}

路由懒加载(路由不用变，变的是webpack配置，和我想的有点不一样)

Router 构造配置

routes(一看感觉都见过了，确实)
类型: Array

RouteConfig 的类型定义：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

declare type RouteConfig = {
  path: string;
  component?: Component;
  name?: string; // 命名路由
  components?: { [name: string]: Component }; // 命名视图组件
  redirect?: string | Location | Function;
  props?: boolean | string | Function;
  alias?: string | Array<string>;
  children?: Array<RouteConfig>; // 嵌套路由
  beforeEnter?: (to: Route, from: Route, next: Function) => void;
  meta?: any;

  // 2.6.0+
  caseSensitive?: boolean; // 匹配规则是否大小写敏感？(默认值：false)
  pathToRegexpOptions?: Object; // 编译正则的选项
}

mode(一种hash， 一种history)
类型: string

默认值: “hash” (浏览器环境) | “abstract” (Node.js 环境)

可选值: “hash” | “history” | “abstract”

配置路由模式:

hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。

history: 依赖 HTML5 History API 和服务器配置。查看 HTML5 History 模式。

abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。

base
类型: string

默认值: “/“

应用的基路径。例如，如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 “/app/“。
一般写成 __dirname，在webpack中有配置。

vue2的入门

开始梳理一下vue2的入门，主要还是一些模块的使用，反正vue2就是路由和模块

vue2 getstart vue实例

通过下面语句可以动态查看data

1

<pre>{{$data | json}} </pre>

你也可以自定义一个json的filters ，方法同methods
有时候删除不一定要定义methods 也可以用filters

老外的那个例子来讲些vue基础

主要讲解用到了

1
2
3
4
5

v-bind

v-text {{}} v-if v-show v-for v-on ref v-model .prevant

el data methdos computed filters mounted

过滤器|只用在mustache和v-bind表达式中，在v-for中用的话写一个computed

做一个，todolist的例子，实现增删改功能。
上面部分是tasks，下面部分是完成打钩的tasks。

创建一个 Vue 实例以及数据与方法

v-bind和v-model都是双向绑定，但v-model特别的用在表单中就好了，v-bind也可以用在表单，用来动态绑定value

当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。
只有当实例被创建时 data 中存在的属性才是响应式的，

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div>{{meg}}</div>
<div>{{name}}</div>

var vm = new Vue({
  data: {
      msg: ''       //这个msg是响应的,name不是响应式的，也可以说在vue实例中没name这个东西，不存在给name响应式。
      //name: '' 所以给暂时没用到的可以设置为空值就好了
  }
})

//一般实例就
new Vue({
  // 选项
})

关于使用Object.freeze(obj)来阻止响应式，如果这个data是放在vue的data中该怎么freeze？
比如上面的msg，我总不能也在vue实例外面var一个吧，然后freeze。

官网的例子是可以freeze的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var obj = {
  foo: 'bar'
}

Object.freeze(obj)

new Vue({
  el: '#app',
  data () {     //看到这里和上面的写法不一样，是因为这个是按组件的写法，data写成一个函数，防止复用组件时作用域混了
    return {
      obj
    }
  }
})

除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法，它们都有前缀 $，以便与用户定义的属性区分开来

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

//实例属性
vm.$el === document.getElementById('example') // => true
vm.$data === data // => true

// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
})
//嵌套对象的增添
vm.$set(this.userProfile, 'age', 27)

对于
new Vue({
  el: '#example',
  data: data
})

//$el,$data
$el === document.getElementById('example') // => true
$data === data // => true

// $watch 是一个实例方法
$watch

比如用来看数据
<pre> {{$data | json}} </pre>

vue lifecycle

可以通过例子vuelifecycyle.html来观察

beforecreate : 可以在这加个loading事件
created ：在这结束loading，还做一些初始化，实现函数自执行
mounted ： 在这发起axios请求，拿回数据，配合路由钩子做一些事情
beforeDestory： destoryed ：当前组件已被删除，清空相关内容

Vue2.0 探索之路——生命周期和钩子函数的一些理解

模板语法 去HTML中了

插值 Mustache 和 v-bind(:) (一个用在文本，一个用在属性)

常见的数据绑定就是使用“Mustache”语法 (双大括号) 的文本插值

1
2
3
4
5
6

<span>Message: {{ msg }}</span>
//v-text效果一样，但不好用
<span v-text="msg"></span>
//加了v-once表示执行一次性地插值，只执行一次哦
<span v-once>这个将不会改变: {{ msg }}</span>
//v-html输出真正的 HTML，暂时不用，防止被xss攻击

上面Mustache 语法用在文本上，不能作用在 HTML 特性（属性）上，遇到这种情况应该使用 v-bind 指令：

1
2

<div v-bind:id="dynamicId"></div>
<button v-bind:disabled="isButtonDisabled">Button</button>

上面两者都只能使用单个js表达式，事实上所有v-指令除了v-for都是。
指令么暂时 v-if v-show v-for v-on(@)
参数
再说下布尔值 truthy和falsy。falsy有5种：0，false，undefined， null， ‘’
还有别的参数，就当变量好了：串，函数

修饰符 缩写

又回到vue实例中：计算属性和观察者

1
2
3
4
5
6

new Vue({
    el: '#app'
    data: {

    }
})

从刚开始的 el data
后面还有 filters
现在加上 computed methods watch 三者区别看史上最详细 VUE2.0 全套 demo 讲解 基础3（计算属性）

一.computed前面说了是适用于对多数据变动进行监听，然后来维护一个状态，就是返回一个状态
二.watch是对一个数据监听，在数据变化时，会返回两个值 ，一个是value(当前值)，二个是oldvalue是变化前的值，我们可以通过这些变化也可以去维护一个状态，但是不符合场景，主要用于什么地方呢？主要用于监听一个数据来进行复杂的逻辑操作,如图片加载完ajax，开销大的

当然别忘了lifecycle的 created mounted updated destroyed 以及他们对应的before

在模板中（mustache），对于任何复杂逻辑，你都应当使用计算属性

官网例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<div id="example">
  {{ message.split('').reverse().join('') }}       //太多了
</div>

//改写为
<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>     //这就清楚多了
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

计算属性的 setter
计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// 注意这里的写法和默认只有get的写法稍有不同
computed: {
  fullName: {       //here
    // getter
    get: function () {  //这里看到了吗
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

计算属性缓存 vs 方法

计算属性(computed)是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。
方法(mtehods)：每当触发重新渲染时，调用方法将总会再次执行函数

计算属性 vs 侦听属性
侦听属性:当你有一些数据需要随着其它数据变动而变动时.通常更好的做法是使用计算属性而不是命令式的 watch 回调.当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的

官网例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

<div id="watch-example">
  <p>
    Ask a yes/no question:
    <input v-model="question">
  </p>
  <p>{{ answer }}</p>
</div>
<!-- 因为 AJAX 库和通用工具的生态已经相当丰富，Vue 核心代码没有重复 -->
<!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
<script>
var watchExampleVM = new Vue({
  el: '#watch-example',
  data: {
    question: '',
    answer: 'I cannot give you an answer until you ask a question!'
  },
  watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    question: function (newQuestion, oldQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.getAnswer()
    }
  },
  methods: {
    // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
    // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
    // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
    // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
    // 请参考：https://lodash.com/docs#debounce
    getAnswer: _.debounce(
      function () {
        if (this.question.indexOf('?') === -1) {
          this.answer = 'Questions usually contain a question mark. ;-)'
          return
        }
        this.answer = 'Thinking...'
        var vm = this
        axios.get('https://yesno.wtf/api')
          .then(function (response) {
            vm.answer = _.capitalize(response.data.answer)
          })
          .catch(function (error) {
            vm.answer = 'Error! Could not reach the API. ' + error
          })
      },
      // 这是我们为判定用户停止输入等待的毫秒数
      500
    )
  }
})
</script>

Class 与 Style 绑定 又回到模板中

都是属性啊，所以用v-bind，而且表达式结果的类型除了字符串之外，还可以是对象或数组
注意对象是key:value 数组时value 反正就是看对value就行

class

对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

//这就是对象了 ={} key:value  本来是字符串=""
<div v-bind:class="{ active: isActive }"></div>

//多个
<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

data: {
  isActive: true,
  hasError: false
}

//当然也可以直接就写个对象名
<div v-bind:class="classObject"></div>

data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

//常用的还有写成computed的
data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

数组

1
2
3
4
5
6
7
8
9

//数组 =[]    稍微和对象不一样哦这里只有value
<div v-bind:class="[activeClass, errorClass]"></div>
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

//数组中也有对象哦，可以当做有个默认值
<div v-bind:class="[{ active: isActive }, errorClass]"></div>

style (会自动添加浏览器前缀)

对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

//CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名，不推荐
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: {
  activeColor: 'red',
  fontSize: 30
}

//直接绑定到一个样式对象通常更好，这会让模板更清晰：
<div v-bind:style="styleObject"></div>
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}
//同样的，对象语法常常结合返回对象的计算属性使用

数组

1
2
3

//v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：

<div v-bind:style="[baseStyles, overridingStyles]"></div>

当然他们还有在组件中应用，暂时不说

接着说指令了，开始v-if v-show v-for -v-on

条件渲染 先说v-if v-show

看代码就明白了 v-if

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

//针对一个元素 v-if v-else-if v-else 一个表示就一个根节点
<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

//多个元素就要加上<template>，这个表示同级的(没有根节点，比如在表单中就不会用到嵌套,用的是同级的)，当然你直接在父元素上加也行啊(这就是嵌套)
<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

再说下key，上面的没加key是会复用的，所以会发生不会清除用户已经输入内容的情况
key表示”这两个元素是完全独立的，不要复用它们”

1
2
3
4
5
6
7
8
9
10

<template v-if="loginType === 'username'">
  <label>Username</label>
  //key加在了这里哦
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  //还有这里
  <input placeholder="Enter your email address" key="email-input">
</template>

v-show

1
2

//只有一种形式，不多对于多个的只需要在父节点处用v-show就行了，反正不用同级的
<h1 v-show="ok">Hello!</h1>

v-if vs v-show
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换display:none。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

v-if 与 v-for 一起使用
当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级

列表渲染 也就是v-for 优先级比v-if高

当然这个使用在对数组[] 以及对象的 {}

用 v-for 把一个数组对应为一组元素

在 v-for 块中，我们拥有对父作用域属性的完全访问权限
2种方式。一个是v-for=”item in items” items 是源数据数组并且 item 是数组元素迭代的别名
一个是v-for=”(item, index) in items”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

//第一种只有value
<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>
var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

//第二种有value和index
<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>
var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

一个对象对应为一组元素

这就有3种了 毕竟对象有key: value 不过这里按 value key index 理由当然也是先拿value咯,不过还是按key的顺序哦
在遍历对象时，是按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下是一致的。
第1种是v-for=”value in object”
第2种是v-for=”(value, key) in object”
第3种是v-for=”(value, key, index) in object”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

//
<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>
new Vue({
  el: '#v-for-object',
  data: {
    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
})

//提供第二个的参数为键名：
<div v-for="(value, key) in object">
  {{ key }}: {{ value }}
</div>

//第三个参数为索引：
<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }}: {{ value }}
</div>

key，当然表示唯一咯，同v-if啦

建议尽可能在使用 v-for 时提供 key
理想的 key 值是每项都有的且唯一的 id，它的工作方式类似于一个属性，所以你需要用 v-bind 来绑定动态值。
一般在数组或对象中提供了

1
2
3

<div v-for="item in items" :key="item.id">
  <!-- 内容 -->
</div>

它是 Vue 识别节点的一个通用机制，key 并不与 v-for 特别关联，key 还具有其他用途，我们将在后面的指南中看到其他用途

数组更新检测(其实不用管这个，v-for还是会触发视图更新)

变异方法 就是改变原数组咯

• push()
• pop()
• unshift()
• shift()
• reverse()
• sort()
• splice()
• clear()

替换数组 就是返回一个新数组咯

filter(), concat() 和 slice() map()

有2种情况下数组检测不到更新(因为js的限制，要换方法使用)

1. 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
2. 当你修改数组的长度时，例如：vm.items.length = newLength

看下面 我觉得统一下 用splice好了

1
2
3
4
5
6
7
8

为了解决第一类问题，以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将触发状态更新：
// Vue.set
Vue.set(example1.items, indexOfItem, newValue)
// Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue)

为了解决第二类问题，你可以使用 splice：
example1.items.splice(newLength)

上面是数组的增删，可以检测到，但对象属性的增删(又由于JS限制，检测不到。增加一个属性或多个属性)

就是不对根级别添加，而是对根里面嵌套的对象的添加

1
2
3
4
5
6
7
8
9
10
11

还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：

var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` 现在是响应式的

vm.b = 2
// `vm.b` 不是响应式的

对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。例如，对于

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var vm = new Vue({
  data: {
    userProfile: {      //看这里，嵌套哦
      name: 'Anika'
    }
  }
})
你可以添加一个新的 age 属性到嵌套的 userProfile 对象：

Vue.set(vm.userProfile, 'age', 27)

你还可以使用 vm.$set 实例方法，它只是上面全局 Vue.set 的别名：

vm.$set(this.userProfile, 'age', 27)

有时你可能需要为已有对象赋予多个新属性，比如使用 Object.assign() 或 _.extend()。在这种情况下，你应该用两个对象的属性创建一个新的对象。所以，如果你想添加新的响应式属性，不要像这样：

1
2
3
4
5
6
7
8
9
10

Object.assign(this.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})
你应该这样做：

this.userProfile = Object.assign({}, this.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

v-for 显示过滤/排序结果(这个用不来filters，用computed，methods)

数组
有时，我们想要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据。在这种情况下，可以创建返回过滤或排序数组的计算属性。

例如：

1
2
3
4
5
6
7
8
9
10
11

<li v-for="n in evenNumbers">{{ n }}</li>
data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

在计算属性不适用的情况下 (例如，在嵌套 v-for 循环中) 你可以使用一个 method 方法：

1
2
3
4
5
6
7
8
9
10
11

<li v-for="n in even(numbers)">{{ n }}</li>     //可以看到这里不同
data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
methods: {
  even: function (numbers) {
    return numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

一段取值范围的 v-for 整数
v-for 也可以取整数。在这种情况下，它将重复多次模板。

1
2
3

<div>
  <span v-for="n in 10">{{ n }} </span>
</div>

v-for on a <template> 多个同级，上面是一个根元素
类似于 v-if，你也可以利用带有 v-for 的