vue 简单小知识

VUE

vue-router解析流程

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

修改数组某一项

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

VUE生命周期

• 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专属

vue组件的通信方式

• 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

vue2 vs 3

• 组合式API
• 生命周期
• 多根节点
• 响应原理
• DIff

父子组件生命周期

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

• 父要挂载DOM了，发现有子组件，子组件开始实例化

在哪个生命周期发起请求

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

hash和history

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

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

双向绑定（VUE 2）

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

1. 实现一个监听器 Observer ，用来劫持并监听所有属性，如果属性发生变化，就通知订阅者；
2. 实现一个订阅者 Watcher，可以收到属性的变化通知并执行相应的方法，从而更新视图；
3. 实现一个订阅器 Dep，采用订阅-发布模式，收集订阅者，对监听器 Observer 和 订阅者 Watcher 进行统一管理；
4. 实现一个解析器 Compile，可以解析每个节点的相关指令，对模板数据和订阅器进行初始化。

0 到 1 掌握：Vue 核心之数据双向绑定 - 掘金

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

VUEX

• 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:模块,如果状态过多,可以拆分成模块,最后在入口通过…解构引入

路由传参

params和query

事件修饰符

.stop:阻止冒泡 .prevent:阻止默认行为 .self:仅绑定元素自身触发 .once: 2.1.4 新增,只触发一次 .passive: 2.3.0 新增,滚动事件的默认行为 (即滚动行为) 将会立即触发,不能和.prevent 一起使用

vue.nextTick

因为vue采用虚拟dom不会实时更新真实dom，有时需要dom更新后获取元素，此时可以使用vue.nextTick获取dom刷新后的回调。

data为什么是函数

每次复用组件都会形成自己的私域，如果是对象的话就会共享，导致污染问题。

VUE2 数组监测

数组考虑性能原因没有用 defineProperty 对数组的每一项进行拦截，而是选择对 7 种数组（push,pop,shift,unshift,sort,reverse）方法进行重写