持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第22天，点击查看活动详情juejin.cn/post/714765…
Vue3最大的改变是内部机制的设置改变
选项式：
Vue2是选项式的风格。指的就是vue2的使用方法，因为vue2里使用的都是属性来进行编辑。例如methods、components、data、state、getters等
组合式：
通过组合式 API，我们可以使用导入的 API 函数来描述组件逻辑。在单文件组件中，组合式 API 通常会与 <script setup> 搭配使用。这个 setup attribute 是一个标识，告诉 Vue 需要在编译时进行一些处理，让我们可以更简洁地使用组合式 API。比如，<script setup> 中的导入和顶层变量（指的是data里最外层的对象）/函数都能够在模板中直接使用
Vite
它也可以进行打包，搭建Vue3环境
Vue3和2的不同
1、vue3中创建根实例语法：
- createApp（）返回值是个组件
- 一个组件里会写多个createApp（），它们的作用域没有影响，例如把Nav部分设置成一个组件，一个Container部分设置成一个组件，各自为根实例，即（createApp（Nav）createApp（Container））
2、附加在window身上的属性，在vue3里是用不了，vue2没有限制。其实就相当于全局变量window.x=20，在vue3里访问不了。但可以访问window身上的内置对象。
3、v-model使用方法不同。
4、在 Vue 3 中，数据是基于 JavaScript Proxy（代理） 实现响应式的。
解释：vue2中一个对象添加属性需要通过$set方法，也可以通过一个新对象给它覆盖，实现响应式；而vue3中用新对象（newObject）给原来的data中的oldObject数据进行赋值，接下来再判断oldObject是否和newBonject相等，结果为false。
DOM更新时机
- Vue2和Vue3中组件状态改变和DOM的更新都不是同步执行的。会把所有的状态放到一起，然后达到一定的量时一起去更新。
- 在 Vue 中，状态都是默认深层响应式的。这意味着即使在更改深层次的对象或数组，你的改动也能被检测到。
面试题：nextTick（）的作用是什么？
nextTick( ()=>{} )需要引入，它在组件状态更新并且组件渲染也完成之后执行。- 当你在 Vue 中更改响应式状态时，最终的 DOM 更新并不是同步生效的，而是由 Vue 将它们缓存在一个队列中，直到下一个“tick”才一起执行。这样是为了确保每个组件无论发生多少状态改变，都仅执行一次更新。
nextTick()可以在状态改变后立即使用，以等待 DOM 更新完成。你可以传递一个回调函数作为参数，或者 await 返回的 Promise。
