前端基础【每日一题】

155 阅读2分钟

1. Vue2 和 Vue3的区别是什么?vue3新增了什么特性?

区别:

  • 1 Vue3使用ts做类型检测,Vue2 使用flow做类型检测
  • 2 Vue2中使用观察者模式,不管数据多大的时候都会进行创建检查者,而Vue3对数据进行了懒观察,仅对可见部分数据创建观察者,大大节省了性能
  • defineProperty 使用 proxy 替代

新增:

  • 新增CompositionAPI,新增ssr渲染等

2. Vue3.0 里为什么要用 Proxy API 替代 defineProperty API ?

  • 用proxy替代defineProperty可以解决对象新增、删除元素也能实现响应式监听,数组监听不用重写方法也能实现 set map等数据结构的响应式监听;
  • defineProperty 通过调用 defineReactive,数据发送变化的时候触发update实现响应式,当存在多级嵌套时需要使用递归,对象属性的添加或删除无法检测,但是存在问题例如对数组监听,新增了set和delete API
  • 对于数组监听的问题 defineProperty 自身做了处理(set),原因是性能问题,但是对象属性无法监听删除的这个问题依旧存在。

proxy深度监听怎么提高性能?

  • 层级只监听当前层级
  • 使用的时候监听
  • 可监听数组的变化
  • 可监听对象属性的新增删除

defineProperty的特点

  • 必须预先知道要拦截的key(data初始值),这也就是为什么Vue里对对象的新增属性无能为力,所以Vue初始化的过程中需要遍历data来挟持数据变化,造成速度变慢,内存变大的原因。
  • 深度监听需要递归到底,一次性计算量大
  • 无法监听 新增、删除属性 (处理方案Vue.set 和 Vue.delete)
  • 无法原生监听数组,需要特殊处理(重写)

3. Vue3.0 所采用的 Composition Api 与 Vue 2.x使用的Options Api 有什么区别?

  • Composition Api 实现了统一的业务代码块可以提取放到一起,更贴近原生的写法,Options Api 对应只能放在规定的位置
  • CompositionAPI 和 Options API的最大区别是功能聚合度高,同一个功能的代码可以放在一个hooks里方便维护和开发,Options总是划船找代码