16-20

16.vue生命周期和对应能干的事情

创建的是数据代理和数据监测
beforeCreate:  data和methods还没被初始化
created:  data和methods已经被初始化好了，要调用methods方法或者操作data，最早只能在data中
beforeMount: 模板在内存中已经编译好，尚未挂载到页面中去
mounted: 如果通过某些插件操作dom最早只能在mounted中，此函数执行完毕，表示vue实例被初始化完毕
beforeUpdate: 此时页面中的数据是旧的，但data中的数据是新的，页面尚未和最新的数据保持同步
Updated: 页面和 data 数据已经保持同步了
beforeDestory: 此时实例上的 data 和 methods、过滤器、指令都处于可用状态
destoryed: 组件中的方法、数据、指令都不可用了

16.5 父子组件生命周期顺序

1.父bfcreated->父created->父bfmounte->子bfcreated到子mounted->父组件挂载el.父mounted
其他更新之类的都是父子父这种流程

17.Vuex持久化

1.手动利用h5的本地存储

1. 让state从本地存储localStorage和sessionStorage取值
2. 在提交修改状态时，同时修改本地存储的值

这样state就会和存储一起存在并且与vuex同步

2.利用vuex-persistedstate插件

2.1 默认持久化所有的state

1. 安装 npm install vuex-persistedstate —save运行时依赖
2. 引入和配置 ```javascript import createPersistedState from “vuex-persistedstate”

const store =newVuex.Store({

// …

plugins: [createPersistedState()]

})

默认存储到localStorage<br />3.需要更改存储到sessionStorage,配置改为
```javascript
import createPersistedState from "vuex-persistedstate"
conststore = newVuex.Store({
    // ...
    plugins: [createPersistedState({
        storage:window.sessionStorage
    })]
})

2.2 可以指定需要持久化的状态state

import createPersistedState from "vuex-persistedstate"
conststore = newVuex.Store({
  // ...
  plugins: [createPersistedState({
  storage:window.sessionStorage,
      reducer(val)  {
          return {
              // 只储存state中的shopNum，val代表state
              shopNum: val.shopNum
          }
      }
  })]
}）

18.Question4: mutations 能执行异步代码吗？为什么？

不能，因为mutations更新state，是一个同步的更新过程，如果异步代码，会阻塞state的更新。
扩展：mutation和action的区别

1、流程顺序
“相应视图—>修改State”拆分成两部分，视图触发Action，Action再触发Mutation。
2、角色定位
基于流程顺序，二者扮演不同的角色。
Mutation：专注于修改State，理论上是修改State的唯一途径。
Action：业务代码、异步请求。
3、限制
角色不同，二者有不同的限制。
Mutation：必须同步执行。
Action：可以异步，但不能直接操作State。

19 mapMutations 和mapState

mapMutations 其实跟mapState 的作用是类似的，将组件中的 methods 映射为 store.commit 调用

20.vue-loader是什么？使用它的用途有哪些？

vue文件的一个加载器，跟template/js/style转换成js模块。