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中的escape及unescape函数的php实现代码
Sep 04 Javascript
JavaScript 利用Cookie记录用户登录信息
Dec 08 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
Jan 06 Javascript
node.js中的fs.symlink方法使用说明
Dec 15 Javascript
浅谈Javascript如何实现匀速运动
Dec 19 Javascript
微信小程序 wx:for的使用实例详解
Apr 27 Javascript
移动端效果之IndexList详解
Oct 20 Javascript
Vue导出json数据到Excel电子表格的示例
Dec 04 Javascript
JS中Object对象的原型概念基础
Jan 29 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
Jul 29 Javascript
JS如何定义用字符串拼接的变量
Jul 11 Javascript
ES2020让代码更优美的运算符 (?.) (??)
Jan 04 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
人大复印资料处理程序_查询篇
2006/10/09 PHP
用PHP查询域名状态whois的类
2006/11/25 PHP
IE6下JS动态设置图片src地址问题
2010/01/08 Javascript
jQuery中调用WebService方法小结
2011/03/28 Javascript
分享20款好玩的jQuery游戏
2011/04/17 Javascript
合并table相同单元格的jquery插件分享(很精简)
2011/06/20 Javascript
jQuery实现form表单reset按钮重置清空表单功能
2012/12/18 Javascript
js优化针对IE6.0起作用(详细整理)
2012/12/25 Javascript
javascript 构造函数方式定义对象
2015/01/02 Javascript
JS实现在页面随时自定义背景颜色的方法
2015/02/27 Javascript
javascript实现简单的贪吃蛇游戏
2015/03/31 Javascript
基于insertBefore制作简单的循环插空效果
2015/09/21 Javascript
AngularJS 日期格式化详解
2015/12/23 Javascript
vue.js表格分页示例
2016/10/18 Javascript
移动端界面的适配
2017/01/11 Javascript
React学习笔记之条件渲染(一)
2017/07/02 Javascript
react native实现往服务器上传网络图片的实例
2017/08/07 Javascript
vue.js的computed,filter,get,set的用法及区别详解
2018/03/08 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
2018/03/15 Javascript
原生JS实现获取及修改CSS样式的方法
2018/09/04 Javascript
html-webpack-plugin修改页面的title的方法
2020/06/18 Javascript
纯JS开发baguetteBox.js响应式画廊插件
2020/06/28 Javascript
[43:03]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
django使用xlwt导出excel文件实例代码
2018/02/06 Python
Python将list中的string批量转化成int/float的方法
2018/06/26 Python
Python反爬虫技术之防止IP地址被封杀的讲解
2019/01/09 Python
python按修改时间顺序排列文件的实例代码
2019/07/25 Python
Python3 main函数使用sys.argv传入多个参数的实现
2019/12/25 Python
Python Tensor FLow简单使用方法实例详解
2020/01/14 Python
利用SVG和CSS3来实现一个炫酷的边框动画
2015/07/22 HTML / CSS
《草虫的村落》教学反思
2014/02/16 职场文书
幼儿园小班教师寄语
2014/04/03 职场文书
田径运动会通讯稿
2014/09/13 职场文书
银行职员工作失误检讨书
2014/10/14 职场文书
高中运动会广播稿
2015/08/19 职场文书
如何理解python接口自动化之logging日志模块
2021/06/15 Python