vue3和vue2的区别

1、生命周期对比

vue3.x中 Vue 的组件可以按两种不同的风格书写：选项式 API 和组合式 API。
（1）选项式：选项式的写法跟vue2.0写法基本一样。
选项式跟vue2.0一样，用包含多个选项的对象来描述组件的逻辑，例如 data、methods 和 mounted。选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例。
（2）组合式
从生命周期中对比可以知道，组合式的没有beforeCreate和created钩子函数，组合式使用的时候 是没有data、method、computed。所有的数据方法全写在setup中。
setup特点
a： 钩子是在组件中使用组合式 API 的入口。
b：是处于生命周期beforeCreate和created两个钩子函数之间的函数，所以在setup中不能使用 data 和 methods 中的数据和方法；
c：在setup函数中定义的变量和方法最后都是需要 return 出去的，不然无法再模板中使用
d：setup() 自身并不含对组件实例的访问权，即在 setup() 中访问 this 会是 undefined。你可以在选项式 API 中访问组合式 API 暴露的值，但反过来则不行

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    let name = "hehe"
    function test(){
     console.log(`你好${name}`)
    }
    // 返回值会暴露给模板和其他的选项式 API 钩子
    return {
      count，
      test
    }
  },

  mounted() {
    console.log(this.count) // 0
  }
}
</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>

2、多根节点
vue2中在模板中只能有一个根节点，多节点会报错

<template>
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

vue3中可以有多个节点

<template>
  <HelloWorld msg="Welcome to Your Vue.js App"/>
  <div>测试</div>
</template>

3、vue3提供了异步组件（Suspense）
提供 Suspense 组件，允许程序在等待异步组件加载完成前渲染兜底的内容，如 loading ，使用户的体验更平滑。使用它，需在模板中声明，并包括两个命名插槽：default 和 fallback。Suspense 确保加载完异步内容时显示默认插槽，并将 fallback 插槽用作加载状态。在 List 组件（有可能是异步组件，也有可能是组件内部处理逻辑或查找操作过多导致加载过慢等）未加载完成前，显示 Loading…（即 fallback 插槽内容），加载完成时显示自身（即 default 插槽内容）
比如

<tempalte>
  <suspense>
    <template #default>
      <List />
    </template>
    <template #fallback>
      <div>
        Loading...      
       </div>
    </template>
  </suspense>
</template>

在vue2中加载状态只能是手动触发和消失
4、 Vue3 中新增了 Teleport 内置组件

<Teleport> 是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。

解释：
teleport 是一个内置组件，HTML 是由层级关系的，Vue3 中的组件也是有层级关系的。
假如在父组件中引用了一个子组件，那么渲染成页面后这个子组件 HTML 也是必然被父组件 HTML 包含的。
但是：Vue3 提供 Teleport 组件可将部分 DOM 移动到 Vue app 之外的位置。
比如常用的dialog

<button @click="dialogVisible = true">显示弹窗</button>
<teleport to="div">
  <div class="dialog" v-if="dialogVisible">
    我是弹窗，我直接移动到了div标签下
  </div>
</teleport>

5、slot具名插槽的使用
vue2中

//子组件
<slot name="title">
//父组件
<template slot="title">
  <h1>哈哈哈</h1>
</template>

vue3中子组件用法不变，父组件需要使用v-slot:插槽名

<template v-slot:title>
  <h1>哈哈哈</h1>
</template>

6、v-for和v-if
在vue2中，v-for的优先级高于v-if
在vue3中，v-if的优先级高于v-for

其他区别还在研究中，会不定期更新。。。