Vue3与Vue2全方位对比

从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(