狗万官网酒店 > 狗万官网下载 > 如何提升vue.js外方大型数据的特性_vue.js

如何提升vue.js外方大型数据的特性_vue.js

来源: 2019-08-04 19:43 我来投稿 参与评论
这篇文章主要介绍了增进vue.js外方大型数据的特性,文中通过示范代码介绍的独特详细,对大家的上学或者工作具有原则性的参考学习价值,,要求的爱人可以参考下

您好!迎接大家访问VueDose的关键篇文章!咱在VueDose外方开始冒险吧,你会喜欢这些对你有帮助的小技巧。

VueDose的任何的篇章都特别之简单,我深信不疑人们在这种渐进式下更容易找到有用之东西。故而,让咱直奔主题。

一般我们需要获取对象数据,比如用户,品种,文章,等等等等・・・・・

有时,咱甚至不需要修改它们,只是为了展示它们或在(a.k.a. Vuex)外方存贮它们的大局状态。这就是说获取这个数目的简易代码如下:

export default {
data: () => ({
users: {}
}),
async created() {
const users = await axios.get("/api/users");
this.users = users;
}
};

Vue会自动循环数组的每股对象,并对每个一级属性进行响应。

对于大型数组对象来说这是一番昂贵的解法。正确,有时候你可以把那些数据分页,但是,其他人就能从前端拿到你所有数据。

谷歌地图标记通常就是这种状况,事实上它们是一番巨大的目标。

故而,在这些情况下,如果能够阻止Vue对这个数目的感应机制,咱可以获得一些性能上的升级换代。咱可以在添加到组件之前使用 Object.freeze 来处理数据实现这一点:

export default {
data: () => ({
users: {}
}),
async created() {
const users = await axios.get("/api/users");
this.users = Object.freeze(users);
}
};

本条也同样适用于 Vuex:

const mutations = {
setUsers(state, users) {
state.users = Object.freeze(users);
}
};

顺便说一下,如果你想要修改数组,你可以创造一个新数组来促成。排如,在原来上添加数据项,你可以这样做:

state.users = Object.freeze([...state.users, user]);

你想知道性能提升多少?咱会在主业一篇文章看到她,故而,请继续关心。

当天就到此处了!瞩望你会喜欢这主要篇文章

知道

这篇文章说的情节主要是如果你肯定数据是纯展示用之,如果你一次请求的数目特别大的话,这就是说可以用 Object.freeze 来冻结你的数目,冻结了多少之后会阻止Vue的默认响应机制,会提高Vue的特性。

Object.freeze()的概念:

Object.freeze() 艺术可以冻结一个对象。一度把冰冻的目标再也决不能把修改;冻结了一下对象则无从向这个目标添加新的属性,决不能删除已有属性,决不能修改该对象已有属性的可枚举性、可安排性、可写性,以及不能修改已有属性的值。另外,冻结一个对象后该对象的原型也决不能把修改。freeze() 回到和传播的平均数相同的目标。

末了

水平有限,难免有错漏之处,望各位大大轻喷的同时能够指出,跪谢!

上述就是本文的方方面面内容,瞩望对大家的上学有所帮助,也愿意大家多多支持脚本的师。

义务编辑:狗万官网酒店
 
 
0% (0)
 
 
0% (0)
机长评论( ) 请自觉遵守互联网相关的富民政策法规,不准发布色情、暴力、反动的议论。
地名: 匿名?