乐趣区

关于前端:Vuejs-比较重要知识点总结一

jiezi

# 概述

  • 谈一谈你对 Vue.js 的响应式数据的了解
  • Vue3 呈现解决了什么问题？它有哪些劣势？
  • Vue3 新个性有哪些
  • vue2 和 vue3 的响应式有什么区别？

谈一谈你对 Vue.js 的响应式数据的了解

Vue 2.x

对象类型 ：通过 object.defineProperty() 对属性的读取、批改进行拦挡（数据劫持)
数组类型 ：通过 重写更新数组的一系列办法 来实现拦挡(对数组的变更办法进行了包裹

Object.defineProperty【https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Refer…】

  • 当你把一个一般的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并应用 Object.defineProperty 把这些 property 全副转为 getter/setter。

    • Object.defineProperty 是 ES5 中一个无奈 shim 的个性，这也就是 Vue 不反对 IE8 以及 更低版本浏览器的起因。

  • 当应用这些数据属性时，会进行依赖收集（收集到以后组件的 watcher）

    • 每个组件都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据记录为依赖之后当依赖项的 setter 触发时，会告诉 watcher，从而使它关联的组件从新渲染

存在问题：

  • 新增属性、删除属性，界面不会更新
  • 间接通过下标批改数组，界面不会自动更新

更多精彩内容，请 微信搜寻“前端爱好者 “， 戳我 查看。

Vue 3.x

通过 Proxy（代理）：拦挡对象中任意属性的变动，包含：属性值的读写，属性的减少，属性的删除等。

通过 Reffect（反射）：对源对象的属性进行操作

Proxy 是 ECMAScript 6 中新增的属性。【https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Refer…】

MDN 文档中形容的 Proxy 与 Reflect

proxy

Proxy 对象用于创立一个对象的代理，从而实现基本操作的拦挡和自定义（如属性查找、赋值、枚举、函数调用等）。

被 Proxy 代理虚拟化的对象。它常被作为代理的存储后端。依据指标验证对于对象不可扩展性或不可配置属性的不变量（放弃不变的语义）。

语法

const p = new Proxy(target, handler)

参数：

target：

要应用 Proxy 包装的指标对象（能够是任何类型的对象，包含原生数组，函数，甚至另一个代理）。

handler：

一个通常以函数作为属性的对象，各属性中的函数别离定义了在执行各种操作时代理 p 的行为。

new Proxy(data,{
  // 拦挡读取属性值
  get(target, prop){return Reflect.get(target, prop)
  },
  // 拦挡设置属性值或增加新属性
  set(target, prop, value){return Reflect.set(target, prop, value)
  },
  // 拦挡删除属性
  deleteProperty(target, prop){return Reflect.deleteProperty(target, prop)
  }
})

Reffect

Reflect 是一个内置的对象，它提供拦挡 JavaScript 操作的办法。Reflect 不是一个函数对象，因而它是不可结构的。

在 reffect 身上，就有 defineProperty() 这个办法

在 Vue3 数据的更新是 proxy 配合 Reffect 来实现的。

Proxy 与 Object.defineProperty 优劣比照

Proxy 的劣势如下:

  • Proxy 能够间接监听对象而非属性；
  • Proxy 能够间接监听数组的变动；
  • Proxy 有多达 13 种拦挡办法, 不限于 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具备的；
  • Proxy 返回的是一个新对象, 咱们能够只操作新的对象达到目标, 而 Object.defineProperty 只能遍历对象属性间接批改；
  • Proxy 作为新规范将受到浏览器厂商重点继续的性能优化，也就是传说中的新规范的性能红利；

Object.defineProperty 的劣势如下:

  • 兼容性好，反对 IE9，而 Proxy 的存在浏览器兼容性问题, 而且无奈用 polyfill 磨平，因而 Vue3.0 才用 Proxy 重写。

总结

  • 在 Vue2 中，数据响应式次要借助 Object.defineProperty() 来实现，存在的缺点是无奈操作数据的减少和删除，
  • 在 Vue3 中，数据响应式次要借助 proxy 和Reffect配合实现，能够做到实现数据的增删改查。

Vue3 呈现解决了什么问题？它有哪些劣势？

Vue2 代码模式下存在的几个问题：

  • 随着性能减少，简单的组件代码越来越多，变得难以保护。次要起因是 vue2 通过选项式 API 组织的代码，一个逻辑性能可能有多处代码，不易他人上手。
  • 短少一个比拟洁净的在多个组件之间能够提取和复用逻辑的机制。
  • 类型推断不敌对。
  • 没有动态类型查看，只有代码运行之后能力发现错误等等。

Vue3 是在 Vue2 的根底上进行了一些优化，对 typeScript 有了更好的反对。

Vue3 和 Vue2 是能够共存的，Vue3 可能向下兼容反对选项式 API，同时又新增了一些个性，大大晋升了性能。

Vue3 的劣势：

  • 性能更好
  • 体积更小
  • 更好地 ts 反对
  • 更好的代码组织
  • 更好的逻辑抽离
  • 更多新的性能

Vue3 新个性有哪些

性能晋升

响应式性能晋升，由原来的 Object.defineProperty 改为基于 ES6 的 Proxy，使其速度更快，打消正告。
重写了 Vdom，冲破了 Vdom 的性能瓶颈。
进行模板编译优化。
更加高效的组件初始化。

更好的反对 typeScript

有更好的类型推断，使得 Vue3 把 typeScript 反对得十分好。

新增 Composition API

Composition API 是 vue3 新增的性能，比 mixin 更弱小。它能够把各个功能模块独立开来，进步代码逻辑的可复用性，同时代码压缩性更强。

新增组件

  • Fragment 不再限度 template 只有一个根几点。
  • Teleport 传送门，容许咱们将管制的内容传送到任意的 DOM 中。
  • Supense 期待异步组件时渲染一些额定的内容，让利用有更好的用户体验。

Tree-shaking：反对摇树优化

摇树优化后会将不须要的模块修剪掉，真正须要的模块打到包内。优化后的我的项目体积只有原来的一半，加载速度更快。

Custom Renderer API：自定义渲染器

实现 DOM 的形式进行 WebGL 编程。

vue2 和 vue3 的响应式有什么区别？

vue2 的响应式原理：

对象：是通过 Object.defineProperty 对 对象的已有属性值的读取和批改进行劫持。

Object.defineProperty('data', 'count', { get(){}, set(){}})

存在的问题：对象间接增加新属性或删除已有属性的时候，界面不会自动更新。

数组：是通过重写数组更新数组一系列更新元素的办法，来实现元素批改的劫持。

// 伪代码 const originalProto = Array.prototypeconst arrayProto = Object.create(originalProto)

['push','pop','shift','unshift','splice','reverse','sort'].forEach(key=>{arrayProto[key] = function(){originalProto[key].apply(this.arguments)
  notifyUpdate()}
})

存在问题：间接通过下标替换元素或更新 length 的时候，界面不会自动更新。

针对 vue2 对象和数组的某些更新，界面不能自动更新的问题，vue2 通过 $set 办法，实现视图的实时更新。

vue3 的响应式原理：

vue3 响应式是应用 ES6 的 proxy 和 Reflect 相互配合实现数据响应式，解决了 vue2 中视图不能自动更新的问题。

proxy 是深度监听，所以能够监听对象和数组内的任意元素，从而能够实现视图实时更新。

参考地址：

  • https://tangjiusheng.com/web/4935.html
退出移动版