vue2 过渡到 vue3 指南

少年的小俊

已于 2023-11-16 16:56:33 修改

阅读量271

点赞数

文章标签： javascript 前端 vue.js

于 2023-11-07 17:35:38 首次发布

本文链接：https://blog.csdn.net/weixin_42290927/article/details/134272187

版权

本文介绍了Vue3从基础过渡到新特性的变化，如扁平化页面结构、hooks的使用、简化请求方式、全局状态管理（如pinia和Vuex）以及组件间更紧密的交互。重点探讨了组合式API和依赖注入，以提高开发效率和代码复用。

摘要由CSDN通过智能技术生成

vue2 基础过渡到 vue3

<html>
xxx
</html>

<script setup>
import xxx;

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

<style>
</style>

以往是子组件 + 父组件
现在是组件之间互相调用
以往页面数据，css，对象这些是以一个组件进行区分，现在这些都可以打散，进行重新组合
service(API) --> JS --> 页面
service(API) --> 状态对象 --> query 对象 --> 页面
以前是页面动作触发 js 函数，函数调用 service 访问API
现在是页面修改了js 的状态，状态自动触发 service相关动作，并对相关动作进行延伸，可以再变更后，自动刷新数据，并记录其中的过程
以前主要是通过 promise 的then catch 进行动作，将loading 状态，数据赋值放在 promise 里边实现
现在 promise 的这个过程被弱化，程序员不需要关系相关的这些过程，只需要触发某个值的变化，query 对象会处理成功或者失败，数据加载，请求状态记录的过程

以往使用 vue2 的过程是

	new Promise("addCart" => {}).then("getCart" => {})

现在，使用数据驱动，当
以往数据和页面成为一个组件，当跨组件时，往往通过callback 函数和参数进行数据变化
vue3 支持将数据抽离出来，比如两个页面都有一个状态栏，该状态栏归属于一个独立的js文件，当其中一个页面修改了状态时，引入该状态的另一个页面也会直接发生变化，不要额外的回调函数触发更新

https://cn.vuejs.org/guide/extras/composition-api-faq.html
组合式函数(vue版本的hooks)约定用驼峰命名法命名，并以“use”作为开头。
https://juejin.cn/post/7066951709678895141?searchId=202311161433454F155D978985EC3F5D40#heading-2