1.关于Vuex
五大核心:
state => 基本数据
getters => 从基本数据派生的数据
mutations => 提交更改数据的方法,同步!
actions => 像一个装饰器,包裹mutations,使之可以异步。
modules [ˈmɒdjuːlz] => 模块化Vuex
原理:
通过官方文档我们知道,每一个vue插件都需要有一个公开的install方法,
vuex也不例外。其代码比较简单,调用了一下applyMixin方法,
该方法主要作用就是在所有组件的beforeCreate生命周期注入了设置this.$store这样一个对象,
因为比较简单,这里不再详细介绍代码了,大家自己读一读编能很容易理解。
使用:
1.利用npm包管理工具,进行安装 vuex
2.新建一个store文件夹(这个不是必须的),并在文件夹下新建store.js文件,文件中引入我们的vue和vuex
3.使用我们vuex,引入之后用Vue.use进行引用
4.在main.js 中引入新建的vuex文件
5.再然后 , 在实例化 Vue对象时加入 store 对象
场景有:单页应用中,组件之间的状态、音乐播放、登录状态、加入购物车
2. vue生命周期?
从开始创建、初始化数据、编译模板、挂载Dom、--渲染、更新---渲染、卸载等一系列过程 就是生命周期
beforeCreate:组件实例被创建之初
created:组件实例化,真实Dom还没有生成,$el还不可用
beforemount:在挂载前被调用,相关的render函数首次被调用
mounted:el被新创建的vm.$el替换
beforeUpdate:组件数据更新之前调用、虚拟Dom打补丁之前
Updated:组件数据更新
activited:keep-alive专属,组件被销毁时调用
deadactivated:keep-alive专属,组件被销毁时调用
beforeDestory:组件销毁前调用
desoryed:组件销毁后调用
3.异步请求适合在哪个生命周期调用
官方给出的是mounted,但是也可以在created
4.关于keep-alive组件?
keep-alive解决“页面缓存”需求(比如跳转到详情页回来时列表页滚动条的深度依旧是原来的位置)
vue-router不保存切换的状态,它进行push或者replace时,旧组件会被销毁,新组件会被建立
走一遍完整的生命周期
keep-alive是个抽象组件(功能型组件)实际上不会被渲染在Dom树中,他的作用是内存中缓存组件
缓存通常出现在页面切换时,所以常和router-view一起出现
5. vue组件通信?
1.props自上而下传递、$emit+v-on:向上传递
2.event.bus:通过bus进行信息的发布与订阅
bus.$emit("change",this.msg)
bus.$on("change",data=>{ this.info=data })
3.vuex:对全局资源进行管理
4.provide/inject:允许一个组件向所有组件注入依赖