--- theme: channing-cyan --- # 初学vue3 说来惭愧，vue3都发布了一年左右了，我才来学习vue3，看来我是真的弱鸡，现在的我是站在巨人的肩膀上来学习，刚出来vue3全是英文，看都看不懂，现在起码有中文了，结合了许多大佬的见解写出来的小白通俗易懂vue3理解，写的不好希望大家轻喷 ok，ok同志们，没有什么花里胡哨的开场白，今天我们来了解下vue3. ## 了解vue3创建方式首先我们先创建vue3文件，当然这一步和vue2一样，我就不一一描述了哈，懂的都懂。都创建好了吧，创建好了我们就来讲一讲[vite](https://vitejs.cn/)😝 第一我们要先了解**vite**是什么，vite是尤雨溪团队开发的新一代的前端构建工具，意图取代**webpack**，首先我们先来看一看vite有什么优点 ![vite.jpg](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a05a30f8ae504d378e44944371a4ccf0~tplv-k3u1fbpfcp-watermark.image?) - 无需打包，快速的冷服务器启动 - 即时热模块更换（HMR，热更新） - 真正的按需编译 webpack是一开始是入口文件，然后分析路由，然后模块，最后进行打包，然后告诉你，服务器准备好了（默认8080） ![bundler.37740380.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4dcb2c8157004850ad319f478cea528b~tplv-k3u1fbpfcp-watermark.image?`width=100px`) 然而vite是什么，它一开始是先告诉你服务器准备完成，然后等你发送HTTP请求，然后是入口文件，`Dynamic import`（动态导入）`code split point`（代码分割） ![esm.3070012d.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dedecd49c0344bf5b11f3fa3e4910787~tplv-k3u1fbpfcp-watermark.image?) 如何使用vite呢，大家可以去看[官网](https://vitejs.cn/)，也可以看我写的 ```js //要构建一个 Vite + Vue 项目，运行，使用 NPM: npm init @vitejs/app 项目名 //使用 Yarn: yarn create @vitejs/app 项目名你会觉得非常快速的创建了项目，然而它并没有给你下载依赖，你还有进入文件然后 npm install (or yarn) ``` 然后它的打开方式不是 `serve` 变成了`dev` ![1636687125(1).png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/37464be282ed4d20bac0a27a680c0a52~tplv-k3u1fbpfcp-watermark.image?) `Edit components/HelloWorld.vue to test hot module replacement.` 编辑components/HelloWorld.vue以测试热模块更换。（也就是热更新更快） ![1636687189(1).jpg](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/02ad78b38ddd4e02a3a95038203cacdd~tplv-k3u1fbpfcp-watermark.image?) 然而我们只是简单了解下，我们现在的重点是vue3，如果以后vite成为主流，我们也可以在回头看看。😜 现在还是以主流的方式创建并进行讲解 # 分析vue3 ## 基本了解当我们创建完成vue3项目后，点击它的main.js，你会发现写法发生了改变 ![1636688554(1).jpg](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e91e06642dc64e3fa93bf57aad29359b~tplv-k3u1fbpfcp-watermark.image?) ![1636688564(1).jpg](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9b0acecab2ed4c05a5ad458eb1b31826~tplv-k3u1fbpfcp-watermark.image?) 引入的不是vue构造函数，而是`createApp`工厂函数然而，创建实例对象其实就相当于vue2中的`vm`，`mount（'#app'）`就相当于`$mount('#app')`，并且vue2的写法在vue3不能兼容现在我们进入App组件，你会发现什么不一样的地方，他没有了根标签，在vue2的时候，我们都是在div根标签里面写东西，所以在vue3里面可以没有根标签 ![1636697972(1).jpg](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/97d17e33f76e43fba68e625543030905~tplv-k3u1fbpfcp-watermark.image?) ## 常用组合式API（重点！！！） ### setup **setup函数是 Composition API（组合API）的入口** **在setup函数中定义的变量和方法最后都是需要 return 出去的不然无法再模板中使用** ```js ``` 当然这不是响应式的写法，然后你们可能会问，为什么没有用`this`，我们要想一想之前为什么要用`this`，还不是作用域的问题，然而这次我们都在`setup`里面，所以不会用到`this`，而且这里兼容vue2的写法如：`data，methods...`，并且在vue2中可以读取到vue3里的配置但是vue3里面不能读取到vue2的配置，所以，vue3和vue2不要混用，如果有重名那么优先`setup`。 ps.如果大家不喜欢`return`这样的写法的话，可以用vue3新语法糖` ------- 子 ``` ### ref与reactive #### ref 上方我说到，我们写的不是响应式数据，我们写的只是字符串和数字，那怎么变成响应式数据呢，那就呀引入**ref**，但是如果我们直接在代码里面修改是修改不了的,不如打印一下name和age，你会发现ref把它们变成了对象并且还是`RefImpl`的实例对象 ```js ``` 所以，在修改的时候要.value去修改，里面还是走的get与set去修改页面 ![1636706595(1).jpg](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d2ea4dacbe214770b189f4bac2125303~tplv-k3u1fbpfcp-watermark.image?) 其实按道理的话，我们在页面上用的话应该要`{{name.value}}`显示的，但是因为vue3检测到你是ref对象，它就自动给你.value了 ```js function say(){ name.value='苒苒' age.value=20 } ``` 那么要是我定义的ref是个对象呢，因为我们知道尽管ref后会变成`RefImpl`的实例对象，所以我们就用`XX.value.xx`进行修改 ```js ``` 但是我们打印job.value,你会发现，它不再是`RefImpl`实例对象，变成了`Proxy`实例对象，他只是vue3底层，把对象都变成了`Proxy`实例对象，对于基本数据类型就是按照`Object.defineProperty`里面的`get`和`set`进行数据劫持然后进行响应式，但是如果是对象类型的话，是用到的`Proxy`，但是vue3把它封装在新函数**reactive**里，就相当于，ref中是对象，自动会调用**reactive**。 ![1636707807(1).jpg](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b45c187d48a1469eac0364e1739f5c37~tplv-k3u1fbpfcp-watermark.image?) #### reactive reactive只能定义对象类型的响应式数据，前面说到的ref里是对象的话，会自动调用**reactive**，把`Object`转换为`Proxy`，那我们来打印一下，你会发现就直接变成了`Proxy`，之前为什么会.value呢，是因为要去获取值，然后通过**reactive**变成`Proxy`，但是现在是直接通过**reactive**变成`Proxy`，而且它是进行的一个深层次的响应式，也可以进行数组的响应式 ```js ``` 有些人可能觉得，哎呀，我记不住，我就用`ref`，每次就`.value`可以了，香香香。他喵的，你正常点，要是一个页面就几个数据的话那还好，要是一堆数据，不得把你`.value`点的冒烟吗？，其实你可以按照之前vue2中data的形式来写，这样你就会觉得`reactive`香的一批了😁 ```js ``` 怎么样，是不是直接暴露出去个data就好了，这样起码更能理解，不会让人摸不着头脑为什么要`.value`，是吧😊 #### ref与reactive的区别 - ref用来定义：**基本类型数据**。 - ref通过`Object.defineProperty()`的`get`与`set`来实现响应式（数据劫持）。 - ref定义的数据：操作数据需要`.value`，读取数据时模板中直接读取不需要`.value`。 - reactive用来定义：**对象或数组类型数据**。 - reactive通过使用**Proxy**来实现响应式（数据劫持）, 并通过**Reflect**操作源代码内部的数据。 - reactive定义的数据：操作数据与读取数据：均不需要`.value`。当然，我之前就说过，ref可以定义对象或数组的，它只是内部自动调用了**reactive**来转换。 ### vue3的响应式原理说到vue3的响应式原理，那我们就不得不提一句vue2的响应式了，（狗都知道的一句）通过`Object.defineProperty`的`get`，`set`来进行数据劫持，修改，从而响应式,但是它有什么缺点呢😶 - 由于只有get()、set() 方式，所以只能捕获到属性读取和修改操作，当新增、删除属性时，捕获不到，导致界面也不会更新。 - 直接通过下标修改数组，界面也不会自动更新。 ok，vue2就聊这么多，什么？你还想听vue2底层？那你就Alt+←，拜拜了您嘞。对于vue3中的响应式，我们用到的**Proxy**，当然，我们在vue2里面知道，**Proxy**是什么，是代理，当然，并不是只用到了它，还有个Window上的内置对象`Reflect（反射）` - 通过Proxy（代理）: 拦截对象中任意属性的变化, 包括：属性值的读写、属性的添加、属性的删除等。 - 通过Reflect（反射）: 对源对象的属性进行操作。 ```js const p=new Proxy(data, { // 读取属性时调用 get (target, propName) { return Reflect.get(target, propName) }, //修改属性或添加属性时调用 set (target, propName, value) { return Reflect.set(target, propName, value) }, //删除属性时调用 deleteProperty (target, propName) { return Reflect.deleteProperty(target, propName) } }) ``` ### computed，watch与watchEffect #### computed 在vue3中，把`computed`变成为组合式API，那么就意味着你要去引入它，代码如下，一个简易的计算就完成了 ```html ``` 要是你去修改计算出来的东西，你知道会发生什么吗？警告的意思是计算出来的东西是一个只读属性。 ![1636807524(1).jpg](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/21f44a23aef5480c94583e13b0b21d2b~tplv-k3u1fbpfcp-watermark.image?) 那要是我们想要修改怎么办呢,那么就要用到`computed`的终结写法了 ```html ``` 但是，yysy（有一说一），他喵的，我寻思也没有人会去改计算属性吧？如果有，就当我没说😷 #### watch 你可能会想到`computed`都是组合式API，那么`watch`会不会也是组合式API呢？大胆点，它也是，那么我们就来进行监视 ```html ``` 当然这是监听`ref`定义出来的单个响应式数据，要是监听多个数据应该怎么办呢？其实可以用多个`watch`去进行监听，当然这不是最好的方法，最好的办法其实是监视数组 ```js watch([num,msg],(newValue,oldValue)=>{ console.log('当前改变了',newValue,oldValue) }) ``` 既然我们监听的是数组，那么我们得到的`newValue`和`oldValue`也就是数组，那么数组中的第一个就是你监视的第一个参数。 ps.当然之前在vue2中`watch`不是有什么其他参数吗，vue3中也有,是写在最后的。 ```js watch([num,msg],(newValue,oldValue)=>{ console.log('当前改变了',newValue,oldValue) },{immediate:true,deep:true}) ``` 之前我说过，我们现在监听的是监听`ref`定义出来数据，那么要是我们监听的是`reactive` ```html ``` 但是你会发现一个问题，为什么`newValue`与`oldValue`一样呢，就很尴尬，都是新的数据，就算你使用`ref`来定义，还是没有办法监听到`oldValue`（他喵的，都给你说了`ref`定义的对象会自动调用`reactive`）,所以**在监视reactive定义的响应式数据时，oldValue无法正确获取**,并且你会发现，它是**强制开启深度监视（`deep:true`），并且无法关闭。** 然而现在我们监视的是`reactive`定义的响应式数据的全部属性，是只监听其中的一个属性，那怎么办呢，可能大家会 ```js watch(names.age,(newValue,oldValue)=>{ console.log(`names改变了`,newValue,oldValue) }) ``` 来进行监视，但是，vue3会警告只能监听`reactive`定义的或者`ref`定义的,并且不能监听。 ![1636813377(1).jpg](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a76b56471c0446579504381d723dd36f~tplv-k3u1fbpfcp-watermark.image?) 那么我们就必须这样写（不会还有人不知道`return`可以省略吧？不会吧？不会吧？不会那个人就是你吧？） ```js watch(()=>names.age,(newValue,oldValue)=>{ console.log('names改变了',newValue,oldValue) }) ``` 那么要是我们监听的是多个属性，那怎么办呢？emmmm，你正常点，我上面都写了监听多个`ref`定义的响应式数据，你就不会举一反三吗？敲代码很累的好吧！！！他喵的，为了防止你们问多个`reactive`定义的一个属性，我就只能说和这个是一样的！！！能不能聪明点！！！ ```js watch([()=>names.age,()=>names.familyName],(newValue,oldValue)=>{ console.log('names改变了',newValue,oldValue) }) ``` ok，要是我们监听的是深度的属性那要怎么办呢？你会发现我要是只监听第一层是监听不到的，那么我们有两种写法 ```js //第一种 watch(()=> names.job.salary,(newValue,oldValue)=>{ console.log('names改变了',newValue,oldValue) }) //第二种 watch(()=> names.job,(newValue,oldValue)=>{ console.log('names改变了',newValue,oldValue) },{deep:true}) ``` 那么我们就可以这样理解，**如果监视的是`reactive`定义的响应式数据的属性，并且这个属性是对象，那么我们可以开启深度监视** （人都写傻了，写了四千多字了，还没写完...） #### watchEffect `watchEffect`是vue3的新函数，它是来和`watch`来抢饭碗的，它和`watch`是一样的功能，那它有什么优势呢？ - 自动默认开启了`immediate:true` - 用到了谁就监视谁 ```js watchEffect(()=>{ const one = num.value const tow = person.age console.log('watchEffect执行了') }) ``` 其实吧，`watchEffect`有点像`computed`，都是里面的值发生了改变就调用一次，但是呢`computed`要写返回值,而`watchEffect`不用写返回值。 ### 生命周期 ![lifecycle.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8ef5cbcfa4dd4fc6a2cb536353f7026d~tplv-k3u1fbpfcp-watermark.image?) ![2021060423231561.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/98911351167640b0b6092df1509a2fd4~tplv-k3u1fbpfcp-watermark.image?) 我们先来简单分析下，在vue2中，我们是先`new Vue()`，然后执行`beforeCreate`与`created`接着问你有没有`vm.$mount(el)`，有，才继续执行，但是在vue3中，它是先全部准备好后然后再进行函数。其实在vue3中生命周期没有多大的改变，只是改变了改变了销毁前，和销毁，让它更加语义化了 **`beforeDestroy`改名为`beforeUnmount`,`destroyed`改名为`unmounted`** 然后在vue3中，**`beforeCreate`与`created`并没有组合式API中,`setup`就相当于这两个生命周期函数** **在vue3中也可以按照之前的生命周期函数那样写，只是要记得有些函数名称发生了改变** 在`setup`里面应该这样写 - `beforeCreate`===>`Not needed*` - `created`=======>`Not needed*` - `beforeMount` ===>`onBeforeMount` - `mounted`=======>`onMounted` - `beforeUpdate`===>`onBeforeUpdate` - `updated` =======>`onUpdated` - `beforeUnmount` ==>`onBeforeUnmount` - `unmounted` =====>`onUnmounted` ### hooks函数 - Vue3 的 hook函数相当于 vue2 的 mixin, 不同在与 hooks 是函数 - Vue3 的 hook函数可以帮助我们提高代码的复用性, 让我们能在不同的组件中都利用 hooks 函数其实就是代码的复用，可以用到外部的数据，生命钩子函数...，具体怎么用直接看代码， ```js //一般都是建一个hooks文件夹，都写在里面 import {reactive,onMounted,onBeforeUnmount} from 'vue' export default function (){ //鼠标点击坐标 let point = reactive({ x:0, y:0 }) //实现鼠标点击获取坐标的方法 function savePoint(event){ point.x = event.pageX point.y = event.pageY console.log(event.pageX,event.pageY) } //实现鼠标点击获取坐标的方法的生命周期钩子 onMounted(()=>{ window.addEventListener('click',savePoint) }) onBeforeUnmount(()=>{ window.removeEventListener('click',savePoint) }) return point } //在其他地方调用 import useMousePosition from './hooks/useMousePosition' let point = useMousePosition（） ``` ### toRef与toRefs #### toRef `toRef`翻译过来其实就是把什么变成`ref`类型的数据，可能大家会觉得没有什么用，毕竟我们之前定义时就已经定义成`ref`,但是你们想一想，我们在之前是怎么写的 ```js ``` 是不是一直都是用到代码`name.xx`，可能你会说，那我就`return`的时候不这样写，改成这样 ```js return { name:names.name, age:names.age, salary:names.job.salary } ``` 但是你要是在页面进行操作时就不是响应式了，为什么呢？那是因为你现在暴露出去的是简简单单的字符串，字符串会有响应式吗？肯定没有呀，但是你要是用到了`toRef`,那就是把`name.xx`变为响应式，然后操作它时会自动的去修改`name`里面的数据 ```js return { name:toRef(names,'name'), age:toRef(names,'age'), salary:toRef(names.job,'salary') } ``` 但是有的人可能会说那我为什么不用`ref`去改变？可能大家会发现在页面里也是响应式的，但是我告诉你们，根本用到的不是`names`里面的数据，而是你单独定义出来的数据，所以要是这样写，无论怎么修改都不会修改到`names`里的数据 ```js return { name:ref(names.name), age:ref(names.age), salary:ref(names.job.salary), } ``` #### toRefs 聪明一点，`toRefs`与`toRef`有什么不同，加了个`s`,`toRef`是单个转化为响应式，那`toRefs`就是多个转化为响应式咯，这样的话就减少代码，不然要是有成千上万个，那你不是要当憨憨闷写吗？（`...`是结构哈,看不懂就麻溜的alt+←)，当然它只会结构一层，深层里的代码还是要老实的写 ```js

