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 相关文章推荐
使用新的消息弹出框blackbirdjs
Oct 16 Javascript
广泛收集的jQuery拖放插件集合
Apr 09 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
May 04 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
Jul 29 Javascript
Vue2组件tree实现无限级树形菜单
Mar 29 Javascript
深入浅析vue组件间事件传递
Dec 29 Javascript
JS实现将二维数组转为json格式字符串操作示例
Jul 12 Javascript
Vuex 快速入门(简单易懂)
Sep 20 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
Dec 12 Javascript
Jquery实现获取子元素的方法分析
Aug 24 jQuery
webgl实现物体描边效果的方法介绍
Nov 27 Javascript
使用vue实现HTML页面生成图片的方法
Mar 12 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
PHP的PDO大对象(LOBs)
2019/01/27 PHP
PHP自动生成缩略图函数的源码示例
2019/03/18 PHP
Jquery动态进行图片缩略的原理及实现
2013/08/13 Javascript
js编写trim()函数及正则表达式的运用
2013/10/24 Javascript
百度判断手机终端并自动跳转js代码及使用实例
2014/06/11 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
2015/02/28 Javascript
javascript实现继承的简单实例
2015/07/26 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
2016/05/05 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
2016/08/02 Javascript
原生node.js案例--前后台交互
2017/02/20 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
2017/10/31 Javascript
vue实现点击展开点击收起效果
2018/04/27 Javascript
element-ui使用导航栏跳转路由的用法详解
2018/08/22 Javascript
nodejs图片处理工具gm用法小结
2018/12/12 NodeJs
express如何解决ajax跨域访问session失效问题详解
2019/06/20 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
2019/09/28 Javascript
vue中@change兼容问题详解
2019/10/25 Javascript
vue 组件销毁并重置的实现
2020/01/13 Javascript
vue实现简易计算器功能
2021/01/20 Vue.js
python两种遍历字典(dict)的方法比较
2014/05/29 Python
Python的Bottle框架中获取制定cookie的教程
2015/04/24 Python
Python如何为图片添加水印
2016/11/25 Python
微信跳一跳小游戏python脚本
2018/01/05 Python
使用Python刷淘宝喵币(低阶入门版)
2019/10/30 Python
Python中six模块基础用法
2019/12/08 Python
借助Paramiko通过Python实现linux远程登陆及sftp的操作
2020/03/16 Python
简述 Python 的类和对象
2020/08/21 Python
针对HTML5的Web Worker使用攻略
2015/07/12 HTML / CSS
音乐学院硕士生的自我评价分享
2013/11/01 职场文书
写好自荐信要注意的问题
2013/11/10 职场文书
物业管理专业个人的自我评价
2013/11/19 职场文书
小学生节约用水倡议书
2014/05/15 职场文书
2014年班组建设工作总结
2014/12/01 职场文书
致创业您:正能量激励人心句子(48条)
2019/08/15 职场文书
微信小程序和php的登录实现
2021/04/01 PHP
ubuntu下常用apt命令介绍
2022/06/05 Servers