Vue列表页渲染优化详解_网络技术_宿州市腾雀网络科技有限公司

Vue列表页渲染优化详解

发布时间 - 2026-01-11 02:29:30 点击率：次

vue列表页渲染优化，具体内容如下

想法

初始化时，vue会对data做getter、setter改造，在现代浏览器里，虽然JS已经足够快，但仍然有优化空间。

列表页的数据结构为：

list: [
    // 每一项有不同的来源，不同来源的数据都不同，因此放到一个数组里
    [{
      sourceId: 'xmla', // 来源的唯一标识
      id: 3001, // 资源的唯一标识
      source: '喜马拉雅', // 来源
      title: '昆曲之牡丹亭',
      imageUrl: 'http://x.baidu.com/x.gif',
      album: 0, // 是否是专辑
      hot: 1345,
      anchor: '青雪'
    }, {
      sourceId: 'xmla', // 来源的唯一标识
      id: 3005, // 资源的唯一标识
      source: '手机百度', // 来源
      title: '昆曲之牡丹亭',
      imageUrl: 'http://x.baidu.com/x.gif',
      album: 0, // 是否是专辑
      hot: 1345,
      anchor: '青雪'
    }],
    [{
      sourceId: 'xmla',
      id: 3002, // 资源的唯一标识
      source: '喜马拉雅', // 来源
      title: '昆曲之春江花月夜',
      imageUrl: 'http://x.baidu.com/x.gif',
      album: 0, // 是否是专辑
      hot: 1345,
      anchor: '青雪'
    }],
  ]
}

Vue会给数组中的每个值设置getter和setter来监听它们的变动

但其实列表数据是不会发生变化的，这些操作是多余的。

方法一：使用Object.freeze()

Object.freeze()是ES5新增的API，用来冻结一个对象，禁止对象被修改。vue 1.0.18+以后，不会对已冻结的data做getter、setter转换。

如果确保某个data不需要跟踪依赖，可以使用Object.freeze将其冻结。需要注意的是，被冻结的是对象的值，仍然可以将引用整个替换调。看下面例子：

<p v-for="item in list">{{ item.value }}</p>

new Vue({
  data: {
    // vue不会对list里的object做getter、setter绑定
    list: Object.freeze([
      { value: 1 },
      { value: 2 }
    ])
  },
  created () {
    // 界面不会有响应
    this.list[0].value = 100;

    // 下面两种做法，界面都会响应
    this.list = [
      { value: 100 },
      { value: 200 }
    ];
    this.list = Object.freeze([
      { value: 100 },
      { value: 200 }
    ]);
  }
})

当使用Vuex进行状态管理时，应当在给state.xxx赋值前使用Object.freeze():

[LIST_INIT](state, {list}) {
  Object.freeze(list);
  state.list = list;
},

getter和setter没有了。

方法二：传string方法

由于从后端取回的数据本身为字符串，不进行JSON.parse()直接存在state中，即可阻止Vue的改造。
使用时，在页面组件中引入字符串，JSON.parse()后可以直接赋值给this.XXX，如有需要还可以进一步子组件。

this.test = {
  a:{
    c:1,
    d:2
  },
  b:2
}

<list-item :test="test.a"></list-item>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# vue列表页渲染优化 # vue渲染优化 # vue列表页 # Vuejs第一篇之入门教程详解（单向绑定、双向绑定、列表渲染、响应函数） # VUEJS实战之构建基础并渲染出列表（1） # 深入理解Vue 的条件渲染和列表渲染 # 详解vuejs之v-for列表渲染 # vue.js基于v-for实现批量渲染 Json数组对象列表数据示例 # Vue.JS入门教程之列表渲染 # Vue.js学习教程之列表渲染详解 # Vue.js列表渲染绑定jQuery插件的正确姿势 # Vue 监听列表item渲染事件方法 # Vue前端高效开发之列表渲染指令 # 喜马拉雅 # 会对 # 的是 # 春江花月夜 # 会有 # 还可以 # 不需要 # 如有 # 两种 # 将其 # 数据结构 # 可以直接 # 可以使用 # 会给 # 绑定 # 需要注意 # 具体内容 # 大家多多 # 每一项 # 组中

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：Oracle数据库备份与恢复方案，确保数据安全

下一篇：《平安健康》绑定银行卡方法

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：Oracle数据库备份与恢复方案，确保数据安全

下一篇：《平安健康》绑定银行卡方法