我们应该都知道 vue
会通过 object.defineProperty
对数据进行劫持,来实现视图响应数据的变化,然而有些时候我们的组件就是纯粹的数据展示,不会有任何改变,我们就不需要 vue
来劫持我们的数据,在大量数据展示的情况下,这能够很明显的减少组件初始化的时间,那如何禁止 vue
劫持我们的数据呢?可以通过 object.freeze
方法来冻结一个对象,一旦被冻结的对象就再也不能被修改了。
export default {
data: () => ({
users: {}
}),
async created() {
const users = await axios.get("/api/users");
this.users = Object.freeze(users);
}
};
另外需要说明的是,这里只是冻结了 users
的值,引用不会被冻结,当我们需要 reactive
数据的时候,我们可以重新给 users
赋值。
methods: {
handelClick() {
const newArr = [7, 8, 9, 10];
this.users = newArr;
}
}