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 在响应式方面也带来了一些改进。通过使用 refreactive 等函数,开发者可以更方便地创建和管理响应式数据。此外,Composition API 还提供了针对响应式数据的一些辅助函数,如 watchcomputed 等,使得处理响应式逻辑更加简洁和易懂。

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 创建的包装对象中的属性如果是对象类型,需要手动再次使用 refreactive 进行包装才能使其中的属性变为响应式数据。而使用 reactive 包装的对象中的所有属性都是响应式的,包括嵌套的属性和对象。

你可能感兴趣的:(vue.js,学习,前端)