vue2 基础过渡到 vue3
- 风格切换，更类似于原始风格, 倾向于 单页面包含(html, js, css)
<html>
xxx
html>
<script setup>
import xxx;
function a = ()=> {
console.log(123);
}
script>
<style>
style>
-
优化生命周期，简化API， 原本vue2中有很多生命周期，vue3中简化为一个 OnMounted, 其他旧的API也可以使用，但重要性下降
-
启用新的API，定义变量，变量使用
- ref()
- reactive()
- computed()
- watch()
-
js 与 html 深度融合，更加接近与 jsx 风格，使得js 在html 中直接编写，不需要定义函数然后再引用
-
保留 v 开头的指令
- v-if/v-else-if/v-else
- v-for
- v-show
- 扁平化
- 页面套用更频繁
- 数据交互更拟人化
- 更加贴合 react 的开发风格
- 追求更高的开发效率
- 简化请求方式，交互方式
- 将API分散，让 API 成为可以组合的一个部分，在页面开发中，可以自由拼凑这些API
扁平化
页面嵌套
-
以往是子组件 + 父组件
-
现在是 组件之间互相调用
-
以往页面 数据，css，对象这些是以一个组件进行区分，现在这些都可以打散，进行重新组合
-
service(API) --> JS --> 页面
-
service(API) --> 状态对象 --> query 对象 --> 页面
-
以前是 页面动作 触发 js 函数，函数调用 service 访问API
-
现在是 页面 修改了js 的状态，状态自动触发 service相关动作，并对相关动作进行延伸，可以再变更后，自动刷新数据，并记录其中的过程
-
以前主要是通过 promise 的then catch 进行动作，将loading 状态，数据赋值放在 promise 里边实现
-
现在 promise 的这个过程被弱化，程序员不需要关系相关的这些过程，只需要触发某个值的变化，query 对象会处理 成功或者失败，数据加载，请求状态记录的过程
简化请求方式， 全局状态管理（global state managers）
hooks react 理念
react-query
useQuery useMutation useQueryClient (Vue-Query)
pinia
vuex
vueUse
- 假设需要有一个页面，需要将购物车中的商品加 1，并重新获取购物车中的商品数量
- 以往使用 vue2 的过程是
new Promise("addCart" => {}).then("getCart" => {})
- 现在，使用数据驱动，当
- 以往数据和页面成为一个组件，当跨组件时，往往通过callback 函数和参数进行数据变化
- vue3 支持将数据抽离出来，比如两个页面都有一个状态栏，该状态栏归属于一个独立的js文件，当其中一个页面修改了状态时，引入该状态的另一个页面也会直接发生变化，不要额外的回调函数触发更新
更加抽象化，使用更多 js 控制，少html 表达
组合式API VS 选项式API VS React Hooks
- https://cn.vuejs.org/guide/extras/composition-api-faq.html
- 组合式函数(vue版本的hooks)约定用驼峰命名法命名，并以“use”作为开头。
- https://juejin.cn/post/7066951709678895141?searchId=202311161433454F155D978985EC3F5D40#heading-2
状态、逻辑的复用(旧版本 mixin)
- 数据(状态)
- 函数(逻辑，功能)
新的参数与回调函数
define
依赖注入
- A -> B ->C, A 将参数给B, B 再给 C
- 现在通过依赖注入，A --> C, 直接将参数给 C，关键词 provide inject