从Vue3发布以来,我就一向对其十分感兴趣,就一向想着将其投入公司的生产中,可是开端考虑到许多不确定性就暂时对一些很小的功用进行一些尝试;渐渐的发现组合式Api的方式十分合适开发(个人感觉),尤其是Vue3.2推出了setup语法糖后直呼真香。后边公司的新项目几乎悉数采用了Vue3了。运用Vue3开发也将近大半年了,所以写了这篇文章对Vue2和Vue3做了一个对比总结,一是为了对这段时刻运用Vue3开发做些记录,二是为了帮助更多的小伙伴更快的上手Vue3。
本篇文章首要采用选项式Api,组合式Api,setup语法糖完成它们直接的差异
选项式Api与组合式Api
首要完成一个同样的逻辑(点击切换页面数据)看一下它们直接的差异
- 选项式Api
<template>
<div @click="changeMsg">{{msg}}</div>
</template>
<script>
export default {
data(){
return {
msg:'hello world'
}
},
methods:{
changeMsg(){
this.msg = 'hello juejin'
}
}
}
</script>
- 组合式Api
<template>
<div @click="changeMsg">{{msg}}</div>
</template>
<script>
import { ref,defineComponent } from "vue";
export default defineComponent({
setup() {
const msg = ref('hello world')
const changeMsg = ()=>{
msg.value = 'hello juejin'
}
return {
msg,
changeMsg
};
},
});
</script>
- setup 语法糖
<template>
<div @click="changeMsg">{{ msg }}</div>
</template>
<script setup>
import { ref } from "vue";
const msg = ref('hello world')
const changeMsg = () => {
msg.value = 'hello juejin'
}
</script>
总结:
选项式Api是将data和methods包括后边的watch,computed等分开办理,而组合式Api则是将相关逻辑放到了一起(类似于原生js开发)。
setup语法糖则能够让变量办法不用再写return,后边的组件甚至是自界说指令也能够在咱们的template中自动取得。
ref 和 reactive
咱们都知道在选项式api中,data函数中的数据都具有呼应式,页面会跟着data中的数据改动而改动,而组合式api中不存在data函数该怎么呢?所以为了处理这个问题Vue3引进了ref和reactive函数来将使得变量成为呼应式的数据
- 组合式Api
<script>
import { ref,reactive,defineComponent } from "vue";
export default defineComponent({
setup() {
let msg = ref('hello world')
let obj = reactive({
name:'juejin',
age:3
})
const changeData = () => {
msg.value = 'hello juejin'
obj.name = 'hello world'
}
return {
msg,
obj,
changeData
};
},
});
</script>
- setup语法糖
<script setup>
import { ref,reactive } from "vue";
let msg = ref('hello world')
let obj = reactive({
name:'juejin',
age:3
})
const changeData = () => {
msg.value = 'hello juejin'
obj.name = 'hello world'
}
</script>
总结:
运用ref的时分在js中取值的时分需要加上.value。
reactive更引荐去界说杂乱的数据类型 ref 更引荐界说根本类型
生命周期
下表包含:Vue2和Vue3生命周期的差异
Vue2(选项式API) | Vue3(setup) | 描述 |
---|---|---|
beforeCreate | – | 实例创立前 |
created | – | 实例创立后 |
beforeMount | onBeforeMount | DOM挂载前调用 |
mounted | onMounted | DOM挂载完结调用 |
beforeUpdate | onBeforeUpdate | 数据更新之前被调用 |
updated | onUpdated | 数据更新之后被调用 |
beforeDestroy | onBeforeUnmount | 组件毁掉前调用 |
destroyed | onUnmounted | 组件毁掉完结调用 |
举个常用的onMounted的例子
- 选项式Api
<script>
export default {
mounted(){
console.log('挂载完结')
}
}
</script>
- 组合式Api
<script>
import { onMounted,defineComponent } from "vue";
export default defineComponent({
setup() {
onMounted(()=>{
console.log('挂载完结')
})
return {
onMounted
};
},
});
</script>
- setup语法糖
<script setup>
import { onMounted } from "vue";
onMounted(()=>{
console.log('挂载完结')
})
</script>
从上面能够看出Vue3中的组合式API采用hook函数引进生命周期;其实不止生命周期采用hook函数引进,像watch、computed、路由护卫等都是采用hook函数完成
总结
Vue3中的生命周期相对于Vue2做了一些调整,命名上发生了一些改动并且移除了beforeCreate和created,因为setup是环绕beforeCreate和created生命周期钩子运转的,所以不再需要它们。
生命周期采用hook函数引进
watch和computed
- 选项式API
<template>
<div>{{ addSum }}</div>
</template>
<script>
export default {
data() {
return {
a: 1,
b: 2
}
},
computed: {
addSum() {
return this.a + this.b
}
},
watch:{
a(newValue, oldValue){
console.log(`a从${oldValue}变成了${newValue}`)
}
}
}
</script>
- 组合式Api
<template>
<div>{{addSum}}</div>
</template>
<script>
import { computed, ref, watch, defineComponent } from "vue";
export default defineComponent({
setup() {
const a = ref(1)
const b = ref(2)
let addSum = computed(() => {
return a.value+b.value
})
watch(a, (newValue, oldValue) => {
console.log(`a从${oldValue}变成了${newValue}`)
})
return {
addSum
};
},
});
</script>
- setup语法糖
<template>
<div>{{ addSum }}</div>
</template>
<script setup>
import { computed, ref, watch } from "vue";
const a = ref(1)
const b = ref(2)
let addSum = computed(() => {
return a.value + b.value
})
watch(a, (newValue, oldValue) => {
console.log(`a从${oldValue}变成了${newValue}`)
})
</script>
Vue3中除了watch,还引进了副作用监听函数watchEffect,用过之后我发现它和React中的useEffect很像,只不过watchEffect不需要传入依靠项。
那么什么是watchEffect呢?
watchEffect它会当即履行传入的一个函数,一起呼应式追寻其依靠,并在其依靠变更时从头运转该函数。
比方这段代码
<template>
<div>{{ watchTarget }}</div>
</template>
<script setup>
import { watchEffect,ref } from "vue";
const watchTarget = ref(0)
watchEffect(()=>{
console.log(watchTarget.value)
})
setInterval(()=>{
watchTarget.value++
},1000)
</script>
首要刚进入页面就会履行watchEffect中的函数打印出:0,跟着定时器的运转,watchEffect监听到依靠数据的改动回调函数每隔一秒就会履行一次
总结
computed和watch所依靠的数据有必要是呼应式的。Vue3引进了watchEffect,watchEffect 相当于将 watch 的依靠源和回调函数兼并,当任何你有用到的呼应式依靠更新时,该回调函数便会从头履行。不同于 watch的是watchEffect的回调函数会被当即履行,即({ immediate: true })
组件通讯
Vue中组件通讯办法有许多,其中选项式API和组合式API完成起来会有许多差异;这儿将介绍如下组件通讯办法:
办法 | Vue2 | Vue3 |
---|---|---|
父传子 | props | props |
子传父 | $emit | emits |
父传子 | $attrs | attrs |
子传父 | $listeners | 无(兼并到 attrs办法) |
父传子 | provide | provide |
子传父 | inject | inject |
子组件拜访父组件 | $parent | 无 |
父组件拜访子组件 | $children | 无 |
父组件拜访子组件 | $ref | expose&ref |
兄弟传值 | EventBus | mitt |
props
props是组件通讯中最常用的通讯办法之一。父组件经过v-bind传入,子组件经过props接纳,下面是它的三种完成办法
- 选项式API
//父组件
<template>
<div>
<Child :msg="parentMsg" />
</div>
</template>
<script>
import Child from './Child'
export default {
components:{
Child
},
data() {
return {
parentMsg: '父组件信息'
}
}
}
</script>
//子组件
<template>
<div>
{{msg}}
</div>
</template>
<script>
export default {
props:['msg']
}
</script>
- 组合式Api
//父组件
<template>
<div>
<Child :msg="parentMsg" />
</div>
</template>
<script>
import { ref,defineComponent } from 'vue'
import Child from './Child.vue'
export default defineComponent({
components:{
Child
},
setup() {
const parentMsg = ref('父组件信息')
return {
parentMsg
};
},
});
</script>
//子组件
<template>
<div>
{{ parentMsg }}
</div>
</template>
<script>
import { defineComponent,toRef } from "vue";
export default defineComponent({
props: ["msg"],// 假如这行不写,下面就接纳不到
setup(props) {
console.log(props.msg) //父组件信息
let parentMsg = toRef(props, 'msg')
return {
parentMsg
};
},
});
</script>
- setup语法糖
//父组件
<template>
<div>
<Child :msg="parentMsg" />
</div>
</template>
<script setup>
import { ref } from 'vue'
import Child from './Child.vue'
const parentMsg = ref('父组件信息')
</script>
//子组件
<template>
<div>
{{ parentMsg }}
</div>
</template>
<script setup>
import { toRef, defineProps } from "vue";
const props = defineProps(["msg"]);
console.log(props.msg) //父组件信息
let parentMsg = toRef(props, 'msg')
</script>
留意
props中数据流是单项的,即子组件不可改动父组件传来的值
在组合式API中,假如想在子组件顶用其它变量接纳props的值时需要运用toRef将props中的特点转为呼应式。
emit
子组件能够经过emit发布一个事情并传递一些参数,父组件经过v-on进行这个事情的监听
- 选项式API
//父组件
<template>
<div>
<Child @sendMsg="getFromChild" />
</div>
</template>
<script>
import Child from './Child'
export default {
components:{
Child
},
methods: {
getFromChild(val) {
console.log(val) //我是子组件数据
}
}
}
</script>
// 子组件
<template>
<div>
<button @click="sendFun">send</button>
</div>
</template>
<script>
export default {
methods:{
sendFun(){
this.$emit('sendMsg','我是子组件数据')
}
}
}
</script>
- 组合式Api
//父组件
<template>
<div>
<Child @sendMsg="getFromChild" />
</div>
</template>
<script>
import Child from './Child'
import { defineComponent } from "vue";
export default defineComponent({
components: {
Child
},
setup() {
const getFromChild = (val) => {
console.log(val) //我是子组件数据
}
return {
getFromChild
};
},
});
</script>
//子组件
<template>
<div>
<button @click="sendFun">send</button>
</div>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
emits: ['sendMsg'],
setup(props, ctx) {
const sendFun = () => {
ctx.emit('sendMsg', '我是子组件数据')
}
return {
sendFun
};
},
});
</script>
- setup语法糖
//父组件
<template>
<div>
<Child @sendMsg="getFromChild" />
</div>
</template>
<script setup>
import Child from './Child'
const getFromChild = (val) => {
console.log(val) //我是子组件数据
}
</script>
//子组件
<template>
<div>
<button @click="sendFun">send</button>
</div>
</template>
<script setup>
import { defineEmits } from "vue";
const emits = defineEmits(['sendMsg'])
const sendFun = () => {
emits('sendMsg', '我是子组件数据')
}
</script>
attrs和listeners
子组件运用$attrs能够取得父组件除了props传递的特点和特性绑定特点 (class和 style)之外的一切特点。
子组件运用$listeners能够取得父组件(不含.native修饰器的)一切v-on事情监听器,在Vue3中现已不再运用;可是Vue3中的attrs不仅能够取得父组件传来的特点也能够取得父组件v-on事情监听器
- 选项式API
//父组件
<template>
<div>
<Child @parentFun="parentFun" :msg1="msg1" :msg2="msg2" />
</div>
</template>
<script>
import Child from './Child'
export default {
components:{
Child
},
data(){
return {
msg1:'子组件msg1',
msg2:'子组件msg2'
}
},
methods: {
parentFun(val) {
console.log(`父组件办法被调用,取得子组件传值:${val}`)
}
}
}
</script>
//子组件
<template>
<div>
<button @click="getParentFun">调用父组件办法</button>
</div>
</template>
<script>
export default {
methods:{
getParentFun(){
this.$listeners.parentFun('我是子组件数据')
}
},
created(){
//获取父组件中一切绑定特点
console.log(this.$attrs) //{"msg1": "子组件msg1","msg2": "子组件msg2"}
//获取父组件中一切绑定办法
console.log(this.$listeners) //{parentFun:f}
}
}
</script>
- 组合式API
//父组件
<template>
<div>
<Child @parentFun="parentFun" :msg1="msg1" :msg2="msg2" />
</div>
</template>
<script>
import Child from './Child'
import { defineComponent,ref } from "vue";
export default defineComponent({
components: {
Child
},
setup() {
const msg1 = ref('子组件msg1')
const msg2 = ref('子组件msg2')
const parentFun = (val) => {
console.log(`父组件办法被调用,取得子组件传值:${val}`)
}
return {
parentFun,
msg1,
msg2
};
},
});
</script>
//子组件
<template>
<div>
<button @click="getParentFun">调用父组件办法</button>
</div>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
emits: ['sendMsg'],
setup(props, ctx) {
//获取父组件办法和事情
console.log(ctx.attrs) //Proxy {"msg1": "子组件msg1","msg2": "子组件msg2"}
const getParentFun = () => {
//调用父组件办法
ctx.attrs.onParentFun('我是子组件数据')
}
return {
getParentFun
};
},
});
</script>
- setup语法糖
//父组件
<template>
<div>
<Child @parentFun="parentFun" :msg1="msg1" :msg2="msg2" />
</div>
</template>
<script setup>
import Child from './Child'
import { ref } from "vue";
const msg1 = ref('子组件msg1')
const msg2 = ref('子组件msg2')
const parentFun = (val) => {
console.log(`父组件办法被调用,取得子组件传值:${val}`)
}
</script>
//子组件
<template>
<div>
<button @click="getParentFun">调用父组件办法</button>
</div>
</template>
<script setup>
import { useAttrs } from "vue";
const attrs = useAttrs()
//获取父组件办法和事情
console.log(attrs) //Proxy {"msg1": "子组件msg1","msg2": "子组件msg2"}
const getParentFun = () => {
//调用父组件办法
attrs.onParentFun('我是子组件数据')
}
</script>
留意
Vue3中运用attrs调用父组件办法时,办法前需要加上on;如parentFun->onParentFun
provide/inject
provide:是一个目标,或者是一个返回目标的函数。里边包含要给子孙后代特点
inject:一个字符串数组,或者是一个目标。获取父组件或更高层次的组件provide的值,既在任何后代组件都能够经过inject取得
- 选项式API
//父组件
<script>
import Child from './Child'
export default {
components: {
Child
},
data() {
return {
msg1: '子组件msg1',
msg2: '子组件msg2'
}
},
provide() {
return {
msg1: this.msg1,
msg2: this.msg2
}
}
}
</script>
//子组件
<script>
export default {
inject:['msg1','msg2'],
created(){
//获取高层级供给的特点
console.log(this.msg1) //子组件msg1
console.log(this.msg2) //子组件msg2
}
}
</script>
- 组合式API
//父组件
<script>
import Child from './Child'
import { ref, defineComponent,provide } from "vue";
export default defineComponent({
components:{
Child
},
setup() {
const msg1 = ref('子组件msg1')
const msg2 = ref('子组件msg2')
provide("msg1", msg1)
provide("msg2", msg2)
return {
}
},
});
</script>
//子组件
<template>
<div>
<button @click="getParentFun">调用父组件办法</button>
</div>
</template>
<script>
import { inject, defineComponent } from "vue";
export default defineComponent({
setup() {
console.log(inject('msg1').value) //子组件msg1
console.log(inject('msg2').value) //子组件msg2
},
});
</script>
- setup语法糖
//父组件
<script setup>
import Child from './Child'
import { ref,provide } from "vue";
const msg1 = ref('子组件msg1')
const msg2 = ref('子组件msg2')
provide("msg1",msg1)
provide("msg2",msg2)
</script>
//子组件
<script setup>
import { inject } from "vue";
console.log(inject('msg1').value) //子组件msg1
console.log(inject('msg2').value) //子组件msg2
</script>
阐明
provide/inject一般在深层组件嵌套中运用合适。一般在组件开发顶用的居多。
parent/children
$parent: 子组件获取父组件Vue实例,能够获取父组件的特点办法等
$children: 父组件获取子组件Vue实例,是一个数组,是直接儿子的集合,但并不确保子组件的顺序
- Vue2
import Child from './Child'
export default {
components: {
Child
},
created(){
console.log(this.$children) //[Child实例]
console.log(this.$parent)//父组件实例
}
}
留意
父组件获取到的$children
并不是呼应式的
expose&ref
$refs能够直接获取元素特点,一起也能够直接获取子组件实例
- 选项式API
//父组件
<template>
<div>
<Child ref="child" />
</div>
</template>
<script>
import Child from './Child'
export default {
components: {
Child
},
mounted(){
//获取子组件特点
console.log(this.$refs.child.msg) //子组件元素
//调用子组件办法
this.$refs.child.childFun('父组件信息')
}
}
</script>
//子组件
<template>
<div>
<div></div>
</div>
</template>
<script>
export default {
data(){
return {
msg:'子组件元素'
}
},
methods:{
childFun(val){
console.log(`子组件办法被调用,值${val}`)
}
}
}
</script>
- 组合式API
//父组件
<template>
<div>
<Child ref="child" />
</div>
</template>
<script>
import Child from './Child'
import { ref, defineComponent, onMounted } from "vue";
export default defineComponent({
components: {
Child
},
setup() {
const child = ref() //留意命名需要和template中ref对应
onMounted(() => {
//获取子组件特点
console.log(child.value.msg) //子组件元素
//调用子组件办法
child.value.childFun('父组件信息')
})
return {
child //有必要return出去 不然获取不到实例
}
},
});
</script>
//子组件
<template>
<div>
</div>
</template>
<script>
import { defineComponent, ref } from "vue";
export default defineComponent({
setup() {
const msg = ref('子组件元素')
const childFun = (val) => {
console.log(`子组件办法被调用,值${val}`)
}
return {
msg,
childFun
}
},
});
</script>
- setup语法糖
//父组件
<template>
<div>
<Child ref="child" />
</div>
</template>
<script setup>
import Child from './Child'
import { ref, onMounted } from "vue";
const child = ref() //留意命名需要和template中ref对应
onMounted(() => {
//获取子组件特点
console.log(child.value.msg) //子组件元素
//调用子组件办法
child.value.childFun('父组件信息')
})
</script>
//子组件
<template>
<div>
</div>
</template>
<script setup>
import { ref,defineExpose } from "vue";
const msg = ref('子组件元素')
const childFun = (val) => {
console.log(`子组件办法被调用,值${val}`)
}
//有必要露出出去父组件才会获取到
defineExpose({
childFun,
msg
})
</script>
留意
经过ref获取子组件实例有必要在页面挂载完结后才干获取。
在运用setup语法糖时分,子组件有必要元素或办法露出出去父组件才干获取到
EventBus/mitt
兄弟组件通讯能够经过一个事情中心EventBus完成,既新建一个Vue实例来进行事情的监听,触发和毁掉。
在Vue3中没有了EventBus兄弟组件通讯,可是现在有了一个替代的方案mitt.js
,原理还是 EventBus
- 选项式API
//组件1
<template>
<div>
<button @click="sendMsg">传值</button>
</div>
</template>
<script>
import Bus from './bus.js'
export default {
data(){
return {
msg:'子组件元素'
}
},
methods:{
sendMsg(){
Bus.$emit('sendMsg','兄弟的值')
}
}
}
</script>
//组件2
<template>
<div>
组件2
</div>
</template>
<script>
import Bus from './bus.js'
export default {
created(){
Bus.$on('sendMsg',(val)=>{
console.log(val);//兄弟的值
})
}
}
</script>
//bus.js
import Vue from "vue"
export default new Vue()
- 组合式API
首要安装mitt
npm i mitt -S
然后像Vue2中bus.js
一样新建mitt.js
文件
mitt.js
import mitt from 'mitt'
const Mitt = mitt()
export default Mitt
//组件1
<template>
<button @click="sendMsg">传值</button>
</template>
<script>
import { defineComponent } from "vue";
import Mitt from './mitt.js'
export default defineComponent({
setup() {
const sendMsg = () => {
Mitt.emit('sendMsg','兄弟的值')
}
return {
sendMsg
}
},
});
</script>
//组件2
<template>
<div>
组件2
</div>
</template>
<script>
import { defineComponent, onUnmounted } from "vue";
import Mitt from './mitt.js'
export default defineComponent({
setup() {
const getMsg = (val) => {
console.log(val);//兄弟的值
}
Mitt.on('sendMsg', getMsg)
onUnmounted(() => {
//组件毁掉 移除监听
Mitt.off('sendMsg', getMsg)
})
},
});
</script>
- setup语法糖
//组件1
<template>
<button @click="sendMsg">传值</button>
</template>
<script setup>
import Mitt from './mitt.js'
const sendMsg = () => {
Mitt.emit('sendMsg', '兄弟的值')
}
</script>
//组件2
<template>
<div>
组件2
</div>
</template>
<script setup>
import { onUnmounted } from "vue";
import Mitt from './mitt.js'
const getMsg = (val) => {
console.log(val);//兄弟的值
}
Mitt.on('sendMsg', getMsg)
onUnmounted(() => {
//组件毁掉 移除监听
Mitt.off('sendMsg', getMsg)
})
</script>
v-model和sync
v-model咱们都很熟悉,就是双向绑定的语法糖。这儿不评论它在input标签的运用;仅仅看一下它和sync在组件中的运用
咱们都知道Vue中的props是单向向下绑定的;每次父组件更新时,子组件中的一切props都会改写为最新的值;可是假如在子组件中修正 props ,Vue会向你发出一个正告(无法在子组件修正父组件传递的值);可能是为了防止子组件无意间修正了父组件的状态,来防止应用的数据流变得紊乱难以理解。
可是能够在父组件运用子组件的标签上声明一个监听事情,子组件想要修正props的值时运用$emit触发事情并传入新的值,让父组件进行修正。
为了方便vue就运用了v-model
和sync
语法糖。
- 选项式API
//父组件
<template>
<div>
<!--
完好写法
<Child @update:changePval="msg=$event" />
-->
<Child :changePval.sync="msg" />
{{msg}}
</div>
</template>
<script>
import Child from './Child'
export default {
components: {
Child
},
data(){
return {
msg:'父组件值'
}
}
}
</script>
//子组件
<template>
<div>
<button @click="changePval">改动父组件值</button>
</div>
</template>
<script>
export default {
data(){
return {
msg:'子组件元素'
}
},
methods:{
changePval(){
//点击则会修正父组件msg的值
this.$emit('update:changePval','改动后的值')
}
}
}
</script>
- setup语法糖
因为运用的都是前面提过的常识,所以这儿就不展现组合式API的写法了
//父组件
<template>
<div>
<!--
完好写法
<Child @update:changePval="msg=$event" />
-->
<Child v-model:changePval="msg" />
{{msg}}
</div>
</template>
<script setup>
import Child from './Child'
import { ref } from 'vue'
const msg = ref('父组件值')
</script>
//子组件
<template>
<button @click="changePval">改动父组件值</button>
</template>
<script setup>
import { defineEmits } from 'vue';
const emits = defineEmits(['changePval'])
const changePval = () => {
//点击则会修正父组件msg的值
emits('update:changePval','改动后的值')
}
</script>
总结
vue3中移除了sync的写法,取而代之的式v-model:event的方式
其v-model:changePval="msg"
或者:changePval.sync="msg"
的完好写法为
@update:changePval="msg=$event"
。
所以子组件需要发送update:changePval
事情进行修正父组件的值
路由
vue3和vue2路由常用功用仅仅写法上有些差异
- 选项式API
<template>
<div>
<button @click="toPage">路由跳转</button>
</div>
</template>
<script>
export default {
beforeRouteEnter (to, from, next) {
// 在烘托该组件的对应路由被 confirm 前调用
next()
},
beforeRouteEnter (to, from, next) {
// 在烘托该组件的对应路由被 confirm 前调用
next()
},
beforeRouteLeave ((to, from, next)=>{//脱离当时的组件,触发
next()
}),
beforeRouteLeave((to, from, next)=>{//脱离当时的组件,触发
next()
}),
methods:{
toPage(){
//路由跳转
this.$router.push(xxx)
}
},
created(){
//获取params
this.$route.params
//获取query
this.$route.query
}
}
</script>
- 组合式API
<template>
<div>
<button @click="toPage">路由跳转</button>
</div>
</template>
<script>
import { defineComponent } from 'vue'
import { useRoute, useRouter } from 'vue-router'
export default defineComponent({
beforeRouteEnter (to, from, next) {
// 在烘托该组件的对应路由被 confirm 前调用
next()
},
beforeRouteLeave ((to, from, next)=>{//脱离当时的组件,触发
next()
}),
beforeRouteLeave((to, from, next)=>{//脱离当时的组件,触发
next()
}),
setup() {
const router = useRouter()
const route = useRoute()
const toPage = () => {
router.push(xxx)
}
//获取params 留意是route
route.params
//获取query
route.query
return {
toPage
}
},
});
</script>
- setup语法糖
我之所以用beforeRouteEnter
作为路由护卫的示例是因为它在setup
语法糖中是无法运用的;咱们都知道setup
中组件实例现已创立,是能够获取到组件实例的。而beforeRouteEnter
是再进入路由前触发的,此时组件还未创立,所以是无法用在setup
中的;假如想在setup语法糖中运用则需要再写一个script
如下:
<template>
<div>
<button @click="toPage">路由跳转</button>
</div>
</template>
<script>
export default {
beforeRouteEnter(to, from, next) {
// 在烘托该组件的对应路由被 confirm 前调用
next()
},
};
</script>
<script setup>
import { useRoute, useRouter,onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
const router = useRouter()
const route = useRoute()
const toPage = () => {
router.push(xxx)
}
//获取params 留意是route
route.params
//获取query
route.query
//路由护卫
onBeforeRouteUpdate((to, from, next)=>{//当时组件路由改动后,进行触发
next()
})
onBeforeRouteLeave((to, from, next)=>{//脱离当时的组件,触发
next()
})
</script>
写在最后
经过以上写法的对比会发现setup语法糖的方式最为便捷并且更符合开发者习气;未来Vue3的开发应该会大面积运用这种方式。目前Vue3现已成为了Vue的默许版本,后续保护应该也会以Vue3为主;所以还没开端学习Vue3的同学要抓紧了!
Vue3文档地址