Vue列表页渲染优化详解


Posted in Javascript onJuly 24, 2017

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐share.js
Dec 23 Javascript
javascript 读取图片文件的大小
Jun 25 Javascript
javascript打印输出json实例
Nov 11 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
Jul 01 Javascript
jquery.validate 自定义验证方法及validate相关参数
Jan 18 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
May 23 Javascript
微信分享调用jssdk实例
Jun 08 Javascript
vue webpack打包优化操作技巧
Feb 22 Javascript
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
js实现点击展开隐藏效果(实例代码)
Sep 28 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
Jun 24 Javascript
vue 内联样式style中的background用法说明
Aug 05 Javascript
javascript cookie的基本操作(添加和删除)
Jul 24 #Javascript
JavaScript取得gridview中获取checkbox选中的值
Jul 24 #Javascript
Javascript之图片的延迟加载的实例详解
Jul 24 #Javascript
在React中如何优雅的处理事件响应详解
Jul 24 #Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
Jul 24 #Javascript
想用好React的你必须要知道的一些事情
Jul 24 #Javascript
利用node.js实现反向代理的方法详解
Jul 24 #Javascript
You might like
239军机修复记
2021/03/02 无线电
过滤掉PHP数组中的重复值的实现代码
2011/07/17 PHP
Smarty中调用FCKeditor的方法
2014/10/27 PHP
PHP中调用SVN命令更新网站方法
2015/01/07 PHP
php定时执行任务设置详解
2015/02/06 PHP
php构造函数的继承方法
2015/02/09 PHP
php实现通过ftp上传文件
2015/06/19 PHP
Js event事件在IE、FF兼容性问题
2011/01/01 Javascript
javascript基础知识大集锦(二) 推荐收藏
2011/01/13 Javascript
关于锚点跳转及jQuery下相关操作与插件
2012/10/01 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
2013/11/08 Javascript
jquery获取元素值的方法(常见的表单元素)
2013/11/15 Javascript
JavaScript创建一个object对象并操作对象属性的用法
2015/03/23 Javascript
JavaScript时间操作之年月日星期级联操作
2016/01/15 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
2016/09/29 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
2017/01/21 Javascript
JavaScript和JQuery获取DIV值的方法示例
2017/03/07 Javascript
简单实现jQuery弹窗效果
2017/10/30 jQuery
JavaScript基于对象方法实现数组去重及排序操作示例
2018/07/10 Javascript
[41:20]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS DK
2014/05/26 DOTA
[03:17]DOTA2-DPC中国联赛1月29日Recap集锦
2021/03/11 DOTA
python xml.etree.ElementTree遍历xml所有节点实例详解
2016/12/04 Python
对python中的高效迭代器函数详解
2018/10/18 Python
详解如何设置Python环境变量?
2019/05/13 Python
对Python生成器、装饰器、递归的使用详解
2019/07/19 Python
Python爬虫库BeautifulSoup的介绍与简单使用实例
2020/01/25 Python
翻转数列python实现,求前n项和,并能输出整个数列的案例
2020/05/03 Python
html5 datalist 选中option选项后的触发事件
2020/03/05 HTML / CSS
ALLSAINTS英国官网:伦敦新锐潮流品牌
2016/09/19 全球购物
三个Unix的命令面试题
2015/04/12 面试题
社区党务公开实施方案
2014/03/18 职场文书
2014年政教处工作总结
2014/12/20 职场文书
思想品德评语大全
2014/12/31 职场文书
公积金接收函格式
2015/01/30 职场文书
大学生十八大感想
2015/08/11 职场文书
Python进行区间取值案例讲解
2021/08/02 Python