Vue组件中避免未使用变量重渲染及addingData重复调用问题

一、addingData被调用两次的原因 #

Vue在开发环境下会执行两次渲染：第一次是正常渲染，第二次是校验模板渲染是否存在副作用（比如方法内修改响应式数据）。如果直接在v-for中调用方法，每次组件渲染都会触发方法执行，开发环境的双重渲染逻辑就会导致方法被调用两次。

另外，模板中直接调用方法本身就不是最佳实践——哪怕是和该方法无关的组件状态变化，也会触发方法重复执行，造成不必要的性能浪费。

二、解决addingData重复调用的方法 #

1. 用watch监听数据变化触发逻辑 #

通过watch监听myData的更新，仅在数据变化时执行去重拼接操作，避免每次渲染都触发方法：

<script setup>
import { ref, watch } from 'vue'
const myData = ref([])
const auxData = ref([])

// 模拟接口定时返回数据
setInterval(() => {
  // 示例新数据，实际替换为接口返回内容
  myData.value = [{ id: Date.now(), name: `新数据${Date.now()}` }]
}, 2000)

// 监听myData变化，处理去重拼接
watch(myData, (newVal) => {
  // 按id去重，可根据实际业务调整去重规则
  const uniqueNewItems = newVal.filter(item => !auxData.value.some(auxItem => auxItem.id === item.id))
  auxData.value = [...auxData.value, ...uniqueNewItems]
}, { deep: true })
</script>

<template>
  <div v-for="item in auxData" :key="item.id">{{ item.name }}</div>
</template>

2. 用计算属性维护最终渲染数据 #

如果auxData仅依赖myData做纯数据转换，可通过计算属性实现，确保数据变化时才重新计算：

<script setup>
import { ref, computed } from 'vue'
const myDataHistory = ref([])
const currentMyData = ref([])

// 模拟接口数据更新
setInterval(() => {
  currentMyData.value = [{ id: Date.now(), name: `新数据${Date.now()}` }]
  // 先缓存去重后的新数据
  const uniqueNewItems = currentMyData.value.filter(item => !myDataHistory.value.some(h => h.id === item.id))
  myDataHistory.value = [...myDataHistory.value, ...uniqueNewItems]
}, 2000)

// 计算属性返回最终渲染列表
const auxData = computed(() => myDataHistory.value)
</script>

<template>
  <div v-for="item in auxData" :key="item.id">{{ item.name }}</div>
</template>

三、避免未使用变量引发的重渲染 #

1. 精准控制响应式数据 #

• 对于不需要深度响应的对象/数组，使用shallowRef或shallowReactive，减少不必要的依赖追踪。
• 组件内未在模板、计算属性或watch中使用的响应式数据，Vue会自动忽略其追踪，但父组件传递的无用props仍会触发子组件重渲染，需及时清理。

2. 用v-memo缓存模板片段（Vue3） #

针对不需要频繁更新的模板区域，通过v-memo指定依赖数组，仅当依赖变化时才重渲染该区域：

<template>
  <div v-memo="[auxData.length]">
    <div v-for="item in auxData" :key="item.id">{{ item.name }}</div>
  </div>
</template>

3. 组件级优化 #

• Vue3中用memo包裹组件，仅当props发生变化时才重渲染子组件：

<script setup>
import { memo } from 'vue'
const props = defineProps({
  list: { type: Array, required: true }
})
// ...组件逻辑
export default memo(defineComponent({ /* 组件内容 */ }))
</script>

• Vue2中可通过shouldComponentUpdate钩子手动判断是否需要重渲染，或用keep-alive缓存组件实例（适合路由、动态组件场景）。

内容的提问来源于stack exchange，提问作者yavgz