vue3面试题

目录：

1. Vue3.0的设计目标是什么？做了哪些优化?
2. Vue3.0 性能提升主要是通过哪几方面体现的？
3. Vue3.0里为什么要用 Proxy API 替代 defineProperty API ？
4. Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同？
5. 说说Vue 3.0中Treeshaking特性？举例说明一下？
6. 用Vue3.0 写过组件吗？如果想实现一个 Modal你会怎么设计？

 

1. Vue3.0的设计目标是什么？做了哪些优化?

2. Vue3.0 性能提升主要是通过哪几方面体现的？

3. Vue3.0里为什么要用 Proxy API 替代 defineProperty API ？

 

 

 

3. Vue3.0 里为什么要用 Proxy API 替代 defineProperty API？—— 响应式优化（高频，重点！！！）Vue更新的重点。

• defineProperty API 的局限性最大原因是它只能针对单例属性做监听。
  • Vue2 中的响应式实现正是基于 defineProperty 中的 descriptor，对 data 中的属性做了遍历 + 递归，为每个属性设置了 getter、setter。
  • 这也就是为什么 Vue 只能对 data 中预定义过的属性做出响应的原因，在 Vue 中使用下标的方式直接修改属性的值或者添加一个预先不存在的对象属性是无法做到 setter 监听的，这是 defineProperty 的局限性。
• Proxy API 的监听是针对一个对象的，那么对这个对象的所有操作会进入监听操作， 这就完全可以代理所有属性，将会带来很大的性能提升和更优的代码。
  • Proxy 可以理解成，在目标对象之前架设一层 “拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。

响应式是惰性的

• 在 Vue2 中，对于一个深层属性嵌套的对象，要劫持它内部深层次的变化，就需要递归遍历这个对象，执行 Object.defineProperty 把每一层对象数据都变成响应式的，这无疑会有很大的性能消耗。
• 在 Vue3 中，使用 Proxy API 并不能监听到对象内部深层次的属性变化，因此它的处理方式是在 getter 中去递归响应式，这样的好处是真正访问到的内部属性才会变成响应式，简单的可以说是按需实现响应式，减少性能消耗。

基础用法：

let datas = {
num: 0
}
let proxy = new Proxy(datas, {
get(target, property) {
return target[property]
},
set(target, property, value) {
target[property] += value
}
})

 

 

 

4. Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同？

 

 

5.说说Vue 3.0中Treeshaking特性？举例说明一下？

 

 

6. 用Vue3.0 写过组件吗？如果想实现一个 Modal你会怎么设计？