Vue列表页渲染优化详解

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前端高效开发之列表渲染指令 # 喜马拉雅 # 会对 # 的是 # 春江花月夜 # 会有 # 还可以 # 不需要 # 如有 # 两种 # 将其 # 数据结构 # 可以直接 # 可以使用 # 会给 # 绑定 # 需要注意 # 具体内容 # 大家多多 # 每一项 # 组中

返回目录在线咨询

上一篇：Golang如何处理多返回值_Go多返回值语法与设计思想
下一篇：Golang如何使用reflect获取函数参数类型_Golang reflect函数参数类型分析

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

Vue列表页渲染优化详解

您的项目需求