一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第23天，点击查看活动详情
🎉前言
随着 Vue3 的逐渐成熟，相信不久的将来 Vue3 将会成为主流，关于两者的区别具体做了哪些改动呢？相信大多数不太清楚，有哪些优势呢？新增/删除了哪些功能？写法、机构变化上改变了多少？都不是很清楚，本篇文章就是为了讲述一下我对 Vue3 的版本理解，以及对比和 Vue2 的区别在哪里。这里不会讲很高深的源码哦，只讲体验区别。
🍩 挂载方式
使用 mount 挂载的时候
Vue2 版本会使用挂载元素的 outerHTML 作为 template，并替换挂载元素
Vue3 版本会使用挂载元素的 innerHTML 作为 template，并且只替换挂载元素的子元素
// Vue2 写法
// 引入 Vue 的构造函数
import Vue from 'vue'
import App from './App.vue'
const app = new Vue({
render: h => h(App),
})
// 挂载
app.$mount('#app')
console.log(app) // 打印实例
// Vue3 写法
// 解构 Vue 中的名叫 createApp 的构造函数
import { createApp } from 'vue'
import App from './App.vue'
// 挂载
const app = createApp(APP)
app.mount('#app')
console.log(app) // 打印实例
那它们之间到底有什么不同呢？我们打印一下各自的实例看一看：
Vue2实例
Vue3实例
从直观上来看，是不是 Vue3 的东西要比 Vue2 少很多呢，其实 Vue2 上的很多方法大家都不常用，甚至都没听过，所有在 Vue3 中做了优化，将一些不常用的东西砍掉或者整合在一起，这样就能使项目打包时更小更轻量了。
值得注意的是，在
Vue3中Template不再强调一定要有根标签了，下面介绍ref的使用时，有例子演示。
🍮 生命周期
🍦 setup函数
setup 函数可以说是 Vue3 的特色之一了，它代替了 Vue2 生命周期中的 beforeCreate() 和 created() ，在最新版本中 setup 可以嵌入 script 标签中，形成语法糖。
// Vue2 写法
<script>
export default {
name: '组件名',
data () {
return {
// ...do something
}
}
}
</script>
// Vue3 写法
<script setup>
// ...do something
</script>
值得注意的是，在
Vue3中，函数内部没有this可以调用当前组件实例了哦，因为组合式API的诞生，代替了this。
🍧 组合式API
在 Vue2 中我们要给组件添加响应式数据时，是在data() 中进行定义的，而在 Vue3 中则是引入 ref 或者 reactive 函数去声明的。
ref的使用
// Vue2 写法
<template>
<div>
{{ name }}
</div>
</template>
<script>
export default {
name: '组件名',
data () {
return {
name: 'jack'
}
}
mounted() {
console.log(this.name) // jack
}
}
</script>
// Vue3 写法
<template>
{{ name }} // 不需要根标签，可以直接使用
</template>
<script setup>
import { ref } form 'vue'
let name = ref('jack')
console.log(name.value) // jack
</script>
这里要注意的是，在
Vue3中使用ref时，获取属性时，需要通过.value的方式获取，注意写法。
reactive的使用
// Vue2 写法
<script>
export default {
name: '组件名',
data () {
return {
perSon:{
name: 'jack',
like: {
basketball: '篮球',
football: '足球'
}
}
}
}
}
</script>
// Vue3 写法
<script setup>
import { reactive } form 'vue'
let perSon = reactive({
name: 'jack',
like: {
basketball: '篮球',
football: '足球'
}
})
</script>
在 Vue3 中可以通过 toRefs 解构出响应式数据的属性。
<script setup>
import { reactive, toRefs } form 'vue'
let perSon = reactive({
name: 'jack',
like: {
basketball: '篮球',
football: '足球'
}
})
const { name } = toRefs(perSon)
const { basketball, football } = toRefs(perSon.like)
</script>
toRefs 就是把响应式的 reactive 对象，分解成无数的 ref 双向绑定。
reactive 是用来定义更加复杂的数据类型，例如数组、对象等。但是定义后里面的变量取出来就不在是响应式Ref对象数据了。
ref 是根据给定的值创建一个响应式的数据对象，传入的一般为基本数据类型，例如字符串、数字、boolean 等,返回值是一个对象，这个对象上只包含一个 value 属性。
✨总结
以上就是本次分享的全部内容~~
如果觉得文章写得不错，对你有所启发的，请不要吝啬 点个 赞 和 关注 并在 评论区 留下你宝贵的意见哦~~😃
