关于vue常见的题目

1. 简述vue响应式原理

vue的3个核心类：
- Observer: 给对象的属性添加getter/setter属性，用于依赖收集和派发更新
- Dep：用于收集当前响应式对象的依赖关系,每一个响应式对象都有一个dep实例, dep.subs是一个watcher数组,当数据变更时，会有dep.notify()通知各个watcher
- Watcher：观察者对象，有render watcher, computed watcher 和 user watcher。

* 什么时候触发依赖收集：
1. initState , 对computed 属性初始化时会触发computed watcher 依赖收集
2. initState , 对监听属性初始化时会触发user watcher 依赖收集
3. render, render过程触发render watcher

* 什么时候触发派发更新
Obect.defineProperty
1. 组件中对响应式数据进行修改会触发setter逻辑
2. dep.notify()
3. 遍历所以subs,调用每一个watcher实例的update方法

原理总结： 当创建vue实例时，vue会遍历data的属性，observer给每一个属性添加getter/setter对数据读写进行劫持，在getter中收集依赖，在setter中派发更新。所谓在getter中收集依赖，就是给当前属性添加dep, dep.subs里面收集依赖该属性的组件，即一组watcher实例，每一个组件都有相应的watcher实例；所谓在setter中派发更新，就是执行当前属性的dep.notify方法，通过遍历deps.subs，去执行每一个watcher实例的update方法，从而实现视图的更新。

2. 计算属性的原理

computed watcher, 计算属性的监听器
computed watcher, 持有一个dep实例，通过dirty属性标记计算属性是否需要重新求值
computed watcher依赖的值发生改变后就会通知订阅的watcher进行更新，对于computed watcher会将dirty设置为true,并进行计算属性方法的调用, 如：`computed: {test(){}}`

*computed所谓的缓存是什么？
计算属性基于它的**响应式**依赖，只有依赖发生改变时才会重新求值，当依赖没有任何改变时，会拿以前的值而不会重新执行计算方法，即所谓的缓存。注意，只有依赖的属性是响应式的改变时才会触发重新求值
* computed缓存的意义是什么？
当计算方法内部操作的耗时非常长的时候，比如遍历一个很大的数组

3. Vue.nextTick 原理

用法:

Vue.nextTick(() => {
})
// 或
await Vue.nextTick()
// TODO

理解：
nextTick 是下一跳的意思，vue异步执行DOM更新的，一旦观察到数据变化，vue会启动一个异步队列，而不是立即执行，它会把同一个event loop中发生数据变化的watcher推进队列，这样的好处是对一定时间内发生多次变化的视图可以去重。
在下一步事件循环时，Vue会清空队列，进行DOM更新
开启异步队列的方式优先级： promise.then>MutationObserve->setImmidiate>setTimeout(前面2个是微任务，后面2个是宏任务,看浏览器支持哪一种)
例如 this.xxx = 1122 并不会马上更新DOM，而是在Vue清空异步队列后才会更新
执行顺序：
如果使用微任务开启异步队列以及DOM的更新：宏任务-> 微任务队列-> UI render （在微任务队列里拿新的DOM，这是OK的，因为UI render之前其实已经是新的DOM了，只是没有显示在浏览器界面上）
如果使用宏任务开启异步队列：宏任务-> UI render -> 宏任务（在第二个宏任务里去获取新的DOM，因为已经渲染好了，所以可以拿到新的DOM）
什么时候使用Vue.nextTick
当数据变化要进行一个操作，而这个操作依赖因数据变化而变化的DOM，这个操作就放在Vue.nextTick的回调里，说白了就是要拿到更新后的DOM才可以进行这个操作，也可以看出执行vue.nextTick后我们可以拿到更新后的DOM

<template>
<div v-if="isShow" ref="test"></div>
</template>
...
async showDiv() {
  this.isShow = true
  console.log(this.$resf['test']) // undefined
  await Vue.nextick()
  console.log(this.$resf['test']) // 这里才拿到
  this.$resf['test'].xx() // 执行依赖这个DOM的操作
}

最后编辑于：2021.06.11 14:41:11