(完整版)SpringBoot+Vue3打造企业级一体化SaaS系统

(完整版)SpringBoot+Vue3打造企业级一体化SaaS系统

download：https://www.sisuoit.com/4147.html

vue更新了3.0的正式版，不知不觉，现已过去了好几个月了，作为一位前端切图仔，是时分开始学习了，每次抱着预备学、再等等、明天说的主意，成功在发布了两个多月的时分来认真学习了一波，这儿来总结一下vue3到底有哪些更新，来帮各位没有时刻去了解vue3的朋友来一次快速入门。

如何看待vue3？

vue2.x是一个比较稳定的版别，也是很长一段时刻咱们在运用的版别，社区生态现已十分完善了，所以，假如咱们暂时还不有必要去着急升级到vue3，毕竟等候vue3的生态老练，还需求一段时刻的积累，可是作为前端领域必不可少的一门技能，当然期望能够提前去接触到，毕竟前端的技能迭代更新便是这么快。所以咱们来看看vue3相关于vue2到底有哪些优势和特性吧。便利比及时分社区完善之后，咱们能够直接在作业中去运用这些技能，毕竟自vue3一面世，就受到了职业各种大佬的关注。所以不管是单纯的作为api开发工程师去体会运用vue3，或许想要去学习尤大的编程思想，咱们都有必要去了解学习一下，本文都将运用vue3的语法来写，下面是vue3的官网地址vue3.x官网地址也能够到当前版别的官网在左上角点击切换到3.x-beta版别

怎样创立一个vue3的项目

运用官方的最新版的vue-cli，升级之后在创立项意图时分会让你挑选版别，挑选vue3版别即可，如下图：

只需求挑选3的版别然后和vue2相同的挑选，一路绿灯即可完结项目创立，这样的项目和vue2并无太多区别，同样是运用webpack来构建项目，相信这样的上手办法将会十分简略，可是vue3还供给了另一种创立办法：

第二种便是vite的办法生成一个项目了，做过大项意图同学都知道，webpack在咱们本地开发的进程中，每一次做细微的修改，都会形成很长时刻的重新打包，关于许多大型项目，这样耗费的时刻实在太久了，这也是长久以来的一个痛点，于是，vue3带着vite出世了，vite仍然是基于node来作业的，原理是运用浏览器现在现已支撑es6的import了，遇到import会发送一个http恳求去加载文件，vite拦截这些恳求，做一些预编译，省去了webpack冗长打包的时刻，提升开发体会，让本地开发更为高效这时分或许有人会问，这样webpack还有用么，那么这个其实毋庸置疑，当然是有用的，第一个vite的生态还不完善，暂时还不能保证其稳定性，第二依靠vite进行本地开发，在上线前的打包作业仍然需求webpack的支撑来运用，所以，webpack仍然需求，当然vite这样的新颖模式仍然是值得期待的，期望能够早点让这个技能更老练，让咱们的本地开发更为高效。项目目录

|-node_modules -- 所有的项目依靠包都放在这个目录下|-public -- 公共文件夹---|favicon.ico -- 网站的显示图标---|index.html -- 进口的html文件|-src -- 源文件目录，编写的代码根本都在这个目录下---|assets -- 放置静态文件的目录，比方logo.pn就放在这儿---|components -- Vue的组件文件，自界说的组件都会放到这---|App.vue -- 根组件，这个在Vue2中也有---|main.ts -- 进口文件，由于采用了TypeScript所以是ts结尾---|shims-vue.d.ts -- 类文件(也叫界说文件)，由于.vue结尾的文件在ts中不认可，所以要有界说文件|-.browserslistrc -- 在不同前端工具之间共用目标浏览器和node版别的装备文件，作用是设置兼容性最低适配版别|-.eslintrc.js -- Eslint的装备文件，不用作过多介绍|-.gitignore -- 用来装备那些文件不上传到git的文件进行办理|-package.json -- 命令装备和包办理文件|-README.md -- 项意图说明文件，运用markdown语法进行编写|-tsconfig.json -- 关于TypoScript的装备文件|-yarn.lock -- 运用yarn后主动生成的文件，由Yarn办理，安装yarn包时的重要信息存储到yarn.lock文件中仿制代码setup() 和 ref()

