Vue 基本使用

1. v-if 和 v-show 的区别

本质：

• v-if：真实的创建和销毁 DOM
• v-show：切换 CSS 属性 display:none

使用场景：

• v-if：切换开销大，用于切换次数少
• v-show：首次开销大，用于切换次数多

额外补充：

• Anthony Fu 开发的 Vue 指令： v-lazy-show
• 作用：结合 v-if 和 v-show 优点，条件为 false 则首次也不渲染 DOM，后续切换用 CSS 属性 display:none

2. 组件间通讯

2.1 props 和 $emits

2.2 自定义组件 event.$emits

2.3 Vuex、Pinia

2.4 本地缓存（localStorage、sessionStorage）

3. 组件生命周期

3.1 单组件

3.2 父子组件