待补充：单向绑定原理、VueX、Vue-router、单双向绑定的缺陷、computed 和 watch 的区别

1 Vue3新特性

1. 性能提升：
   • 重写虚拟 DOM 实现
   • 运行时编译
   • update 性能提高
   • SSR 速度提高
2. 支持 Tree-shaking（剪枝）
3. 提供 Composition API（组合 API）
4. 新增组件，如 Fragment、Teleport、Suspense
5. 对 TypeScript 更好支持

2 v-if 和 v-show 的区别

v-if 根据条件决定是否渲染，具有较高的切换开销；v-show 始终渲染，具有较高的初始渲染开销。

v-show 调用 display:none 使节点消失，v-if 直接去掉 DOM 节点。

3 为何要避免 v-if 与 v-for 同时使用？

v-for 优先级高于 v-if，每次都需判断。可以将 v-for 里的数组换成计算属性。

4 v-model 的实现原理？

• v-bind: 绑定数据
• oninput 事件触发并传递数据

<input v-model="sth" />
<!-- 等同于 -->
<input :value="sth" @input="sth = $event.target.value" />
<!-- 自 HTML5 开始，input 每次输入都会触发 oninput 事件，所以输入时 input 的内容会绑定到 sth 中，于是 sth 的值就被改变-->
<!-- $event 指代当前触发的事件对象;-->
<!-- $event.target 指代当前触发的事件对象的 DOM -->
<!-- $event.target.value 就是当前 DOM 的 value 值 -->
<!-- 在 @input 方法中，value => sth -->
<!-- 在 :value 中，sth => value -->

5 父子组件通信方式

• props 和 $emit
• $refs 和 $parent
• $attrs 和 $listeners
  • C 组件中能直接触发 getCData 的原因在于 B 组件调用C组件时 使用 v-on 绑定了 $listeners 属性
  • 通过 v-bind 绑定 $attrs 属性，C 组件可以直接获取到 A 组件中传递下来的 props（除了 B 组件中 props 声明的）

6 父子组件生命周期

• 父子创建时：父 beforeCreated -> 父 created -> 父 beforeMounted -> 子 beforeCreated -> 子 created -> 子 beforeMounted -> 子 mounted -> 父 mounted
• 子更新时：父 beforeUpdated -> 子 beforeUpdated -> 子 updated -> 父 updated
• 父更新时：父 beforeUpdated -> 父 updated
• 父子销毁时：父 beforeDestroyed -> 子 beforeDestroyed -> 子 destroyed -> 父 destroyed