编辑器本人用的vscode，要想有vue3的语法提示，在vscode的商铺里边下载，**Vue 3 Snippets ** 插件即可。由于是学习vue3，所以下面的语法都将运用vue3来书写

首要咱们先来写一个简略的改造下app.vue页面，老规矩，全部清空，自己来操作，下面来写一个简略的店名体系功能来分析下新语法：

首要来比照下语法上有啥不同

在vue2，要完成这样一个程序，需求学生数组、选中人、然后methods去界说一个选中办法selectStuFn可是在vue3中，直接全部写在setup函数中就行，首要先来说说这个setup是什么，这个其实便是个生命周期的钩子函数，相关于vue2，他就等于vue2的beforeCreate和create两个生命周期函数，在vue3中他不仅仅是一生命周期函数，一起咱们需求经过这个函数来界说vue2中的data,methods,watch,computed特点，所以咱们上面提到的界说的两个特点和办法都界提到了其中，可是最终都需求return回去，而且写法有很大的一点不同是，咱们对其赋值或许取值的时分有必要是经过**.valuede 写法去拿或许取，能够看上图，而且终究咱们不管他是特点仍是办法都需求return**回去之后才能运用在vue2中界说在data里边的值就会主动变成呼应式，不需求咱们做什么操作，就能够在template里边直接运用在vue3中，如上图，咱们需求经过ref关键字进行包括，这样的操作才能将它界说为一个呼应式的数据，ref函数是一个把一般变量变成Proxy呼应式变量的函数ref的另一个用法能够调用原生的DOM所以咱们对setup和ref做一个总结：

setup函数其实是一个生命周期钩子，它对应的其实便是Vue2中的beforeCreate和create，而且他是vue3的composition API的进口函数。在vue3中咱们经过这个函数来界说vue2中的data,methods,watch,computed特点setup函数有必要有回来值，有必要回来一个目标，目标里包含所有在template模板中需求运用到的特点（包含data,methods等）在setup里边经过ref生命的呼应式数据，去取值或许赋值的时分有必要经过**.value的办法去拿，可是template却不需求运用.value**ref也能够调用原生domsetup接纳第一个参数是props，用于接纳props，也便是界说在组件上的特点（同vue2),可是接纳的props有必要先在props特点中界说，否则是不会被接纳到的setup接纳的第二个参数是context,在js里边这个形参代表了上下文，它暴露组件的 property，他便是一个一般的javaScript目标，在这儿面咱们能够取到attrs,** slots**,** emit**，等特点，所以能够干嘛我想各位都知道了。！需求注意的是，props是呼应式的数据，你不能运用 ES6 解构，由于它会消除 prop 的呼应性。咱们能够尝试一下将 props 进行 ES6 解构，会发现控制台报警了，所以，要结构props需求用到setup 函数中的 toRefs 来安全地完结此操作，后边再来说这个函数。

不难看出，上面的写法关于vue2而言，许多人或许会觉得比较费事,甚至有些疑惑为何需求运用**.value的办法，可是在模板中却又不需求，这样的写法似乎有些反人类了，第二个咱们假如界说许多还需求return许多值出去，都会觉得很费事，那么咱们有没有简略的写法能够解决它呢，答案是有的 ，所以，咱们来看看vue3的下一个新的API**，看看如何解决这个问题。

运用reactive函数优化程序

上面看到，写法相对有些不是很便利，下面咱们经过这个函数把他进行优化，不再运用**.value**的办法。

在上图，我用箭头指出了不相同的当地，能够为咱们总结下面几点

不再运用ref对特点进行声明呼应式，而是和相似vue2的写法，我只需求界说一个data目标即可，想要的特点都放在data，最终统一回来data即可。不再运用**.value的办法而改用data.**这样的办法，更便利自己了解，当然同理，template也需求加上，对我个人而言，，我觉得这种的写法更为清晰，更好了解。不需求再return一堆东西了，只需求return一个目标就能够了，写法愈加简洁。！这时分又有同学会问了，原本template不需求运用**.value怎样现在反而需求加data.了，这不是更费事了么？能够不去在template**加其他东西而直接运用特点就能够么？当然能够。

