vue2 过渡到 vue3 指南

文章目录

  • vue2 基础过渡到 vue3
    • vue3 的设计理念
      • 扁平化
      • 页面嵌套
    • 简化请求方式, 全局状态管理(global state managers)
      • hooks react 理念
      • react-query
        • useQuery useMutation useQueryClient (Vue-Query)
        • pinia
        • vuex
      • vueUse
    • 更加抽象化,使用更多 js 控制,少html 表达
    • 组合式API VS 选项式API VS React Hooks
        • 状态、逻辑的复用(旧版本 mixin)
    • 新的参数与回调函数
      • define
      • 依赖注入

vue2 基础过渡到 vue3

  1. 风格切换,更类似于原始风格, 倾向于 单页面包含(html, js, css)
<html>
xxx
html>

<script setup>
import xxx;

function a = ()=> {
	console.log(123);
}
script>

<style>
style>
  1. 优化生命周期,简化API, 原本vue2中有很多生命周期,vue3中简化为一个 OnMounted, 其他旧的API也可以使用,但重要性下降

  2. 启用新的API,定义变量,变量使用

    • ref()
    • reactive()
    • computed()
    • watch()
  3. js 与 html 深度融合,更加接近与 jsx 风格,使得js 在html 中直接编写,不需要定义函数然后再引用

    • react框架 JSX 风格
  4. 保留 v 开头的指令

    • v-if/v-else-if/v-else
    • v-for
    • v-show

vue3 的设计理念

  • 扁平化
  • 页面套用更频繁
  • 数据交互更拟人化
  • 更加贴合 react 的开发风格
  • 追求更高的开发效率
  • 简化请求方式,交互方式
  • 将API分散,让 API 成为可以组合的一个部分,在页面开发中,可以自由拼凑这些API

扁平化

  • hooks

页面嵌套

  • 以往是子组件 + 父组件

  • 现在是 组件之间互相调用

  • 以往页面 数据,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)
  • 获取,缓存,同步,更新状态
  • 作者 tanstack
pinia
vuex

vueUse

  1. 假设需要有一个页面,需要将购物车中的商品加 1,并重新获取购物车中的商品数量
  2. 以往使用 vue2 的过程是
    	new Promise("addCart" => {}).then("getCart" => {})
    
  3. 现在,使用数据驱动,当
  4. 以往数据和页面成为一个组件,当跨组件时,往往通过callback 函数和参数进行数据变化
  5. vue3 支持将数据抽离出来,比如两个页面都有一个状态栏,该状态栏归属于一个独立的js文件,当其中一个页面修改了状态时,引入该状态的另一个页面也会直接发生变化,不要额外的回调函数触发更新

更加抽象化,使用更多 js 控制,少html 表达

组合式API VS 选项式API VS React Hooks

  1. https://cn.vuejs.org/guide/extras/composition-api-faq.html
  2. 组合式函数(vue版本的hooks)约定用驼峰命名法命名,并以“use”作为开头。
  3. https://juejin.cn/post/7066951709678895141?searchId=202311161433454F155D978985EC3F5D40#heading-2
状态、逻辑的复用(旧版本 mixin)
  1. 数据(状态)
  2. 函数(逻辑,功能)

新的参数与回调函数

define

  • vue文档(参数与回调)
  • 通常,父组件 修改 子组件,通过参数
  • 子组件修改父组件,通过回调

依赖注入

  • vue文档(依赖注入)
  1. A -> B ->C, A 将参数给B, B 再给 C
  2. 现在通过依赖注入,A --> C, 直接将参数给 C,关键词 provide inject

你可能感兴趣的:(javascript,前端,vue.js)