vue3面试题，基础部分
vue3面试题1
1. vue3为什么要用Proxy 代替 defineProperty
- defineProperty 局限性，只能针对单例属性做监听
- Vue2 中对data中的属性，做了遍历和递归，为每个属性设置了getter和setter
- 这样就导致VUE只能对data中预定义过的属性做出响应的原因
- 如果直接添加一个不存在的话，是无法做到setter监听的
- Proxy 是针对整个对象的，那么对这个对象的所有操作，都会进入监听，就可以代理所有的属性
- 带来很大的性能提升和代码优化
- Proxy可以理解成，对源对象做了一层拦截，外界对这个对象的访问，都必须经过这层拦截，因此提供了一个机制，可以对外界的访问进行过滤和修改
响应式是惰性的
- 在vue2中，对一个深层属性嵌套的对象，如果要劫持对象属性的变化，就要深层次的递归遍历，对每一层都要执行defineProperty,这样对性能有很大的消耗
- 在vue3中，Proxy并不能监听到对象内部深层次的属性变化，因此它的处理方式，是在getter中去递归响应式，
- 好处是真正访问到内部，才去响应式，可以说是按需实现响应式，减少性能消耗
2. Vue3.0 编译做了哪些优化？
- 生成block tree
- Vue.js 2.x 的数据更新并触发重新渲染的粒度是组件级的，单个组件内部 需要遍历该组件的整个 vnode 树。
**在2.0里，渲染效率的快慢与组件大小成正相关：组件越大，渲染效率越慢。**并且，对于一些静态节点，又无数据更新，这些遍历都是性能浪费。
- Vue.js 3.0 做到了通过编译阶段对静态模板的分析，编译生成了 Block tree。
Block tree是一个将模版基于动态节点指令切割的嵌套区块，每个 区块内部的节点结构是固定的，每个区块只需要追踪自身包含的动态节点。
所以，在3.0里，渲染效率不再与模板大小成正相关，而是与模板中动态节点的数量成正相关。
- slot 编译优化
- Vue.js 2.x 中，如果有一个组件传入了slot，那么每次父组件更新的时候，会强制使子组件update，造成性能的浪费。
- Vue.js 3.0 优化了slot的生成，使得非动态slot中属性的更新只会触发子组件的更新。
动态slot指的是在slot上面使用v-if，v-for，动态slot名字等会导致slot产生运行时动态变化但是又无法被子组件track的操作。
- diff 算法的优化
- vue2中的虚拟DOM是进行的全量对比
- vue3中新增了静态标记（PatchFlag）,新旧对比的时候，只对比带有patch flag的，并且可以根据flag的信息，得知当前节点要对比的具体内容化。
3. Vue3.0是如何变得更快的？（底层，源码）
- a. diff方法优化
- b. hoistStatic 静态提升
- c. cacheHandlers 事件侦听器缓存
4. Composition API 与 React.js 中 Hooks的异同点
面试题资料
