Vue でデータ変数を使用する場合の注意点

Vue ではデータ内のプロパティが双方向バインディングによく使用されるため、Vue がそれらをハイジャックしてしまうため、データ プロパティを操作するときは、次のコードのように直接操作しないようにしてください。

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();
	}
}

最終的な印刷結果は次のようになります。

Vue によって自動的に追加される Observer プロパティが含まれていることがわかります。

上記のコードはthis.listデータを追加し続けるため、過剰なデータハイジャックが発生し、ロジックの処理速度が極端に遅くなります(値も同様)。通常のコードでは感じられないかもしれません。より複雑なキャンバス レンダリング アニメーションが に配置されています。すべての属性を使用するとthis、キャンバス レンダリングが非常にスタックすることがわかります。

そこで、init のコードを次のように変更します。

const list = [];
for(let i = 0; i < 1000; i++) {
    
    
  list.push({
    
    
    key: i,
    name: '张三'
  });
}
this.list = list;