大家好，我是今天的主讲人，咱们今天就来聊聊 Vue 应用里那些让人又爱又恨的更新机制。别怕，咱不是要搞什么高深的理论，就是想跟大家伙儿一起，把那些看似复杂的概念，用大白话掰扯清楚，然后用实实在在的代码，把性能优化给安排上。
Vue 的响应式系统：甜蜜的负担
Vue 的响应式系统，绝对是它的一大亮点。你改个数据，视图就自动更新了，是不是很爽？但凡事都有两面性，这种“牵一发动全身”的特性，在某些情况下，也会变成性能的瓶颈。
想象一下，你有个超大的组件，里面包含了各种各样的数据。每次数据更新，即使只有一小部分发生了变化，整个组件都可能重新渲染一遍。这就好比你家厨房有个水龙头漏水，你不是换个垫圈，而是把整个厨房都重新装修一遍，这成本是不是有点高？
所以，咱们的目标就是：精准打击，只更新需要更新的部分，避免不必要的渲染。
第一招：减少响应式依赖，让数据“各司其职”
Vue 的响应式系统会追踪组件中所有用到的响应式数据。如果一个数据根本不需要响应式更新，那咱们就没必要把它变成响应式的。
<template>
<div>
<h1>{{ title }}</h1>
<p>{{ description }}</p>
<button @click="handleClick">点击我</button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const title = '我的博客';
const description = ref('欢迎来到我的博客');
const handleClick = () => {
description.value = '博客内容更新了！';
};
return {
title,
description,
handleClick,
};
},
};
</script>在这个例子里，title 只是一个静态的标题，永远不会改变。但因为我们在 setup 中把它返回了，Vue 也会把它当成一个响应式数据来追踪。虽然影响不大，但积少成多，尤其是在大型应用中，这种不必要的追踪会增加性能开销。
更好的做法是，直接在模板中使用字符串字面量，或者将其定义为一个常量。
<template>
<div>
<h1>我的博客</h1>
<p>{{ description }}</p>
<button @click="handleClick">点击我</button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const description = ref('欢迎来到我的博客');
const handleClick = () => {
description.value = '博客内容更新了！';
};
return {
description,
handleClick,
};
},
};
</script>这样，Vue 就不会追踪 title 的变化，减少了不必要的渲染。
第二招：v-once 指令：一次渲染，终身受益
如果某个组件或元素的内容是静态的，永远不会改变，那么就可以使用 v-once 指令，告诉 Vue 只渲染一次。
<template>
<div>
<div v-once>
<p>这段文字只会被渲染一次</p>
</div>
<p>{{ dynamicData }}</p>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const dynamicData = ref('初始值');
setTimeout(() => {
dynamicData.value = '更新后的值';
}, 2000);
return {
dynamicData,
};
},
};
</script>在这个例子中，即使 dynamicData 的值发生了变化，v-once 包裹的 p 元素也不会重新渲染。这对于展示静态内容，比如网站的 Logo、版权信息等等，非常有用。
第三招：Memoization：记住结果，避免重复计算
Memoization 是一种优化技术，它通过缓存函数的计算结果，避免对相同的输入重复计算。Vue 提供了两种实现 Memoization 的方式：useMemo（在 Composition API 中）和 computed（在 Options API 和 Composition API 中）。
3.1 computed：响应式的 Memoization
computed 属性会缓存计算结果，只有当依赖的响应式数据发生变化时，才会重新计算。
<template>
<div>
<p>价格：{{ price }}</p>
<p>数量：{{ quantity }}</p>
<p>总价：{{ totalPrice }}</p>
</div>
</template>
<script>
import { ref, computed } from 'vue';
export default {
setup() {
const price = ref(10);
const quantity = ref(2);
const totalPrice = computed(() => {
console.log('计算总价');
return price.value * quantity.value;
});
return {
price,
quantity,
totalPrice,
};
},
};
</script>在这个例子中，只有当 price 或 quantity 的值发生变化时，totalPrice 才会重新计算。如果它们的值没有变化，totalPrice 会直接返回缓存的结果，避免重复计算。
3.2 useMemo：更灵活的 Memoization
useMemo 是一个 Composition API，它允许你更灵活地控制 Memoization 的行为。你可以指定一个依赖项数组，只有当这些依赖项发生变化时，才会重新计算。
<template>
<div>
<p>A：{{ a }}</p>
<p>B：{{ b }}</p>
<p>结果：{{ result }}</p>
</div>
</template>
<script>
import { ref, useMemo } from 'vue';
export default {
setup() {
const a = ref(1);
const b = ref(2);
const c = ref(3); // c 变化不影响 result
const result = useMemo(() => {
console.log('计算结果');
return a.value + b.value;
}, [a, b]); // 只有 a 或 b 变化才重新计算
setTimeout(() => {
c.value = 4; // 模拟 c 的变化
}, 2000);
return {
a,
b,
c,
result,
};
},
};
</script>在这个例子中，result 的计算依赖于 a 和 b。即使 c 的值发生了变化，result 也不会重新计算。这对于只关心部分依赖项的场景非常有用。
Memoization 使用场景举例：
| 场景 | 优化方式 | 代码示例
| 场景 | 优化方式 | 代码示例
| 列表渲染，每次都需要重新计算每个列表项的某些属性 | 使用 computed 或 useMemo 缓存计算结果。 | vue <template> <ul> <li v-for="item in items" :key="item.id"> {{ item.name }} - {{ formattedPrice(item.price) }} </li> </ul> </template> <script> import { ref, computed } from 'vue'; export default { setup() { const items = ref([ { id: 1, name: '商品 A', price: 10 }, { id: 2, name: '商品 B', price: 20 }, { id: 3, name: '商品 C', price: 30 }, ]); const formattedPrice = (price) => { // 使用 computed 缓存格式化后的价格 return computed(() => { console.log(`Formatting price for ${price}`); return `$${price.toFixed(2)}`; }); }; return { items, formattedPrice, }; }, }; </script>