What is the difference between Vue3 and Vue2? The following article will give you a comprehensive comparison of Vue3 and Vue2, and talk about the differences between Vue3 and Vue2. I hope it will be helpful to you!
I have been very interested in Vue3 since it was released, and I have been thinking about putting it into the company's production, but I started to consider a lot of uncertainties. For the time being, I tried some small functions; slowly I found that the form of combined API is very suitable for development (personal feeling), especially after Vue3.2 launched the setup syntax sugar, it was so popular.
Almost all of the company’s new projects later use Vue3. I have been developing with Vue3 for nearly half a year, so I wrote this article to make a comparison and summary of Vue2 and Vue3. First, to make some records of the development using Vue3 during this period, and secondly, to help more friends faster Get started with Vue3. (Learning video sharing: vuejs video tutorial)
This article mainly uses optional API, combined API, and setup syntax sugar to realize their direct differences
Optional Api and combined Api
First implement the same logic (click to switch page data) and take a look at their direct differences
- Optional Api
<template>
<div @click="changeMsg">{{msg}}</div>
</template>
<script>
export default {
data(){
return {
msg:'hello world'
}
},
methods:{
changeMsg(){
this.msg = 'hello juejin'
}
}
}
</script>- Combined 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 syntax sugar
<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>Summary:
Optional API manages data and methods separately, including later watch, computed, etc., while combined API puts related logic together (similar to native js development).
Setup syntax sugar allows variable methods to eliminate the need to write return, and subsequent components and even custom instructions can be automatically obtained in our template.
ref and reactive
We all know that in the combined API, the data in the data function is responsive, and the page will change as the data in the data changes. What if the data function does not exist in the combined API? So in order to solve this problem, Vue3 introduced the ref and reactive functions to make the variables responsive data
- Combined 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 syntax sugar
<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>Summary:
When using ref, you need to add .value when getting the value in js.
reactive is more recommended to define complex data types ref and is more recommended to define basic types
life cycle
The following table contains: Vue2 and Vue3 life cycle Difference
| Vue2(Option API) | Vue3(setup) | Description |
|---|---|---|
| beforeCreate | - | Before instance creation |
| created | - | After instance creation |
| beforeMount | onBeforeMount | Call before DOM mounting |
| mounted | onMounted | DOM mounting completion call |
| beforeUpdate | onBeforeUpdate | Called before data update |
| updated | onUpdated | Called after the data is updated |
| beforeDestroy | onBeforeUnmount | Call before component destruction |
| destroyed | onUnmounted | Call after component destruction |
举个常用的onBeforeMount的例子
- 选项式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-onj进行这个事件的监听
- 选项式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 :msg="msg" @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 :msg="msg" @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"的完整写法为:msg="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.$router.params
//获取query
this.$router.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语法糖中使用则需要再写一个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文档地址：
https://staging-cn.vuejs.org/
本文转载自：https://juejin.cn/post/7111129583713255461
【相关视频教程推荐：web前端】
The above is the detailed content of What is the difference between Vue3 and Vue2? Compare it all!. For more information, please follow other related articles on the PHP Chinese website!
vue中props可以传递函数吗Jun 16, 2022 am 10:39 AMvue中props可以传递函数；vue中可以将字符串、数组、数字和对象作为props传递，props主要用于组件的传值，目的为了接收外面传过来的数据，语法为“export default {methods: {myFunction() {// ...}}};”。
聊聊vue指令中的修饰符，常用事件修饰符总结May 09, 2022 am 11:07 AM本篇文章带大家聊聊vue指令中的修饰符，对比一下vue中的指令修饰符和dom事件中的event对象，介绍一下常用的事件修饰符，希望对大家有所帮助！
如何覆盖组件库样式？React和Vue项目的解决方法浅析May 16, 2022 am 11:15 AM如何覆盖组件库样式？下面本篇文章给大家介绍一下React和Vue项目中优雅地覆盖组件库样式的方法，希望对大家有所帮助！
react与vue的虚拟dom有什么区别Apr 22, 2022 am 11:11 AMreact与vue的虚拟dom没有区别；react和vue的虚拟dom都是用js对象来模拟真实DOM，用虚拟DOM的diff来最小化更新真实DOM，可以减小不必要的性能损耗，按颗粒度分为不同的类型比较同层级dom节点，进行增、删、移的操作。
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function
SublimeText3 Chinese version
Chinese version, very easy to use
DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software
PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool
Dreamweaver CS6
Visual web development tools
