vue中使用Object.freeze()冻结对象,不进行响应式处理

已于 2023-07-29 14:11:45 修改
阅读量709 收藏 1
点赞数 1
文章标签： vue.js javascript 前端
于 2023-07-28 12:05:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_68320270/article/details/131977386
版权

当我们仅进行数据展示，不进行修改，就可以用到object.freeze()将数据冻结，该数据就不具备响应式功能。

使用场景：如表单...

例子在vue2中：

 这种情况，页面显示datas数据很慢，因为vue内部会先将getDatas（）返回的数据进行了遍历这个数组的每一个属性，通过Object.defineProperty()给他添加getter、setter，这就是observe做的事，因为他要将它变为响应式（就是这个过程，严重影响数据获取）

这时我们可以Object.freeze()

this.datas = Object.freeze( this.getDatas() );

这样很有效的缩减了页面显示时间 

@Planner
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
VUE中的Object.freeze
weixin_46382167的博客
10-08 819
场景:一个长列表数据,一般不会更改,但是vue会做getter和setter的转换 用法:是ES5新增的特性，可以冻结一个对象，防止对象被修改 支持:vue 1.0.18+对其提供了支持，对于data或vuex里使用freeze冻结了的对象，vue不会做getter和setter的转换 注意:冻结只是冻结里面的单个属性,引用地址还是可以更改 new Vue({ data: {// vue不会对list里的object做getter、setter绑定 list: Object.
vue-freeze, 简单状态管理 whitout bloating API和 Vue.js 概念.zip
09-18
vue-freeze, 简单状态管理 whitout bloating API和 Vue.js 概念 Freeze冻结简单状态管理 whitout bloating API和概念。 只有状态和动作，而且它会保持你的状态不变。 使用 Freezer.js的Vue冷柜。 让我们看看 ！ 主页现在是工作人员了 ！ 如何使不可变状态
Vue的性能优化常用的有哪些？
最新发布
星辰迷上大海的博客
04-07 924
Vue性能优化包括减少数据量、合理使用v-if和v-for、懒加载组件和图片、优化路由、缓存、压缩代码、骨架屏等。同时需注意对象层级不宜过深、合理使用computed和watch、避免内存泄漏。整合这些方法可以显著提升Vue应用性能。
vue中Object.freeze() 优化数据
qq_42451776的博客
09-04 692
文章目录基本概念案例 基本概念 阻止修改现有的属性，也意味着响应系统无法再追踪变化。 Object.freeze() 方法可以冻结一个对象，不能向这个对象添加新的属性，不能修改其已有属性的值，不能删除已有属性，以及不能修改该对象已有属性的可枚举性、可配置性、可写性。该方法返回被冻结的对象。 freeze冻结了的对象，vue不会做getter和setter的转换。 案例 <body> <div id="app"> <ul>
前端开发性能优化-Vue响应式优化
LLCSL的博客
04-13 101
针对Vue开发中对响应式数据的优化
Vue性能提升之Object.freeze()
muzidigbig的博客
12-24 7186
一、序 在 Vue 的文档中介绍数据绑定和响应时，特意标注了对于经过 Object.freeze() 方法的对象无法进行更新响应。因此，特意去查了 Object.freeze() 方法的具体含义。 二、含义 Object.freeze() 方法用于冻结对象，禁止对于该对象的属性进行修改（由于数组本质也是对象，因此该方法可以对数组使用）。在 Mozilla MDN 中是如下介绍的： 可以冻结一个对象。一个被冻结的对象再也不能被修改；冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，不能修
vue的数据冻结freeze方法，提升性能
weixin_67490903的博客
08-28 4651
如何使vue的响应式数据变为非响应式数据，在展示大量死数据时，通过freeze方法可以使数据冻结，变为非响应式数据，从而节约性能消耗。
Vue.js+Node.js全栈开发教程：Vue.js数据冻结
Lee达森的博客
06-23 528
Vue.js数据“同步更新”的功能很实用，页面渲染效果也很惊 艳。不过，我们不总是需要全部数据都保持同步更新，那么该如何操 作呢？Vue.js框架为数据对象定义了“冻结”方法，可以实现阻止 property属性同步更新的功能。 这个方法就是由?bject对象所提供的freeze()方法，通过在一个 对象上使用freeze()方法，就会阻止修改现有的property属性，也就 意味着Vue.js框架的视图响应系统无法追踪property属性的变化。下 面通过一个具体的代码实例进行详细介绍。 （1）在页面中定义
学习-Vue2-Vue实例-数据与方法-Object.freeze()
machine_vision123的博客
01-10 112
Object.freeze()，会阻止修改现有的property，意味着响应系统无法再追踪变化 代码示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE...
vue 中使用freeze出现的问题
Seven_Amber的博客
03-07 1523
&lt;template&gt;&lt;!-- import { Vue } from 'vue/types/vue'; --&gt;&lt;div&gt;  &lt;div class="one"&gt;    &lt;h1&gt;      {{number}}    &lt;/h1&gt;  &lt;/div&gt;  &lt;span&gt;    {{
vue开发心得和技巧分享
11-29
vue 1.0.18+对其提供了支持，对于data或vuex里使用freeze冻结了的对象，vue不会做getter和setter的转换。 如果你有一个巨大的数组或Object，并且确信数据不会修改，使用Object.freeze()可以让性能大幅提升。在我的...
【JavaScript源代码】Vue中如何定义数据示例详解.docx
12-30
对于那些仅在模板中用于渲染，但不再后续操作中修改的数据，可以考虑使用`Object.freeze`来冻结数据，以避免Vue进行不必要的数据劫持，提高性能。比如： ```javascript const arr = Object.freeze([{ name: 'nordon...
浅谈vue的几种绑定变量的值 防止其改变的方法
11-27
在Vue组件的数据选项中使用这个方法，可以确保后续对`obj`的任何修改操作都不会生效，从而保护了变量的值不被改变。然而，需要注意的是，`Object.freeze()` 只能防止对象的改变，如果对象内部包含可变类型（如数组或...
加速vue组件渲染之性能优化
11-20
因此，我们可以使用 `Object.freeze()` 方法来冻结 `tableTitle` 对象，阻止 Vue 进行不必要的响应式处理。例如： ```javascript export default { data() { return { tableTitle: Object.freeze(objConfig) };...
Vue列表页渲染优化详解
08-29
当数据对象不会改变时，可以使用`Object.freeze()`来冻结对象，阻止Vue为其添加getter和setter。这将避免不必要的数据监听和DOM更新。然而，这种方法只能防止对象内部属性的修改，不能阻止对象本身的替换。例如，...
Vue----Object.freeze()
菜同学的博客
07-15 915
1.参数为对象 Object.freeze()方法可以冻结一个对象，被冻结的对象再也不能被修改。不能向被冻结对象中添加新的属性，不能删除已有的属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，修改已有属性的值。冻结对象的原型也不能被修改。 Object.freeze()返回和传入的参数是相同的,返回的是传递的对象，而不是创建一个被冻结的副本 <template> ...
Vue中的Object.freeze(obj)
qq_33674454的博客
06-17 1518
Object.freeze() 方法可以冻结一个对象。一个被冻结的对象再也不能被修改；冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值。此外，冻结一个对象后该对象的原型也不能被修改。 再点击BUTTON后，foo由“sss”变为“zzz”。如果现在，我想冻结app这个对象，则需要加入Object.freez...
vue项目中使用Object.freeze()来优化列表，附带性能分析截图
九段刀客的博客
10-15 924
看了大佬的博客https://juejin.im/post/6844903913410314247vue项目性能优化里面提到如果是纯粹用来列表展示不需要改变里面属性的数据，可以用Object.freeze()冻结对象，避免被Object.defineProperty数据劫持，从而来实现优化。下面我写了个简单的demo，通过断点调试的方式来验证了一下， <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT
vue2中对象什么时候不发生响应式
05-12
在Vue2中，对象什么时候不发生响应式变化主要有以下两种情况： 1. 对象的属性在Vue实例创建时已经存在...需要注意的是，使用Object.freeze()方法可以将一个对象冻结，使其不可修改，这种情况下对象也不会响应式变化。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值