当前姓名:{{name}}

当前薪水:{{job.salary}}K

return { ...toRefs(names) } ``` ## 其他组合式API（了解，我寻思你基本上不会用） ### shallowReactive 与 shallowRef `shallowReactive`浅层次的响应式,它就是只把第一层的数据变为响应式，深层的数据不会变为响应式,`shallowRef`如果定义的是基本类型的数据，那么它和`ref`是一样的不会有什么改变，但是要是定义的是对象类型的数据，那么它就不会进行响应式，之前我们说过如果`ref`定义的是对象，那么它会自动调用`reactive`变为`Proxy`,但是要是用到的是`shallowRef`那么就不会调用`reactive`去进行响应式。 **shallowReactive：只处理对象最外层属性的响应式（浅响应式）。** **shallowRef：只处理基本数据类型的响应式, 不进行对象的响应式处理。** ```js let person = shallowReactive({ name:'大理段氏', age:10, job:{ salary:20 } }) let x = shallowRef({ y:0 }) ``` ### readonly 与 shallowReadonly `readonly`是接收了一个响应式数据然后重新赋值，返回的数据就不允许修改（深层只读），`shallowReadonly`却只是浅层只读（第一层只读，其余层可以进行修改） ```js names=readonly(names) names=shallowReadonly(names) ``` ### toRaw 与 markRaw `toRaw`其实就是将一个由`reactive`生成的**响应式对象**转为**普通对象**。如果是`ref`定义的话，是没有效果的（包括`ref`定义的对象）**如果在后续操作中对数据进行了添加的话，添加的数据为响应式数据**，当然要是将数据进行`markRaw`操作后就不会变为响应式，可能大家会说，不就是和`readonly`一样吗？那肯定不一样咯，`readonly`是根本没办法改，但`markRaw`是不转化为响应式，但是数据还会发生改变。 ```js ``` ### customRef **`customRef`创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。** 单纯觉得这个东西的作用只有防抖的作用（要是知道其他的用法可以告知一下我） ```js ``` 给你们说个趣事吧，顺便你们讲一下防抖节流的区别，之前有人在我公司面试的时候哈，给我说对项目进行了防抖节流处理，但是我细问防抖与节流的区别时却支支吾吾的，就很尴尬，然后我们就心照不宣的跳过了这个话题🤣🤣🤣 我是这样理解的 **防抖：在第一次触发事件时，不立即执行函数，而是给出一个时间段，如果短时间内大量触发同一事件，只会执行一次函数。** **节流：函数执行一次后，在某个时间段内暂时失效，过了这段时间后再重新激活，如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不再生效，直至过了这段时间才重新生效。**（可以理解为游戏技能冷却期）如果还是不是很能理解的话去看大佬的 [一杯茶的时间🍵，带你彻底学会手写防抖节流](https://juejin.cn/post/7016502001911463950#heading-5) ### provide 与 inject 都知道组件传值吧，在vue2中，如果要在后代组件中使用父组件的数据，那么要一层一层的父子组件传值或者用到`vuex`，但是现在，无论组件层次结构有多深，父组件都可以作为其所有子组件的依赖提供者。这个特性有两个部分：父组件有一个 `provide` 选项来提供数据，子组件有一个 `inject` 选项来开始使用这些数据。 ![components_provide.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b3f7e77d5057475a91010b7d3608fa93~tplv-k3u1fbpfcp-watermark.image?) ```js //父 import { provide } from 'vue' setup(){ let fullname = reactive({name:'阿月',salary:'15k'}) provide('fullname',fullname) //给自己的后代组件传递数据 return {...toRefs(fullname)} } //后代 import {inject} from 'vue' setup(){ let fullname = inject('fullname') return {fullname} } ``` 当然子组件也可以用，但是请记住，父子组件传参是有方法的！！！别瞎搞。 ### 响应式判断下面是vue3给的一些判断方法 **isRef: 检查值是否为一个 ref 对象。** **isReactive：检查对象是否是由 [`reactive`](https://v3.cn.vuejs.org/api/basic-reactivity.html#reactive) 创建的响应式代理。** **isReadonly: 检查对象是否是由 [`readonly`](https://v3.cn.vuejs.org/api/basic-reactivity.html#readonly) 创建的只读代理。** **isProxy：检查对象是否是由 [`reactive`](https://v3.cn.vuejs.org/api/basic-reactivity.html#reactive) 或 [`readonly`](https://v3.cn.vuejs.org/api/basic-reactivity.html#readonly) 创建的 proxy。** ```js import {ref, reactive,readonly,isRef,isReactive,isReadonly,isProxy } from 'vue' export default { name:'App', setup(){ let fullName = reactive({name:'小唐',price:'20k'}) let num = ref(0) let fullNames = readonly(fullName) console.log(isRef(num)) console.log(isReactive(fullName)) console.log(isReadonly(fullNames)) console.log(isProxy(fullName)) console.log(isProxy(fullNames)) console.log(isProxy(num)) return {} } } ``` ## 有趣的组件 ### Fragment 对我而言这个更像是一种概念，它的意思就相当于创建页面时，给了一个虚拟根标签`VNode`，因为我们知道在vue2里面，我们是有根标签这个概念的，但是到来vue3，它是自动给你创建个虚拟根标签`VNode`（`Fragment`）,所以可以不要根标签。好处就是 **减少标签层级, 减小内存占用** ### Teleport `teleport` 提供了一种有趣的方法，允许我们控制在 DOM 中哪个父节点下渲染了 HTML，而不必求助于全局状态或将其拆分为两个组件。其实就是可以不考虑你写在什么位置，你可以定义`teleport`在任意标签里进行定位等（常见操作为模态框），除了body外，还可以写css选择器（`id，class`） ```html //id定位

