带你认识vue3

1,050 阅读3分钟

文章内容输出来源:拉勾大前端高薪训练营

1、Vue 3.0 性能提升主要是通过哪几方面体现的?

答:通过3方面体现

  1. 响应式系统升级,采用Proxy实现
  2. 编译优化,通过静态节点检查以及Patch标记等实现
  3. 源码体积优化,通过tree-shaking,以及静态提升等实现  

 

 

2、Vue 3.0 所采用的 Composition Api 与 Vue 2.x使用的Options Api 有什么区别?

答:有以下区别

  • vue2.x逻辑代码组织分散,vue3逻辑代码组织集中更加方便管理和维护
  • vue2.x逻辑代码难于重用,vue3逻辑代码易于重用
  • vue2.x适用于简单的组件,vue3既适用于简单组件也适用于业务复杂的大型组件
  • vue3的composition api对tree-shaking更友好,代码更加易于压缩
  • vue3的composition api避免了对this的使用,彻底解决了this的指向问题 

 

3、Proxy 相对于 Object.defineProperty 有哪些优点?

答:相较Object.defineProperty, Proxy有这些优点

  • Proxy可以直接监听对象而非属性
  • Proxy可以劫持整个对象
  • Proxy可以监听动态新增的属性
  • Proxy可以监听删除的属性
  • Proxy可以监听数组变化,特别地可以监听数组的索引和length属性
  • Proxy有多达13种拦截方法,分别是:

get(target, propKey, receiver):拦截对象属性的读取,比如proxy.foo和proxy['foo']。

set(target, propKey, value, receiver):拦截对象属性的设置,比如proxy.foo = v或proxy['foo'] = v,返回一个布尔值。

has(target, propKey):拦截propKey in proxy的操作,返回一个布尔值。

deleteProperty(target, propKey):拦截delete proxy[propKey]的操作,返回一个布尔值。

ownKeys(target):拦截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)Object.keys(proxy)、for...in循环,返回一个数组。该方法返回目标对象所有自身的属性的属性名,而Object.keys()的返回结果仅包括目标对象自身的可遍历属性。

getOwnPropertyDescriptor(target, propKey):拦截Object.getOwnPropertyDescriptor(proxy, propKey),返回属性的描述对象。

defineProperty(target, propKey, propDesc):拦截Object.defineProperty(proxy, propKey, propDesc)、Object.defineProperties(proxy, propDescs),返回一个布尔值。

preventExtensions(target):拦截Object.preventExtensions(proxy),返回一个布尔值。

getPrototypeOf(target):拦截Object.getPrototypeOf(proxy),返回一个对象。

isExtensible(target):拦截Object.isExtensible(proxy),返回一个布尔值。

setPrototypeOf(target, proto):拦截Object.setPrototypeOf(proxy, proto),返回一个布尔值。如果目标对象是函数,那么还有两种额外操作可以拦截。

apply(target, object, args):拦截 Proxy 实例作为函数调用的操作,比如proxy(...args)、proxy.call(object, ...args)、proxy.apply(...)。

construct(target, args):拦截 Proxy 实例作为构造函数调用的操作,比如new proxy(...args)。

 

 

4、Vue 3.0 在编译方面有哪些优化?

答:vue在编译方面有这些优化

  • 支持多根节点,即Fragments(需要升级vetur插件,否则会有红色波浪线)
  • 标记和提升所有的静态根节点
  • Patch flag
  • 缓存事件处理函数  

 

5、Vue.js 3.0 响应式系统的实现原理?

  • Vue3内部采用ES6的Proxy代理对象来实现响应式系统
  • Proxy用于实现属性嗅探,在初始化过程中不必遍历所有属性来定义它们的属性。
  • 多属性嵌套,在访问属性的过程中处理下一级属性(递归处理)
  • 默认情况下会监视动态添加的属性。
  • 默认侦听属性的删除操作
  • 默认情况下,它侦听数组索引和长度属性的修改。
  • 它可以作为一个单独的模块使用。

核心方法:

  • reactive/ref/toRefs/computed
  • effect(在watch函数中使用的底层函数。)
  • track(用于收集依赖函数)
  • trigger(用于触发更新)