【前端学习笔记】Vue 3.0 带来的变化
主要变化
-
更小的体积和更快的速度
-
API设计的一致性增强
-
Typescript 支持
-
开放更多底层 API
Composition API （Vue 2 则是 Options API）
原先学过一点 react ，对 react 中 hooks （钩子函数）的印象很深，比如 useState() 。Hooks是一个新的React特性提案，组件尽量写成纯函数，如果需要外部React特性（比如状态管理，生命周期），就用钩子把外部特性"钩"进来，通常函数名字都是以use开头。首次在v16.7.0-alpha版本中添加，v16.8.0中正式发布。
Hooks 的目的是解决难以跨组件复用状态逻辑的问题。Hooks 可以帮助开发者将含有状态的逻辑从组件中抽象出来。Vue 3.0 为了更好地复用代码，借鉴了 React 中的 Hooks，增加了组合式 API ，setup 是它的入口函数。setup 执行的时间在 beforeCreate 之前，内部不能使用 this ，关于这里提到的生命周期参考官方文档。
组合式函数
vue 官方文档 给出了组合式函数的定义：在 Vue 应用的概念中，“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。有状态逻辑负责管理会随时间而变化的状态。一个简单的例子是跟踪当前鼠标在页面中的位置。在实际应用中，也可能是像触摸手势或与数据库的连接状态这样的更复杂的逻辑。想在多个组件中复用这个相同的逻辑，可以把这个逻辑以一个组合式函数的形式提取到外部文件中。
一句话总结：Vue 3 约定所有代码都组织在 setup 方法里面，通过组合式 API 分离相同功能的逻辑代码，并切割成各种模块导入导出使用。
扩展阅读
可以使用 arco-cli 新建一个项目，学习一下里面的代码。Arco Design Vue。