需求做到这种，有同学就会想到，只需我不回来目标，回来所以特点不就能够了吗？你想的没错，直接return所以特点就行了，就能够实行了，可是怎样完成呢？有同学就会想，直接结构赋值不就好了吗，直接rerurn {...data}这样不就能够么？我能够直接告知你，这样不能够，那么是为什么呢，这儿和上面的props相同的原理，由于咱们界说的是呼应式的数据，假如直接这样结构赋值就会形成，呼应式特性的破坏，形成数据不再是呼应式，这样点击按钮就没有任何改动了，所以咱们不能够这样做。那么咱们如何完成呢？也很简略，运用官方供给的 **toRefs()**函数即可完结，咱们再来改造一下。toRefs()函数对reavtive()函数解构回来

咱们对其进行简略的改造你就能够理解这个办法的作用了。

运用这样的办法就能够在模板中直接运用了不难想象这个办法便是为了经过其办法结构后不去破坏他的呼应式特性，便是这么简略。vue3的生命周期

什么是生命周期vue是组件化开发，一个组件从诞生到消亡的进程便是组建的生命周期。生命后期和人的出世到死亡是相同的，不一起期能够做不同的工作，便是这样的道理。vue2和vue3的生命周期比照vue2的beforeCreate和create变成了setupvue2的destroyed和beforDestroy变成了onUnmounted:尤大的解释是Unmounted愈加语义化，卸载的意思比vue2的毁掉愈加形象除了setup外大部分仍是vue2的名字，只是在前面加了个on关于调试函数，现在官方文档也没有过多解说，大部分的博主关于这个两个函数也十分含糊，这儿我自己运用测验之后发现，这两个函数都是关于组建状况产生改动之后能够追寻到各个呼应式数据的前后改动状况很改动次序，而且都具有一个参数event，所以个人觉得这个个人觉得便是状况盯梢函数，意图是为了在咱们本地开发的时分预备看出各个呼应式数据的改动进程。当然，这个后边的官方文档必定会为咱们解惑。

先简略的比照，咱们发现了这些不同之处vue3的watch的改动和watchEffect()

watch侦听器，咱们现已很常见了，基础用法便是监听一个值的新旧值的改动，在vue2里边采用的是一个目标的方式，然后在里边去监听不同的值，在vue3现已产生了改动，让咱们一起来看看

import from'vue'watch(a, (newVal, oldVal) => )仿制代码能够看到vue3的watch基础用法现已改动，想要运用watch，有必要先引进，然后实际上，vue3现在的语法和各类ui框架的按需引进相同，每个API都是要用什么引进什么这样的办法，后边咱们再来看看这样的好处

然后看看语法，这儿的wacth函数接纳两个参数，第一个参数是咱们要检测的值，第二个是回调函数，和以前相同具有新旧两个值。

那么一起，vue3的watch支撑一起监听多个值，以数组的方式，如下：

import from'vue'watch([a, b], ([newValA, newValB], [oldValA, oldValB]) => )仿制代码监听多个值，对应的回调函数的形参里的新旧值就也是多个，这样的监听会让咱们的事务做某些比照判断的时分愈加的灵敏，上面便是vue3的watch的根本用法了，当然，还有一个当地需求特别注意的是。

watch只能监听经过**ref()办法界说的呼应式数据，经过reactive()**函数界说的将会直接报错，让咱们先来看看报的错误再来说说为什么：上面这段报错是什么意思呢？它告知咱们，watch只能监听，1：具有getter/setter特点的值。2：一个ref特点，也便是经过**ref()声明的数据。3：一个reactive()**函数回来的目标。4：一个数组，这四种办法，那么就如上图，data.selectPeople会直接报错，便是由于咱们监听这个值不属于上面四种情况，那么首要咱们想为很么需求做呢？为什么不能够监听呢？咱们先想想vue2中watch有一个特点叫deep深度监听，这又是为什么呢？那么深度监听的实质其实是为了解决循环引证问题，那么咱们知道，vue2的深度监听实际上是用了递归来解决，这样就形成了性能不是很好，所以官方也不是很推荐运用deep，那么上面的问题便是，当你去监听一个目标或许数组的时分，前后目标便是循环引证，会发现newVal和oldVal的值一直相同，所以，才会出现上面这种情况，所以，要想解决上面的问题也很简略，能够经过一个函数直接return回来一个新值，这样就能够解决引证问题，如下相比之下，vue3的watch不论是从语法或许是从事务考虑，都有了新的场景和更多的运用办法，变得愈加灵敏了。