VUE

vue-router解析流程

无法检测数组item或者长度的变化。应该使用Vue.set(vm.items, indexOfItem, newValue)

create阶段：vue实例被创建
- beforeCreate: 创建前，此时data和methods中的数据都还没有初始化
- created：创建完毕，data中有值，未挂载
mount阶段： vue实例被挂载到真实DOM节点
- beforeMount：可以发起服务端请求，取数据
- mounted: 此时可以操作DOM（如echarts绑定）
update阶段：当vue实例里面的data数据变化时，触发组件的重新渲染
- beforeUpdate :更新前
- updated：更新后
destroy阶段：vue实例被销毁
- beforeDestroy：实例被销毁前，此时可以手动销毁一些方法
- destroyed:销毁后
activated,deactivated:keep-alive专属

props/$emit 父子组件通信

父->子props，子->父 $on、$emit 获取父子组件实例 parent、children Ref 获取实例的方式调用组件的属性或者方法父->子孙 Provide、inject 官方不推荐使用，但是写组件库时很常用。
vuex
attrs,listeners

将未声明的props获取
provide,inject

允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，在上下游关系成立的时间里始终生效。（不是响应式的）
ref 和$parent/$children ****

ref 在普通DOM上使用则引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。$parent/$children ****直接访问实例。
v-slot

作用域插槽可以使父组件获取到子组件的数据
EventBus（$emit/$on） ****

通过一个空的 Vue 实例作为中央事件总线（事件中心），用它来触发事件和监听事件。

VUE2 DIFF

在这里插入图片描述

父beforecreated → 父created → 父beforeMount → （子beforeCreated → 子created → 子beforeMount → 子 Mounted ）→ 父mounted

在created之后都可以，mounted后才能操作dom，但如果是SSR的话不支持beforeMount和mounted，一起放在created有助于提高一致性。

路由要做的事情就是更新视图但不重新请求页面，hash模式带#，用来直接监听hash的变化跳转页面。（HTML5的API）

history模式不带#，是正常的网址，但是需要后端配合，不配合刷新会产生404（匹配不到当前url）

通过 Object.defineProperty方法拦截，把 data对象里每个数据的读写转成 getter/setter，当数据变化时通知视图更新。

vue3使用Proxy，可以直接监听对象而非属性，也可以监听数组

state:定义存贮数据的仓库 ,可通过this.$store.state 或mapState访问
getter:获取 store 值,可认为是 store 的计算属性,可通过this.$store.getter 或
mapGetters访问
mutation:同步改变 store 值,为什么会设计成同步,因为mutation是直接改变 store 值,
vue 对操作进行了记录,如果是异步无法追踪改变.可通过mapMutations调用
action:异步调用函数执行mutation,进而改变 store 值,可通过 this.$dispatch或mapActions
访问
modules:模块,如果状态过多,可以拆分成模块,最后在入口通过…解构引入