1、Vue 3与Vue 2相比有哪些主要改进?
- 优化指令系统:如v-model的改进,使其能够支持多个模型。
- 性能优化:使用Proxy代替Object.defineProperty,提升响应式性能。
- Compositon API:引入新的组合API,使逻辑复用更加灵活。
- 更好的TypeScript支持:默认使用TS进行开发和维护。
- 底层架构重构:使用更现代的JavaScript特性(如ES6)。
2、Vue 3中的响应式原理是?
- Vue 3使用Proxy对象来拦截对象属性的读写操作,包括属性的添加、删除和修改。
- 利用Reflect对象来操作源对象,以保持其行为的完整性。
- reactive函数用于创建响应对象,包括对象和数组。
3、Vue 3的Compositon API与Options API的区别?
- Composition API是Vue 3中新增加的特性,它允许你使用函数来组织和复用代码逻辑,而不是依赖组件选项(如data、methods等)。
- Options API是Vue 2中的传统API,通过组件选项来组织代码,如data、methods、computed等。
- Composition API更加灵活,允许跨组件逻辑复用,减少代码重复。
4、Vue 3中如何创建响应式数据?
- 在Vue 3中,你可以使用reactive函数来创建响应式对象。
- 对于数组,Vue 3仍然使用ref函数来创建响应式数组。
- 使用computed函数来创建计算属性,它会自动跟踪其依赖的响应式数据变化。
5、Vue 3中的ref和reactive有什么区别?
- ref用于创建基本类型数据的响应式引用,如字符串、数字等。
- reactive用于创建对象或数组的响应式代理,它可以代理对象的所有属性,包括嵌套对象。
6、Vue 3中如何检测数组的变化?
- Vue 3使用Proxy来拦截数组方法(如push、pop等),从而能够检测到数组的变化并触发视图更新。
- 与Vue 2相比,Vue 3不再需要重写数组方法来实现响应式。
7、请解释一下Vue 3中的toRefs和toRaw函数的作用?
- toRefs函数用于将响应式对象中的属性转换为单独的ref对象,这样可以更灵活地访问和修改这些属性。
- toRaw函数用于获取响应式对象的原始值,即去除其代理层,返回原始的非响应式对象。
8、Vue 3中如何实现组件之间的通信?
- 父组件向子组件通信:通过props属性向子组件传递数据。
- 子组件向父组件通信:通过事件向父组件发送消息。
- 非父子组件通信:可以使用Vuex进行状态管理,或者使用事件总线(EventBus)进行通信。