//class定位

//示例 ``` 打开控制台然后触发事件，观看效果 ### Suspense 大家都知道在渲染组件之前进行一些异步请求是很常见的事，`suspense` 组件提供了一个方案，允许将等待过程提升到组件树中处理，而不是在单个组件中。但是！！！在vue3中特别说明了，**Suspense 是一个试验性的新特性，其 API 可能随时会发生变动。特此声明，以便社区能够为当前的实现提供反馈。**，我直接尬住，以后估计会发生改变，但是你们愿意卷的话可以去看文章[vue3的传送门teleport究竟有多神奇？suspense发起异步请求有多简约？](https://juejin.cn/post/6977869719546101796#heading-12)，嗯，记得写800字观后感 ## vue3其他改动 ### router 可能大家会想到路由跳转的问题，可能大家会以为还是用`this.$router.push`来进行跳转，但是哦，在vue3中，这些东西是没有的，它是定义了一个`vue-router`然后引入的`useRoute`,`useRouter` 相当于vue2的 `this.$route`，`this.$router`,然后其他之前vue2的操作都可以进行 ```js import {useRouter,useRoute} from "vue-router"; setup(){ const router= useRouter() const route= useRoute() function fn(){ this.$router.push('/about') } onMounted(()=>{ console.log(route.query.code) }) return{ fn } } ``` ### 全局API的转移 | 2.x 全局 API（`Vue`） | 3.x 实例 API (`app`) | | --- | --- | | Vue.config.xxxx | app.config.xxxx | | Vue.config.productionTip | **移除** | | Vue.component | app.component | | Vue.directive | app.directive | | Vue.mixin | app.mixin | | Vue.use | app.use | | Vue.prototype | app.config.globalProperties | ### 其他改变 **移除**keyCode作为 v-on 的修饰符，同时也不再支持`config.keyCodes` **移除**`v-on.native`修饰符 **移除**过滤器（`filter`） ... 对了有手痒的想实战项目的话可以去看一看大佬的[🎉🎉Vue 3 + Element Plus + Vite 2 的后台管理系统开源啦🎉🎉](https://juejin.cn/post/6945072070132760590) # 🎉🎉完结撒花🎉🎉 *在这里感谢各位大佬们的vue3讲解，感谢他们的大力支持！！！* *感谢蒙古海军对本栏目的大力支持。蒙古海军：'我们要征服的可是星辰大海！'* *感谢素未谋面的女友对本栏目的大力支持。'躲猫猫是吧？你藏这么隐蔽我怎么去找？快给我留线索！！！立刻马上！'*

