vue3基础

在我认为其实vue3和vue2的命令大多是没有发生改变的只是在使用方法上发生了改变。但是在我们的使用途中就会非常便利。

vue3和vue2的不同对比：

一、生命周期

首先是在生命周期上发生的改变，我们在vue2中我们常用的生命周期有8个，vue3中将vue2中的beforecreate和create相当于融合到了setup中了，并且我们在vue3中使用生命周期的时候需要先进行引入，然后vue2是直接使用，并且vue3中大部分生命周期前面都加上了on，并且在使用的时候可以多次使用，写多个逻辑，依然会按顺序执行，不会覆盖，然而在vue2中，生命周期只会执行最后一次

beforeCreate()
created()
beforeMounte()	onBeforeMounte()
mounted()	onMounted()
beforeUpdate()	onBeforeUpdate()
updated()	onUpdate()
beforeDestory()	onBeforeUnmount()
destoryed()	onUnmounted()

注：setup是围绕beforeCreate和created生命周期钩子运行的，所以vue3中不需要去定义

二、多根节点

vue2如果一个vue文件有多个节点的话会报错，但是vue3支持多根节点

三、Compsition Api

• vue2中使用的是选项Api，一个逻辑会散落在文件的不同位置（data，methods，watch等），代码的可读性就变差了
• vue3的组合api就很好的解决了这个问题，让代码有了可读性，和聚集性。

四、异步组件

Vue3 提供 Suspense 组件，允许程序在等待异步组件加载完成前渲染兜底的内容，如 loading ，使用户的体验更平滑。使用它，需在模板中声明，并包括两个命名插槽：default 和 fallback。Suspense 确保加载完异步内容时显示默认插槽，并将 fallback 插槽用作加载状态。新增

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

链接：https://juejin.cn/post/7067413380922867725

list未加载完的时候会显示loading...如果加载完成后会显示list列表

5.Teleport

 是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。其实就是当我们设置一个弹窗的时候我们可以将它挂在app之外的位置。vue3新增

6.响应式原理

vue2中使用的响应式原理是object.defineProperty;Vue3响应原理基础是Proxy。

vue3不用object.defineProperty的原因就是他的弊端，无法监听对象或数组新增、删除的元素，但是vue2也提供了Vue.set方法用来监听对象和数组。Vue3中Proxy 是 ES6 新特性，通过第2个参数 handler 拦截目标对象的行为。相较于 Object.defineProperty 提供语言全范围的响应能力，消除了局限性。

7.diff比对的优化

添加了静态节点

8.打包优化

9.TypeScript的支持