Vue3和Vue2的区别

本文主要讲述的是Vue3和Vue2的区别，以及Vue3的一些基础

Vue3和Vue2区别

创建项目

• Vue3使用vite构建工具创建Vue3项目，比Vue2使用vue-cli创建的速度更快，更简便

## Vue3
# npm init @vitejs/app <project-name>
# cd <project-name>
# npm install
# npm run dev

## Vue2
# vue create <project-name>
# 安装配置等操作……
# cd <project-name>
# npm run serve

这种方法创建的Vue3项目会自带一个vite.config.js文件

组件注册以及使用

• vue2：引入完需要通过components对象进行挂载

<template>
  <Child/>
</template>

<script>
  import Child from './Child.vue'
  export default {
    components: {
      Child
    }
  }
<script>

• Vue3：引入完直接在模板中使用即可

<template>
  <Child/>
</template>

<script setup>
  import Child from './Child.vue'
<script>

多个根标签

众所周知，Vue2中只能存在一个根标签，这会导致开发时的灵活性降低，而Vue3则不会出现这个问题，因为Vue3不存在单个根标签的问题，可以实现在Vue中实现HTML自由

• Vue3

<template>
  <div>根标签1</div>
  <div>根标签2</div>
  <div>根标签3</div>
</template>

生命周期

由于官方的生命周期图过大过长，这里咱就不放上来了，这里放一张作者自己做的图，看图！！！

• 左边的是Vue2的生命周期函数，右边的是Vue3的生命周期函数

注意：在Vue3中新增的一个组合式API中是没有beforeCreate和created这两个生命周期函数等价于setup函数，但是setup函数是在这两个生命周期函数之前执行的

setup

上面提及了 setup 这个函数，那这里就简单说一下，setup 是Vue3新增的一个函数，它的存在也标志了Composition API(组合式API)的诞生

setup用法

// 兼容Vue2写法
<script>
  setup() {}
</script>

// 语法糖用法
<script setup></script>

定义变量和方法

• Vue2

export defalut {
  data() {
    msg: '这是内容'
  },
  methods: {
    hello() {
      console.log('hello world!')
    }
  }
}

• Vue3

// 兼容Vue2写法
<script>
import { ref, reactive } from 'vue'
setup() {
  const msg = ref(0)
  // 定义一个 hello 方法
  function hello() {
    console.log('hello world!')
  }
  // 暴露setup内部定义的变量以及方法
  return {
    msg,
    hello
  }
}
</script>

// 语法糖方法
<script setup>
import { ref, reactive } from 'vue'
const msg = ref(0)
// 定义一个 hello 方法
function hello() {
  console.log('hello world!')
}
// 调用 hello 方法
hello()
</script>

本文中也涉及和讲解到了一些关于Vue3的知识点，希望对你们有帮助，谢谢！！！

这篇文章是作者记录Vue3学习中的一些知识点，也可以看做是笔记，后续也会持续更新一些Vue3的东西

下一篇：记一次Vue3中的安装和配置