面试题答案
一键面试1. 使用 Object.freeze
- 原理：
Object.freeze方法可以冻结一个对象，被冻结的对象不能被修改，Vue 检测不到冻结对象的变化，从而避免因无关数据变化导致的不必要渲染。 - 实际应用示例：假设项目中有一个配置对象，在初始化后不会再改变。
// data 中定义
data() {
const config = {
theme: 'default',
language: 'en'
};
return {
frozenConfig: Object.freeze(config)
};
}
在模板中使用 frozenConfig，即使 config 内部属性发生“变化”（实际上因为冻结无法真正变化），也不会触发组件重新渲染。
2. 合理使用 computed 属性
- 原理：
computed会基于它的依赖进行缓存，只有当它的依赖数据发生改变时，才会重新计算。这样可以把一些复杂的计算逻辑放到computed中，避免在模板中重复计算，同时减少不必要的渲染。 - 实际应用示例：假设有一个购物车列表，需要计算总价。
<template>
<div>
<ul>
<li v-for="item in cartItems" :key="item.id">
{{ item.name }} - {{ item.price }}
</li>
<p>Total: {{ totalPrice }}</p>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
cartItems: [
{ id: 1, name: 'Product 1', price: 10 },
{ id: 2, name: 'Product 2', price: 20 }
]
};
},
computed: {
totalPrice() {
return this.cartItems.reduce((acc, item) => acc + item.price, 0);
}
}
};
</script>
只有 cartItems 发生变化时，totalPrice 才会重新计算并触发相关 DOM 更新，而不是每次组件有其他无关数据变化都重新计算。
3. 使用 watch 并设置 deep 为 false（默认值）
- 原理：
watch可以监听数据的变化，默认情况下deep为false，即只监听数据的直接变化，不会递归监听对象内部深层次属性的变化，从而避免因对象内部深层次无关属性变化导致的不必要组件更新。 - 实际应用示例：假设监听用户信息对象的顶级属性变化。
export default {
data() {
return {
userInfo: {
name: 'John',
age: 30,
address: {
city: 'New York'
}
}
};
},
watch: {
userInfo: {
handler(newVal, oldVal) {
// 只有 userInfo 本身（非内部深层次属性）变化时触发
console.log('User info changed:', newVal);
},
deep: false // 可以省略，默认值为 false
}
}
};
这样当 address.city 变化时，不会触发 watch 回调，也就不会引发不必要的组件更新操作。
4. 组件拆分与局部状态管理
- 原理：将大型组件拆分成多个小组件，每个小组件只管理自身需要的局部状态，这样数据变化的影响范围就被缩小，只有相关的小组件会更新，而不是整个大组件。
- 实际应用示例：在一个电商产品详情页面，将评论部分拆分成单独的
CommentComponent组件。
<!-- ProductDetail.vue -->
<template>
<div>
<h1>{{ product.name }}</h1>
<p>{{ product.description }}</p>
<CommentComponent :comments="product.comments" />
</div>
</template>
<script>
import CommentComponent from './CommentComponent.vue';
export default {
components: {
CommentComponent
},
data() {
return {
product: {
name: 'Sample Product',
description: 'This is a sample product',
comments: [
{ id: 1, text: 'Great product!' },
{ id: 2, text: 'Love it!' }
]
}
};
}
};
</script>
<!-- CommentComponent.vue -->
<template>
<div>
<h2>Comments</h2>
<ul>
<li v-for="comment in comments" :key="comment.id">
{{ comment.text }}
</li>
</ul>
</div>
</template>
<script>
export default {
props: ['comments']
};
</script>
当 product 的其他属性（如 description）变化时，CommentComponent 不会重新渲染，只有 comments 变化时才会更新，有效控制了更新范围。
5. 使用 shouldComponentUpdate（Vue 2.x）或 v-once
shouldComponentUpdate原理：（Vue 2.x）在组件的生命周期钩子函数shouldComponentUpdate中，可以自定义判断逻辑，决定组件是否需要更新。只有返回true时，组件才会继续执行更新流程。shouldComponentUpdate实际应用示例：
export default {
data() {
return {
dataA: 'valueA',
dataB: 'valueB'
};
},
shouldComponentUpdate(nextProps, nextState) {
// 只有 dataA 变化时才更新组件
return nextState.dataA!== this.dataA;
}
};
v-once原理：v-once指令可以使元素或组件只渲染一次，渲染后视为静态内容，后续数据变化不会引起该元素或组件重新渲染。v-once实际应用示例：
<template>
<div>
<span v-once>{{ staticText }}</span>
<p>{{ dynamicText }}</p>
</div>
</template>
<script>
export default {
data() {
return {
staticText: 'This is a static text',
dynamicText: 'This is a dynamic text'
};
}
};
</script>
当 dynamicText 变化时，span 元素不会重新渲染，因为使用了 v-once。