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

---

写在前面

上篇文章介绍了如何在vite+vue项目中引入和使用pinia，本篇文章介绍如何在vite+vue项目中使用vue3，以及vue3和vue2的一些区别

开始vue3

vue3和vue2最大的区别就是增加了组合式API（setup），在单文件组件中，组合式API通常会与 <script setup>搭配使用，代码如下：

<script setup lang="ts">
...
</script>

官方文档还介绍了组合式API和选项式API的区别，想要了解的同学可以自己去看。我在项目中都会使用组合式API的写法。

这篇文章只了解vue3的一些基础语法，因为我的目的是接下来使用vue3开发项目。

vue基础知识

1、生命周期

以下钩子函数都按在页面中的执行顺序排序

vue2 生命周期代码如下：

<script>
export default {
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  activated() {},
  deactivated() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
};
</script>

vue3 生命周期代码如下，其中，setup钩子函数在所有生命周期钩子前执行：

<script setup lang="ts">
import {
  onActivated,
  onBeforeMount,
  onBeforeUnmount,
  onBeforeUpdate,
  onDeactivated,
  onMounted,
  onUnmounted,
  onUpdated,
} from "@vue/runtime-core";

onBeforeMount(() => {});
onMounted(() => {});
onActivated(() => {});
onDeactivated(() => {});
onBeforeUpdate(() => {});
onUpdated(() => {});
onBeforeUnmount(() => {}); // vue2中的beforeDestroy() {},
onUnmounted(() => {}); // vue2中的destroyed() {},
</script>

2、定义变量

vue2 定义变量代码如下，vue2的所有变量都在data中声明：

<script>
export default {
  data() {
    return {
      msg: 'hello'
    }
  },
};
</script>

vue3 定义变量代码如下，vue3通过ref, reactive将变量转变为具有响应式的：

<script setup lang="ts">
import { ref, reactive, toRefs } from "vue";

// 可以通过ref()定义一个响应式的变量
let count = ref(0); 

const addCount = () => {
  count.value++; // 更改响应式变量的值的时候需要追加.value
};

// 可以通过reactive()定义一个具有响应式的对象
let loginForm = reactive({
  username: '',
  password: ''
})

// 可以通过toRefs()将响应式对象转换为普通对象，返回的普通对象的每个属性都具有响应性
let { username, password } = { ...toRefs(loginForm) };
</script>

3、定义方法

vue2 定义方法代码如下，vue2在methods中定义变量：

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    addCount() {
      this.count++;
    },
  },
};
</script>

vue3 定义方法代码如下，vue3直接在setup下定义方法：

<script setup lang="ts">
import { ref } from "vue";

let count = ref(0); 

// 定义方法
const addCount = () => {
  count.value++; // 更改响应式变量的值的时候需要追加.value
};
</script>

4、computed 计算属性

vue2 定义computed代码如下：

<script>
export default {
  computed: {
    height(){
      return 500
    }
  }
};

vue3 定义computed代码如下：

<script setup lang="ts">
import {
  computed,
} from "@vue/runtime-core";

const height = computed(() => 500);
</script>

写在最后

以上就是在vite+vue项目中使用vue3以及vue3和vue2的区别的全部说明