Vue学习常见问答

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 消耗较大）

选择 watch

• 当执行异步操作时

• 即时监听数据完成较为复杂的回调函数

3.new Vue( )过程中究竟做了些什么？

1. 实例化阶段：

   • 初始化 Vue 实例的数据、方法和生命周期钩子函数。
   • 合并配置项：将用户提供的选项与默认选项进行合并，生成最终的配置对象。
   • 初始化生命周期钩子函数：在特定阶段执行用户定义的回调函数。
   • 初始化事件系统：创建实例的事件中心，用于处理事件订阅与派发。

2. 初始化阶段：

   • 初始化响应式数据：将配置对象中的?data?属性转换为响应式数据，使其能够在数据发生变化时触发重新渲染。
   • 初始化计算属性?computed：将配置对象中的?computed?属性转换为计算属性。
   • 初始化方法?methods：将配置对象中的?methods?属性中的方法绑定到实例上，使其可以通过?this?访问。
   • 初始化侦听器?watch：将配置对象中的?watch?属性转换为侦听器，用于监听数据的变化并执行相应的回调函数。
   • 初始化组件：解析配置对象中的?components?属性，注册组件。

3. 编译阶段：

   • 解析模板：将模板字符串或挂载元素的内容解析为虚拟 DOM 树。
   • 编译模板：对虚拟 DOM 进行编译，生成可执行的渲染函数。
   • 创建渲染上下文：创建渲染所需的上下文对象。

4. 挂载阶段：

   • 调用?beforeMount?生命周期钩子函数。
   • 将生成的渲染函数与实例的响应式数据关联，从而实现数据驱动视图的效果。
   • 调用生成的渲染函数，将虚拟 DOM 渲染为真实 DOM，并插入到挂载元素中。
   • 调用?mounted?生命周期钩子函数。

5. 更新阶段：

   • 当响应式数据发生变化时，触发更新机制。
   • 调用?beforeUpdate?生命周期钩子函数。
   • 重新执行渲染函数，更新虚拟 DOM。
   • 比较新旧虚拟 DOM 的差异，计算最小的 DOM 操作，进行局部更新。
   • 调用?updated?生命周期钩子函数。

6. 销毁阶段：

   • 调用?beforeUnmount?生命周期钩子函数。
   • 销毁实例的响应式数据、事件监听器等。
   • 移除挂载的 DOM 元素。
   • 调用?unmounted?生命周期钩子函数。

4.Vue2 和 Vue3 的区别

1. 性能优化：

   • Vue3 使用了全新的响应式系统，使用 Proxy 代替了 Object.defineProperty，提高了性能和观察对象的能力。
   • Vue3 在编译器方面进行了优化，生成更小、更快的代码。

2. 组合式 API：

   • Vue3 引入了组合式 API（Composition API），提供了更灵活和可组合的代码组织方式。它允许开发者根据逻辑相关性而不是固定的选项分组代码，提高了代码的可读性和维护性。

3. 更好的 TypeScript 支持：

   • Vue3 对 TypeScript 的支持更加友好，提供了更准确的类型推断和类型定义。

4. 更小的包大小：

   • Vue3 经过优化，包的体积更小。

5. Composition API 与 Options API：

   • Vue2 使用 Options API 编写组件，将相关的选项（如 data、methods、computed 等）组织在一起。而 Vue3 的组合式 API 允许开发者根据功能关联来组织代码，使得逻辑更清晰。

6. Fragments：

   • Vue3 支持 Fragments，可以在组件中使用多个根节点，而不需要包裹一个父级元素。

7. 其他改进：

   • Vue3 对 TypeScript 的支持更好，提供了更准确的类型推断和类型定义。
   • Vue3 使用了新的编译器，生成更小、更快的代码。
   • Vue3 对虚拟 DOM 进行了优化，提高了渲染性能。

5.Vue 的新特性

1. 组合式 API（Composition API）：

   • 组合式 API 是 Vue3 中最显著的变化之一。它提供了一种新的组织组件代码的方式，让开发者能够更好地组织和重用组件逻辑。通过组合式 API，可以将相关的代码逻辑组合在一起，而不是按照固定的选项分组，这有助于提高代码的可读性和维护性。

2. Fragments：

   • Vue3 支持 Fragments，也就是说一个组件可以拥有多个根节点，而不需要通过一个额外的父级元素进行包裹。这样可以减少不必要的 DOM 层级，使得组件的结构更加清晰简洁。

3. 响应式系统优化：

   • Vue3 使用了全新的响应式系统，基于 ES6 的 Proxy 实现，相比 Vue2 基于 Object.defineProperty 的实现，提供了更好的性能和更强大的响应能力。

4. 更好的 TypeScript 支持：

   • Vue3 对 TypeScript 的支持更加友好，提供了更准确的类型推断和类型定义，使得使用 TypeScript 开发 Vue 应用更加便捷和安全。

6.Vue3 中的CompositionAPI的优点

1. 更灵活的组件逻辑组织：

   • Composition API 不再依赖于固定的选项分组，而是根据逻辑相关性来组织代码。这样，开发者可以更自由地组合和重用逻辑代码，使得代码结构更清晰、可读性更高。

2. 更好的代码复用：

   • Composition API 提供了更好的代码复用机制。开发者可以将相关的代码逻辑封装为自定义的函数，然后在不同的组件中进行复用。这样可以避免代码冗余，提高开发效率。

3. 更好的类型推断和类型定义：

   • Composition API 在 TypeScript 支持方面表现优秀。通过使用函数式的编程风格和类型推断，开发者可以获得更准确的类型信息，从而在开发过程中减少错误并提高代码的可靠性。

4. 更容易测试：

   • Composition API 使得组件的逻辑部分可以更容易地进行单元测试。由于逻辑代码被封装在函数中，开发者可以更加方便地测试函数的输入和输出，提高代码的质量和可维护性。

5. 更好的响应式能力：

   • Composition API 在响应式方面也带来了一些改进。通过使用?ref、reactive?等函数，开发者可以更方便地创建和管理响应式数据。此外，Composition API 还提供了针对响应式数据的一些辅助函数，如?watch、computed?等，使得处理响应式逻辑更加简洁和易懂。

7.如何将 template 模板转换成 render 函数

Vue中含有模板编译的功能，主要作用是将用户编写的 template 编译为js中可执行的 render 函数

主要步骤

1. 将 template 模板转换成 ast 语法树 - parserHTML

2. 对静态语法做静态标记 - markUp diff 来做优化的 静态节点 跳过diff 操作

3. 重新生成代码

8.ref 和 reactive 区别

基本概念

reactive 用于处理对象类型的数据响应式。底部采用的是 new Proxy() 【代理】

ref 通常用于处理单值的响应式，ref 主要解决原始值的响应式问题。底层采用的是Object.defineProperty()实现的

主要区别

1. 数据类型：ref 可以用于 包装基本类型数据（如字符串、数字、布尔值等），也可以用于包装对象、数组等。而 reactive 主要用于包装对象类型数据，包括普通对象、嵌套对象和数组等。

2. 访问方式：通过 ref 创建的响应式数据可以通过 .value 进行访问，而通过 reactive 创建的数据则可以直接访问其属性或元素。

3. 嵌套对象和响应式更新：通过 ref 创建的包装对象中的属性如果是对象类型，需要手动再次使用 ref 或 reactive 进行包装才能使其中的属性变为响应式数据。而使用 reactive 包装的对象中的所有属性都是响应式的，包括嵌套的属性和对象。