HelloWorld

{{ wish }}

姓名：{{name}}

年龄：{{age}}

姓名：{{name}}

年龄：{{age}}

职业：{{job.occupation}}

薪资：{{job.salary}}

姓名：{{name}}

年龄：{{age}}

职业：{{job.occupation}}
薪资：{{job.salary}}

爱好：{{hobby[0]}},{{hobby[1]}},{{ hobby[2] }}

姓名：{{data.name}}

年龄：{{data.age}}

职业：{{data.job.occupation}}
薪资：{{data.job.salary}}

爱好：{{data.hobby[0]}},{{data.hobby[1]}},{{ data.hobby[2] }}

当前数字为:{{num}}

当前姓名:{{names.familyName}}

当前年龄:{{names.age}}

当前薪水:{{names.job.salary}}K

当前姓名:{{names.name}}

当前年龄:{{names.age}}

当前薪水:{{names.job.salary}}K

当前姓名:{{name}}

当前薪水:{{job.salary}}K

当前姓名:{{names.name}}

当前年龄:{{names.age}}

当前薪水:{{names.job.salary}}K

女朋友：{{names.girlFriend}}

{{keyWord}}

第一层

第二层

第三层

HelloWorld

{{ wish }}

姓名：{{name}}

年龄：{{age}}

姓名：{{name}}

年龄：{{age}}

职业：{{job.occupation}}

薪资：{{job.salary}}

姓名：{{name}}

年龄：{{age}}

职业：{{job.occupation}}薪资：{{job.salary}}

爱好：{{hobby[0]}},{{hobby[1]}},{{ hobby[2] }}

姓名：{{data.name}}

年龄：{{data.age}}

职业：{{data.job.occupation}}薪资：{{data.job.salary}}

爱好：{{data.hobby[0]}},{{data.hobby[1]}},{{ data.hobby[2] }}

当前数字为:{{num}}

当前姓名:{{names.familyName}}

当前年龄:{{names.age}}

当前薪水:{{names.job.salary}}K

当前姓名:{{names.name}}

当前年龄:{{names.age}}

当前薪水:{{names.job.salary}}K

当前姓名:{{name}}

当前薪水:{{job.salary}}K

当前姓名:{{names.name}}

当前年龄:{{names.age}}

当前薪水:{{names.job.salary}}K

女朋友：{{names.girlFriend}}

{{keyWord}}

第一层

第二层

第三层

职业：{{job.occupation}}
薪资：{{job.salary}}

职业：{{data.job.occupation}}
薪资：{{data.job.salary}}