常见的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进行数据劫持

相关文章
|
1月前
|
缓存 JavaScript API
在vue中,computed 和 watch 的区别和运用的场景?
在vue中,computed 和 watch 的区别和运用的场景?
14 0
|
1月前
|
消息中间件 负载均衡 Kafka
【Kafka面试演练】那Kafka消费者手动提交、自动提交有什么区别?
嗯嗯Ok。分区的作用主要就是为了提高Kafka处理消息吞吐量。每一个topic会被分为多个分区。假如同一个topic下有n个分区、n个消费者,这样的话每个分区就会发送消息给对应的一个消费者,这样n个消费者负载均衡地处理消息。同时生产者会发送消息给不同分区,每个分区分给不同的brocker处理,让集群平坦压力,这样大大提高了Kafka的吞吐量。面试官思考中…
61 4
|
30天前
|
编译器 C++ Python
【C/C++ 泡沫精选面试题02】深拷贝和浅拷贝之间的区别?
【C/C++ 泡沫精选面试题02】深拷贝和浅拷贝之间的区别?
32 1
|
1月前
|
JavaScript
在vue中,v-show 与 v-if 有什么区别?
在vue中,v-show 与 v-if 有什么区别?
22 4
|
2天前
|
JavaScript 前端开发 API
vue与jqyery的区别
vue与jqyery的区别
|
3天前
|
JavaScript
vue面试
vue面试
25 14
|
3天前
|
JavaScript 算法 前端开发
vue3和vue2的区别都有哪些
【4月更文挑战第15天】Vue3与Vue2在响应式系统(Proxy vs. Object.defineProperty)、组件模块化(Composition API vs. Options API)、数据变化检测(Reactive API vs. $watch)、虚拟DOM算法(基于迭代 vs. 基于递归)及Tree-Shaking支持上存在显著差异。Vue3的改进带来了更好的性能和灵活性,适合追求新技术的项目。Vue2则因其成熟稳定,适合维护大型项目。选择版本需根据项目需求、团队情况和技术追求来决定。
8 0
|
12天前
|
Java 关系型数据库 MySQL
大厂面试题详解:Java抽象类与接口的概念及区别
字节跳动大厂面试题详解:Java抽象类与接口的概念及区别
35 0
|
13天前
|
缓存 JavaScript
vue中的计算属性和侦听属性的区别
vue中的计算属性和侦听属性的区别
|
13天前
|
存储 JavaScript 算法
Vue2 和Vue3 有什么区别
Vue2 和Vue3 有什么区别