因为在Vue中，data中的属性往往都是用于双向绑定，所以Vue会对其有劫持，所以我们在对data属性进行操作时，尽量不要对其直接操作，比如下面代码：
export default {
data() {
return {
list: []
}
},
methods: {
init() {
for(let i = 0; i < 1000; i++) {
this.list.push({
key: i,
name: '张三'
});
}
console.log(this.list);
}
},
created() {
this.init();
}
}
最终打印结果如下：
可以看到包含一个Observer属性，这是Vue自动加上的。
上面代码不断向this.list中添加数据，这样会造成过度数据劫持，造成逻辑处理速度极慢（取值同样如此），可能我们在平时的代码上感受不到，如果将一个比较复杂的canvas渲染动画放进去，全部使用this属性就会发现canvas渲染非常卡顿。文章来源：https://www.toymoban.com/news/detail-640367.html
所以我们将init中代码改成：文章来源地址https://www.toymoban.com/news/detail-640367.html
const list = [];
for(let i = 0; i < 1000; i++) {
list.push({
key: i,
name: '张三'
});
}
this.list = list;
到了这里，关于Vue中data变量使用的注意事项的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
