这里写目录标题
不适当使用v-if和v-show
v-if会在DOM中添加或移除元素，而v-show只是切换元素的CSS属性display。
要根据需求选择使用。滥用v-if可能导致性能问题，尤其是在频繁切换的情况下。
直接修改props
props是父组件传递给子组件的只读数据，直接修改会导致数据流的不一致。应该通过事件向父组件请求更新。
// 错误写法
this.propValue = newValue; // 不应该这样做
在计算属性中执行异步操作
计算属性应该是同步的，避免在计算属性中进行异步调用，这可能导致不可预测的结果。应使用方法或生命周期钩子处理异步操作。
// 错误写法
computed: {
async data() {
return await fetchData(); // 不推荐
}
}
在mounted中直接访问DOM元素
Vue的DOM操作应该尽量通过模板和指令完成，直接操作DOM可能导致与Vue的响应式系统不兼容。
// 错误写法
mounted() {
this.$el.querySelector('.element').style.color = 'red'; // 不推荐
}
在data中定义复杂对象
在data中定义复杂对象时，应该避免直接引用，因为如果不小心修改了这个对象，Vue的响应式系统可能无法检测到变化。
// 错误写法
data() {
return {
user: {
name: '',
age: 0
}
};
}
在模板中使用复杂逻辑
在模板中使用复杂的逻辑或条件判断会影响可读性，应该将逻辑放在计算属性或方法中。
<!-- 错误写法 -->
<div v-if="user.age > 18 && user.name !== ''">成人</div>
未处理的错误和异常
在异步操作或API请求时，应处理可能的错误，以避免应用崩溃或不必要的错误输出。
// 错误写法
async fetchData() {
const response = await axios.get('/api/data'); // 未处理错误
}
不使用key属性
在v-for循环中，缺少key属性会导致性能问题和不必要的DOM重渲染。
<!-- 错误写法 -->
<li v-for="item in items">{{ item.name }}</li> <!-- 应该加上key -->