1.什么是MVVM模式？
MVVM（Model-View-ViewModel）是一个软件架构设计模式。其推进了前端开发与后端业务逻辑的分离，极大地提高了前端开发效率，MVVM分为三层
View 视图层，也就是构建出来的用户页面
Model 数据层，存放数据的状态
ViewModel 视图数据层，是MVVM模式的核心层，作为其余两层的中间枢纽，更新视图层并操作改变数据层的状态。
2.computed 和 watch 区别
特性区别
-
computed 默认为懒执行，dirty 为 true。watch 有immediate 配置，可以实现立即执行一次callback(回调函数).
-
computed 支持缓存，依赖数据发生改变，才会重新进行计算。watch 不支持缓存，立即响应数据的改变
-
computed 不支持异步。watch支持异步。
-
computed 的回调函数默认走 get 方法 / watch 的回调函数第一个参数就是新值，第二个参数是旧值。
computed和watch 的使用场景区别
选择computed
选择 watch
-
当执行异步操作时
-
即时监听数据完成较为复杂的回调函数
3.new Vue( )过程中究竟做了些什么？
-
实例化阶段：
- 初始化 Vue 实例的数据、方法和生命周期钩子函数。
- 合并配置项：将用户提供的选项与默认选项进行合并，生成最终的配置对象。
- 初始化生命周期钩子函数：在特定阶段执行用户定义的回调函数。
- 初始化事件系统：创建实例的事件中心，用于处理事件订阅与派发。
-
初始化阶段：
- 初始化响应式数据：将配置对象中的?
data?属性转换为响应式数据，使其能够在数据发生变化时触发重新渲染。 - 初始化计算属性?
computed：将配置对象中的?computed?属性转换为计算属性。 - 初始化方法?
methods：将配置对象中的?methods?属性中的方法绑定到实例上，使其可以通过?this?访问。 - 初始化侦听器?
watch：将配置对象中的?watch?属性转换为侦听器，用于监听数据的变化并执行相应的回调函数。 - 初始化组件：解析配置对象中的?
components?属性，注册组件。
-
编译阶段：
- 解析模板：将模板字符串或挂载元素的内容解析为虚拟 DOM 树。
- 编译模板：对虚拟 DOM 进行编译，生成可执行的渲染函数。
- 创建渲染上下文：创建渲染所需的上下文对象。
-
挂载阶段：
- 调用?
beforeMount?生命周期钩子函数。 - 将生成的渲染函数与实例的响应式数据关联，从而实现数据驱动视图的效果。
- 调用生成的渲染函数，将虚拟 DOM 渲染为真实 DOM，并插入到挂载元素中。
- 调用?
mounted?生命周期钩子函数。
-
更新阶段：
- 当响应式数据发生变化时，触发更新机制。
- 调用?
beforeUpdate?生命周期钩子函数。 - 重新执行渲染函数，更新虚拟 DOM。
- 比较新旧虚拟 DOM 的差异，计算最小的 DOM 操作，进行局部更新。
- 调用?
updated?生命周期钩子函数。
-
销毁阶段：
- 调用?
beforeUnmount?生命周期钩子函数。 - 销毁实例的响应式数据、事件监听器等。
- 移除挂载的 DOM 元素。
- 调用?
unmounted?生命周期钩子函数。
4.Vue2 和 Vue3 的区别
-
性能优化：
- Vue3 使用了全新的响应式系统，使用 Proxy 代替了 Object.defineProperty，提高了性能和观察对象的能力。
- Vue3 在编译器方面进行了优化，生成更小、更快的代码。
-
组合式 API：
- Vue3 引入了组合式 API（Composition API），提供了更灵活和可组合的代码组织方式。它允许开发者根据逻辑相关性而不是固定的选项分组代码，提高了代码的可读性和维护性。
-
更好的 TypeScript 支持：
- Vue3 对 TypeScript 的支持更加友好，提供了更准确的类型推断和类型定义。
-
更小的包大小：
-
Composition API 与 Options API：
- Vue2 使用 Options API 编写组件，将相关的选项（如 data、methods、computed 等）组织在一起。而 Vue3 的组合式 API 允许开发者根据功能关联来组织代码，使得逻辑更清晰。
-
Fragments：
- Vue3 支持 Fragments，可以在组件中使用多个根节点，而不需要包裹一个父级元素。
-
其他改进：
- Vue3 对 TypeScript 的支持更好，提供了更准确的类型推断和类型定义。
- Vue3 使用了新的编译器，生成更小、更快的代码。
- Vue3 对虚拟 DOM 进行了优化，提高了渲染性能。
5.Vue 的新特性
-
组合式 API（Composition API）：
- 组合式 API 是 Vue3 中最显著的变化之一。它提供了一种新的组织组件代码的方式，让开发者能够更好地组织和重用组件逻辑。通过组合式 API，可以将相关的代码逻辑组合在一起，而不是按照固定的选项分组，这有助于提高代码的可读性和维护性。
-
Fragments：
- Vue3 支持 Fragments，也就是说一个组件可以拥有多个根节点，而不需要通过一个额外的父级元素进行包裹。这样可以减少不必要的 DOM 层级，使得组件的结构更加清晰简洁。
-
响应式系统优化：
- Vue3 使用了全新的响应式系统，基于 ES6 的 Proxy 实现，相比 Vue2 基于 Object.defineProperty 的实现，提供了更好的性能和更强大的响应能力。
-
更好的 TypeScript 支持：
- Vue3 对 TypeScript 的支持更加友好，提供了更准确的类型推断和类型定义，使得使用 TypeScript 开发 Vue 应用更加便捷和安全。
6.Vue3 中的CompositionAPI的优点
-
更灵活的组件逻辑组织：
- Composition API 不再依赖于固定的选项分组，而是根据逻辑相关性来组织代码。这样，开发者可以更自由地组合和重用逻辑代码，使得代码结构更清晰、可读性更高。
-
更好的代码复用：
- Composition API 提供了更好的代码复用机制。开发者可以将相关的代码逻辑封装为自定义的函数，然后在不同的组件中进行复用。这样可以避免代码冗余，提高开发效率。
-
更好的类型推断和类型定义：
- Composition API 在 TypeScript 支持方面表现优秀。通过使用函数式的编程风格和类型推断，开发者可以获得更准确的类型信息，从而在开发过程中减少错误并提高代码的可靠性。
-
更容易测试：
- Composition API 使得组件的逻辑部分可以更容易地进行单元测试。由于逻辑代码被封装在函数中，开发者可以更加方便地测试函数的输入和输出，提高代码的质量和可维护性。
-
更好的响应式能力：
- Composition API 在响应式方面也带来了一些改进。通过使用?
ref、reactive?等函数，开发者可以更方便地创建和管理响应式数据。此外，Composition API 还提供了针对响应式数据的一些辅助函数，如?watch、computed?等，使得处理响应式逻辑更加简洁和易懂。
7.如何将 template 模板转换成 render 函数
Vue中含有模板编译的功能，主要作用是将用户编写的 template 编译为js中可执行的 render 函数
主要步骤
-
将 template 模板转换成 ast 语法树 - parserHTML
-
对静态语法做静态标记 - markUp diff 来做优化的 静态节点 跳过diff 操作
-
重新生成代码
8.ref 和 reactive 区别
基本概念
reactive 用于处理对象类型的数据响应式。底部采用的是 new Proxy() 【代理】
ref 通常用于处理单值的响应式，ref 主要解决原始值的响应式问题。底层采用的是Object.defineProperty()实现的
主要区别
-
数据类型：ref 可以用于 包装基本类型数据（如字符串、数字、布尔值等），也可以用于包装对象、数组等。而 reactive 主要用于包装对象类型数据，包括普通对象、嵌套对象和数组等。
-
访问方式：通过 ref 创建的响应式数据可以通过 .value 进行访问，而通过 reactive 创建的数据则可以直接访问其属性或元素。
-
嵌套对象和响应式更新：通过 ref 创建的包装对象中的属性如果是对象类型，需要手动再次使用 ref 或 reactive 进行包装才能使其中的属性变为响应式数据。而使用 reactive 包装的对象中的所有属性都是响应式的，包括嵌套的属性和对象。