Vue 3.0新特性

六大亮点

• 性能比Vue 2.x快1.2~2倍
• 按需编译，体积比Vue 2.x更小
• Composition API类似React Hooks
• 更好的TypeScript支持
• 暴露了自定义渲染API
• 新增Fragment、Teleport、Suspense组件

Vue 3.0是如何变快的以及新特性

1. diff方法优化

• Vue2中的虚拟dom是进行全量的对比
• Vue3新增了静态标记，只刷新有静态标记的元素

2. hoistStatic静态提升

• Vue2无论元素是否参与更新，每次渲染都会重新创建
• Vue3对于不参与更新的元素只创建一次，每次渲染复用

3. cacheHandlers事件侦听器缓存

• 默认情况下onClick会被视为动态绑定，每次都会追踪它的变化
• 开启事件缓存后，同一个方法不会追踪变化

4. 使用Vite构建Vue3项目

• Vite是一个web开发构建工具，由于其原生ES模块导入方法，它允许快速提供代码

npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev

5. Composition API

• Vue2使用data、methods、computed、watch，同一业务的数据和处理逻辑分散，不好维护
• Vue3增加Composition API，可以将同一业务数据和处理逻辑集中在一起方便维护