vue项目优化之长列表性能优化(Object.defineProperty)

Vue 会通过 Object.defineProperty 对数据进行劫持,来实现视图响应数据的变化,

然而有些时候我们的组件就是纯粹的数据展示,不会有任何改变,

我们就不需要 Vue 来劫持我们的数据,在大量数据展示的情况下,

这能够很明显的减少组件初始化的时间,那如何禁止 Vue 劫持我们的数据呢?

可以通过 Object.freeze 方法来冻结一个对象,一旦被冻结的对象就再也不能被修改了。
 

getdata() {
    const users = axios.get("/api/users");
    this.users = Object.freeze(users);
  }

那就用到object.freeze方法了,它可以防止vue对它的监听。从而避免这种资源的浪费,不要看它小,而忽略,不积跬步无以至千里。

Object.freeze() 方法用于冻结对象,禁止对于该对象的属性进行修改(由于数组本质也是对象,因此该方法可以对数组使用)。在 Mozilla MDN 中是如下介绍的:

可以冻结一个对象。一个被冻结的对象再也不能被修改;冻结了一个对象则不能向这个对象添加新的属性,不能删除已有属性,不能修改该对象已有属性的可枚举性、可配置性、可写性,以及不能修改已有属性的值。此外,冻结一个对象后该对象的原型也不能被修改

该方法的返回值是其参数本身。

需要注意的是以下两点

Object.freeze() 和 const 变量声明不同,也不承担 const 的功能。

const和O

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue中,Object.defineProperty是一个关键的方法,用于实现双向数据绑定和响应式数据。它允许我们在一个对象上定义一个新属性或修改现有属性的特性。 使用Object.defineProperty方法,我们可以设置属性的value、writable、enumerable和configurable等特性。其中,value表示属性的值,writable表示属性是否可写,enumerable表示属性是否可枚举,configurable表示属性是否可配置。 在Vue中,通过Object.defineProperty方法,Vue能够跟踪数据的变化,并在数据发生变化时更新相关的视图。具体来说,当我们在Vue实例中使用data属性时,Vue会使用Object.defineProperty方法将data对象的属性转化为getter和setter,从而实现数据的响应式更新。 例如,我们可以使用Object.defineProperty方法定义一个name属性,并设置为不可写: ```javascript var obj = {} Object.defineProperty(obj, 'name', { value: '科比', writable: false }) ``` 这样,当我们尝试修改name属性的值时,会报错,因为它是只读的: ```javascript obj.name = "库里" // Cannot assign to read only property 'name' of object '#<Object>' ``` 通过这种方式,Vue能够在数据发生变化时自动更新相关的视图,实现双向数据绑定的效果。 总结来说,Vue使用Object.defineProperty方法来实现双向数据绑定和响应式数据,通过定义getter和setter来跟踪数据的变化并更新相关的视图。这使得Vue具有强大的数据驱动能力,实现了前端开发中常见的数据绑定功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端小云儿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值