Vue 开发实录

// 输出为3，3，3，并非0，1，2
for (var i = 0; i < 3; i++) {
      setTimeout(function () {
        console.log(i)
      }, 1000);
 }

原则：项目比较大时采用Vuex来管理状态，$parent、$children和ref不能在跨域兄弟组件之间通信

// 将bus定义在全局，使用this.$bus.$emit/on来使用
var eventBus = {
    install(Vue,options) {
        Vue.prototype.$bus = vue
    }
};
Vue.use(eventBus);

需求：实现两个组件AB之间的数据通信，在页面A点击操作后跳转到页面B，需要将页面A中的数据携带到页面B中去。
问题：直接使用$emit和$on监听不到事件。

解决：结合组件的生命周期，当A触发emit事件时，B还没有生成。
1. 从A页面跳转到B发生了什么？
首先是B组件created，然后beforeMounted，接着A组件brforeDestory和destoryed，B组件再执行mounted。所以$on不能放在B组件的mounted，而$emit可以放在A组件的beforeDestory。
2. $on事件不会自动销毁，需要手动销毁，放在beforeDestory里。
3. 这样的方式可以传递参数，但是页面一旦刷新，数据也会消失，如果需要将传递的数据持久化，可以采用vuex。

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

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

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

// 推荐项目结构
└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── actions.js        # 根级别的 action
    ├── mutations.js      # 根级别的 mutation
    └── modules
        ├── cart.js       # 购物车模块
        └── products.js   # 产品模块

// 1. 异步任务并行执行用promise.all()
// 同时执行p1和p2，并在它们都完成后执行then
Promise.all([p1, p2]).then(function (results) {
    console.log(results); // 获得一个Array: ['P1', 'P2']
});

// 2. 异步任务容错执行用promise.race()
// 同时执行p1和p2，第一个完成后立即执行then
Promise.race([p1, p2]).then(function (result) {
    console.log(result); // 'P1'
});

1.使用 path 来匹配路由，其后添加 /:id 来对应 $router.push 中 path 携带的参数。（/path/xx）
2.通过路由属性中的 name 来确定匹配的路由，通过 params 来传递参数。（/path/xx）
3.使用 path 来匹配路由，然后通过query来传递参数。（/path?id=xx）