大家好，欢迎大家来看我的第一个笔记！我下定决心开始在Vu eDose上尝试给像你一样的开发者们一些奇技淫巧。
VueDoes的技巧将会非常简洁明了，希望这种格式你会更能抓住重点。好了各位看官，我们直奔主题吧。
通常我们需要渲染一个非常大的数组对象，例如用户列表，对象列表，文章列表等等等等。
但是有关的时候我们并不需要修改他们，仅仅作展示用，或者用vuex中的全局状态管理对象保存。下面是一个简单的例子：
export default {
data: () => ({
users: {}
}),
async created() {
const users = await axios.get("/api/users");
this.users = users;
}
};
Vue官方文档：
当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
把这种非常大的只用来展示的数组的属性变成响应式的属性，会消耗很多浏览器解析时间（可以实用google的开发者工具查看，下篇文章会提到）。虽然有时候，这些数据会做分页加载，但是你仍然会把这些数据在前端存储。
又比如制作谷歌地图的数据，通常是一个非常大的对象。
所以在以上的场景中，我们可以通过减少这种数据的响应式转换来提供前端的性能。那么咋办呢？我们可以在给Vue的data属性或者Vuex的state对象的属性赋值时，先用Object.freeze处理一下。
1.Vue的data属性
export default {
data: () => ({
users: {}
}),
async created() {
const users = await axios.get("/api/users");
this.users = Object.freeze(users);
}
};
2.Vuex的state对象的属性:
const mutations = {
setUsers(state, users) {
state.users = Object.freeze(users);
}
};
顺便说一下，当你需要修改这个数据，你可以通过创建一个新的对象数组。
当你需要增加一个对象，可以参考下面这个例子：
state.users = Object.freeze([...state.users, user]);
想了解具体提升了多少性能吗？欲知后事如何，请看下篇分解。
这就是今天所有的内容!希望你们能给个大拇指😛。
Remember you can read this tip online (with copy/pasteable code) and please share VueDose with all your colleagues if you liked it!
See you next week.
Alex
