常见的vue面试中的proxy和object.defineProperty的区别

简介: 常见的vue面试中的proxy和object.defineProperty的区别

1.针对这两个去劫持vue中的数据持有缺点和区别

    (1) object.defineProperty:  在对于一些属性来说使用object.defineProperty是无法截取到的,比如通过下标的方式修改数组中的数据或给对象新增属性,这都不能触发组件的渲染,因为object.defineProperty不能拦截到这些操作,更精准来说对于数组而言,大部分的操作是无法去拦截到的,只能通过vue的重写函数来去解决

object.defineProperty 的优点:

  1. 灵活性:Object.defineProperty() 允许您为对象定义不同的访问模式,例如只读、只写或可读写。
  2. 属性描述符:Object.defineProperty() 允许您为对象定义属性描述符,这可以控制属性的访问、修改和删除。
  3. 访问器:Object.defineProperty() 允许您为对象定义访问器,这可以自定义属性的访问行为。
  4. 防止意外覆盖:使用 Object.defineProperty() 可以防止在对象上定义相同名称的属性,从而避免意外覆盖现有属性。

object.defineProperty 的缺点

  1. 性能:由于 Object.defineProperty() 需要额外的操作,因此在大量属性的情况下,可能会影响性能。
  2. 学习曲线:Object.defineProperty() 是一种相对较新的方法,因此在一些开发者和团队中可能需要额外的学习和适应。
  3. 属性描述符的局限性:虽然属性描述符可以控制属性的访问、修改和删除,但它们不能为属性提供默认值或指定属性值的类型。
  4. 访问器的局限性:虽然访问器可以自定义属性的访问行为,但它们不能为属性提供默认值或指定属性值的类型。

     (2) proxy: 在vue3中不在使用这个方法了而是通过proxy对对象进行代理,从而实现数据劫持。使用proxy的好处就是可以监听到任何方式的数据变化

       优点:

  1. 隐藏真实目标地址:代理可以隐藏真实的目标地址,从而保护隐私。用户只知道代理的地址,而不知道真实的目标地址。
  2. 限制访问:代理可以限制对特定资源的访问,例如限制特定网站的访问。
  3. 控制访问行为:代理可以控制访问的行为,例如限制访问速度、限制访问次数等。

然而,代理也有其缺点:

  1. 增加延迟:由于数据需要经过代理服务器进行处理,因此数据传输速度可能会 slower than direct access.
  2. 增加复杂性:使用代理需要进行额外的配置和设置,这可能会增加使用代理的复杂性和难度。
  3. 数据安全性:代理可能会受到中间人攻击(MitM Attack)的影响,从而导致数据被篡改或泄露。
  4. 数据隐私保护:虽然代理可以保护用户的隐私,但如果代理服务器被恶意攻击,用户的隐私仍然可能会泄露。
  5. 代理服务器故障:代理服务器可能会因为故障或维护而无法提供服务,这可能会导致用户无法访问目标资源。

       缺点:兼容性不如object.definProperty() Proxy是es6的语法

总的来说在vue3中都是在使用的proxy进行数据劫持

相关文章
|
22天前
|
JavaScript 前端开发 API
Vue 3 中 v-model 与 Vue 2 中 v-model 的区别是什么?
总的来说,Vue 3 中的 `v-model` 在灵活性、与组合式 API 的结合、对自定义组件的支持等方面都有了明显的提升和改进,使其更适应现代前端开发的需求和趋势。但需要注意的是,在迁移过程中可能需要对一些代码进行调整和适配。
101 60
|
20天前
|
Java 程序员
Java社招面试题:& 和 && 的区别,HR的套路险些让我翻车!
小米,29岁程序员,分享了一次面试经历,详细解析了Java中&和&&的区别及应用场景,展示了扎实的基础知识和良好的应变能力,最终成功获得Offer。
53 14
|
19天前
|
Java 关系型数据库 数据库
京东面试:聊聊Spring事务?Spring事务的10种失效场景?加入型传播和嵌套型传播有什么区别?
45岁老架构师尼恩分享了Spring事务的核心知识点,包括事务的两种管理方式(编程式和声明式)、@Transactional注解的五大属性(transactionManager、propagation、isolation、timeout、readOnly、rollbackFor)、事务的七种传播行为、事务隔离级别及其与数据库隔离级别的关系,以及Spring事务的10种失效场景。尼恩还强调了面试中如何给出高质量答案,推荐阅读《尼恩Java面试宝典PDF》以提升面试表现。更多技术资料可在公众号【技术自由圈】获取。
|
1月前
|
设计模式 JavaScript 前端开发
js中new和object.creat区别
【10月更文挑战第29天】`new` 关键字和 `Object.create()` 方法在创建对象的方式、原型链继承、属性初始化以及适用场景等方面都存在差异。在实际开发中,需要根据具体的需求和设计模式来选择合适的方法来创建对象。
|
1月前
|
JavaScript 前端开发 开发者
Vue 3中的Proxy
【10月更文挑战第23天】Vue 3中的`Proxy`为响应式系统带来了更强大、更灵活的功能,解决了Vue 2中响应式系统的一些局限性,同时在性能方面也有一定的提升,为开发者提供了更好的开发体验和性能保障。
75 7
|
1月前
|
存储 缓存 网络协议
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点,GET、POST的区别,Cookie与Session
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点、状态码、报文格式,GET、POST的区别,DNS的解析过程、数字证书、Cookie与Session,对称加密和非对称加密
|
1月前
|
JavaScript 数据管理 Java
在 Vue 3 中使用 Proxy 实现数据双向绑定的性能如何?
【10月更文挑战第23天】Vue 3中使用Proxy实现数据双向绑定在多个方面都带来了性能的提升,从更高效的响应式追踪、更好的初始化性能、对数组操作的优化到更优的内存管理等,使得Vue 3在处理复杂的应用场景和大量数据时能够更加高效和稳定地运行。
59 1
|
1月前
|
JavaScript 开发者
在 Vue 3 中使用 Proxy 实现数据的双向绑定
【10月更文挑战第23天】Vue 3利用 `Proxy` 实现了数据的双向绑定,无论是使用内置的指令如 `v-model`,还是通过自定义事件或自定义指令,都能够方便地实现数据与视图之间的双向交互,满足不同场景下的开发需求。
62 1
|
2月前
|
JavaScript 前端开发 开发者
Vue v-for 进阶指南:in 与 of 的区别及应用场景 | 笔记
Vue.js 中的 v-for 是强大的遍历指令,但其中的 in 和 of 关键字往往被开发者忽视。尽管它们的用法相似,但适用的场景和数据结构却各有不同。本文将详细探讨 v-for 中 in 和 of 的区别、适用场景以及在实际开发中的最佳使用时机。通过理解它们的差异,你将能够编写更加高效、简洁的 Vue.js 代码,灵活应对各种数据结构的遍历需求。
112 6
|
2月前
|
缓存 JavaScript
Vue 中 computed 与 method 的区别
【10月更文挑战第15天】computed 和 method 是 Vue 中两个重要的选项,它们在功能和特点上存在着明显的区别。理解并合理运用它们的区别,可以帮助我们构建更高效、更具可维护性的 Vue 应用。在实际开发中,要根据具体情况灵活选择使用,以满足不同的需求。
31 2