Vue面试题

1. Vue 2 和 Vue 3 的区别

• Vue 2：

  • 使用 Object.defineProperty 来实现数据的响应式。只能对已经存在的属性进行劫持，不能侦测到对对象的新增属性和删除属性。
  • 主要依赖于选项式 API（data、methods、computed、watch 等）。
  • TypeScript 支持较弱，使用起来相对繁琐。

• Vue 3：

  • 使用 Proxy 来实现响应式。Proxy 可以监听对象的所有操作，包括添加、删除属性和数组的变动。
  • 引入了 Composition API，允许开发者使用函数来组织逻辑，提升了代码的可读性和可维护性。
  • 更加原生地支持 TypeScript，类型推导和类型检查变得更加友好。

2. ref 和 reactive的区别

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

初始状态渲染的区别：

v-if:在初始值为false时，不会做任何操作，它确保了在切换时条件状态时，条件区块内的事件监听器和子组件都会被销毁与重建。编译状态：切换过程中合适地销毁和重建组件

v-show：无论初始值是什么都会进行渲染，编译状态：css的切换

如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适。

初始状态渲染的区别：
v-if：显示隐藏是将dom元素进行添加或删除。

v-show：显示隐藏是使用了diaplay属性，dom元素依然存在。

注意，v-show 不支持 <template> 元素，也不支持 v-else。

v-show 不支持 <template> 元素，因为 <template> 元素不会被渲染到最终的 DOM 中，而 v-show 是通过修改 DOM 元素的 CSS 来控制可见性的。