开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 1 天，点击查看活动详情

说点题外话

vue3从发布到现在，公司以往的项目都是vue2的项目，也没有沉下心来好好看3针对2具体做了哪些更新。新年新气象，打算就从vue3开始新的一年，感兴趣的可以跟着我的文章快速上手vue3版本。

这篇我主要对vue3和vue2做一个对比总结废话不多说，直接开始

说正文

一、`Option API` 和 `composition API`

在Vue3中提出了组合式的新写法，我个人觉得相对于原来的选项式开发是“香”了一点，可能小项目中看的不是很清晰，在大项目多人协同开发中能体现出优势。尤其是在vue3.2提出setup语法糖之后，我直呼“好家伙啊”。

那就直接对比看看选项式和组合式的代码对比，这里我只实现一个基础的计时器案例

选项式 Option API

<template>
  <div>
    <h2>{{ counter }}</h2>
    <button @click="increment">+1</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      counter: 0
    }
  },
  methods: {
    increment() {
      this.counter++
    }
  }
}
</script>

组合式 Composition API

<template>
  <div>
    <h2>{{ counter }}</h2>
    <button @click="increment">+1</button>
  </div>
</template>

<script>
import { ref } from "vue"
export default {
  setup() {
    let counter = ref(0)
    const increment = () => counter.value++
    return {
      counter,
      increment
    }
  }
}
</script>

setup语法糖

<template>
  <div>
    <h2>{{ counter }}</h2>
    <button @click="increment">+1</button>
  </div>
</template>

<script setup>

import { ref } from "vue"

let counter = ref(0)
const increment = () => counter.value++

</script>

首先从结构来看，选项式写法对data、methods、生命周期这些是分开管理的，而组合式有点像原生的js开发，把这些都重新聚集在一起管理。我个人觉得组合式可能在数据量比较大的文件中更能体现优势，针对一个数据的处理代码可以放在一起管理，减少修改数据的时候上下翻找对应代码。
setup语法糖中也取消了 setup 函数不再需要 return 变量

二、`ref` 和 `reactive`

在上面的案例中我们在组合式API中也会看见一个生面孔ref

因为 vue2 中我们的数据都是双向绑定的响应式数据，那么在vue3中我们定义变量的当时变成了直接定义，那么就会造成数据是“一次性的”，做不到响应式。那么在 vue3 中官方也提供了两个 api 来解决这个问题：ref 和reactive。

template模板会帮助我们对 ref 定义的数据进行解析，也就是在template模板中的数据可以直接写入变量名字，而非template模板中的 ref 定义的数据需要从 value 取值（上面的案例也有表现出来）。

面对复杂的数据类型的时候，我们可以使用reactive定义数据，reactive不需要我们使用.value进行取值。

<template>
  <div>
    <h2>{{ state.name }}</h2>
    <button @click="changeClick">改变</button>
  </div>
</template>

<script setup>

import { reactive } from "vue"

const state = reactive({
  name: "小白",
  age: 18
})

const changeClick = () => {
  state.name = "小红"
}

</script>

三、生命周期

vue3 和 vue2 的生命周期对比图如下

vue2(选项式)	vue3(setup)	描述
beforeCreate	-	组件实例被创建之前
created	-	组件实例已经被创建，可以获取到数据但是DOM还没有挂载看不见数据
beforeMounte	onBeforeMounte	组件挂载之前
mounted	onMounted	组件挂载完成，可以获取到DOM
beforeUpdate	onBeforeUpdate	组件数据发生变化更新之前
updated	onUpdated	组件数据更新完成
beforeDestroy	onBeforeUnmount	组件销毁/卸载之前
destroyed	onUnmounted	组件销毁/卸载
activated	onActivated	keep-alive缓存的组件激活时调用
deactivated	onDeactivated	keep-alive缓存的组件销毁时调用

setup生命周期对比组合式生命周期钩子除了命名发生改变以外，还取消了两个钩子函数，因为setup是围绕beforeCreate和created生命周期钩子运行的，所以不再需要它们

因为在组合式中取消了分开管理的原则，所以生命周期的钩子函数需要我们额外引用，并且组合式生命周期钩子会接受一个函数作为参数（这里就不再举例选项式），如下：

组合式

import { onMounted } from "vue"

setup() {
  onMounted(() => {
    console.log("mounted");
  })
  
  return {
    onMounted
  }
}

setup语法糖

import { onMounted } from "vue"

onMounted(() => {
  console.log("mounted");
})

说再见

好东西不宜贪多，针对vue3和vue2的对比这一篇就先写道这里，很多都没有展开介绍，后续我会放在正文里一点一点详细介绍。

下一篇就真的开启vue3的学习

难忘今宵

打针为什么要打在臀部？

在医学上被称为肌肉注射，把药物注射在肌肉里，再慢慢参与血液循环，然后再发挥药物作用，并且很多药物不能直接进入血管里，否则会对人的生命造成威胁。

和Vue3和解的Day1

说点题外话

说正文

一、Option API 和 composition API

二、ref 和 reactive

三、生命周期

说再见

难忘今宵

一、`Option API` 和 `composition API`

二、`ref` 和 `reactive`