![Vue笔记[六]-Vue3](https://cdn.chuckle.top/images/58-1.webp)
轻笑Chuckle
·
Vue笔记[六]-Vue3
💡
原文中文，约18000字，阅读约需43分钟。
📝
内容提要
Vue3引入了新的组合式API，如setup函数、ref函数、reactive函数等，提升了组件状态和逻辑管理的灵活性。此外，还有Teleport组件和Suspense组件，实现了异步加载和动态渲染。全局API发生变化，过渡类名更改。移除或改变了keyCode修饰符、过滤器等。Vue3带来了更强大和灵活的功能，提升了开发效率和用户体验。
🎯
关键要点
- Vue3引入了组合式API，如setup、ref和reactive函数，提升组件状态和逻辑管理的灵活性。
- Vue3推荐使用Vite创建工程，兼容大部分Vue2写法，但不建议混用组合式API和选项式API。
- setup函数是Vue3中的新配置项，所有数据和方法都需在setup中配置，this在setup中为undefined。
- ref函数用于定义响应式变量，返回一个带有value属性的ref对象，模板中直接使用ref对象名。
- reactive函数用于将对象类型转换为代理对象，支持直接修改数组数据。
- Vue3的响应式原理依赖于Proxy和Reflect，解决了Vue2中的性能和效率问题。
- props声明和context上下文的使用方式有所变化，使用defineProps和defineEmits进行声明。
- Vue3支持自定义hook，便于代码复用，组合式函数可以封装和复用状态和逻辑。
- Teleport组件可以将组件模板移动到指定元素中，Suspense组件支持异步加载和动态渲染。
- Vue3的全局API发生变化，过渡类名和keyCode修饰符等也进行了调整，移除了过滤器等功能。
➡️
