Vue.js 是一款流行的前端框架，它的响应式系统可以帮助我们实现数据与视图的双向绑定，使得开发者可以更加方便地管理状态。在 Vue.js 中，我们经常需要渲染数组，例如列表、表格等等。但是，如果数组中的某个元素发生了变化，Vue.js 会重新渲染整个数组，这可能会导致性能问题。因此，我们需要了解如何在渲染数组时避免重复渲染。
问题分析
在 Vue.js 中，当我们使用 v-for 指令渲染数组时，Vue.js 会为每个数组元素创建一个响应式的数据对象。例如：
// www.javascriptcn.com code example
<template>
<ul>
<li v-for="item in items" :key="item.id">
{{ item.text }}
</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, text: 'item 1' },
{ id: 2, text: 'item 2' },
{ id: 3, text: 'item 3' },
],
};
},
};
</script>在上面的代码中，我们使用 v-for 指令渲染了一个数组 items，每个数组元素都有一个 id 和 text 属性。在渲染时，Vue.js 会为每个数组元素创建一个响应式的数据对象。
当我们改变数组中某个元素的值时，例如：
this.items[0].text = 'new item 1';
Vue.js 会检测到 items 数组发生了变化，从而重新渲染整个数组。这可能会导致性能问题，特别是当数组中的元素数量较多时。
解决方案
为了避免重复渲染，我们可以使用 Object.freeze() 方法来冻结数组元素，使其不可响应。例如：
// www.javascriptcn.com code example
<template>
<ul>
<li v-for="item in items" :key="item.id">
{{ item.text }}
</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: Object.freeze([
{ id: 1, text: 'item 1' },
{ id: 2, text: 'item 2' },
{ id: 3, text: 'item 3' },
]),
};
},
};
</script>在上面的代码中，我们使用 Object.freeze() 方法冻结了 items 数组中的每个元素，使其不可响应。这样，当我们改变数组中某个元素的值时，Vue.js 不会重新渲染整个数组，而是只会更新该元素对应的视图。
需要注意的是，使用 Object.freeze() 方法冻结数组元素会导致其不可响应，因此我们无法通过 Vue.js 的响应式系统来监听数组元素的变化。如果我们需要监听数组元素的变化，可以考虑使用 Vue.set() 或 this.$set() 方法来手动触发更新。
示例代码
下面是一个完整的示例代码：
// www.javascriptcn.com code example
<template>
<ul>
<li v-for="item in items" :key="item.id" @click="changeItem(item)">
{{ item.text }}
</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: Object.freeze([
{ id: 1, text: 'item 1' },
{ id: 2, text: 'item 2' },
{ id: 3, text: 'item 3' },
]),
};
},
methods: {
changeItem(item) {
// 通过 Vue.set() 方法手动触发更新
this.$set(item, 'text', `new ${item.text}`);
},
},
};
</script>在上面的代码中，我们使用 Object.freeze() 方法冻结了 items 数组中的每个元素。在点击某个列表项时，我们使用 Vue.set() 或 this.$set() 方法手动触发更新，改变了数组元素的值。这样，Vue.js 只会更新该元素对应的视图，避免了重复渲染。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d13a8fa941bf7134299925