No60.精选前端面试题,享受每天的挑战和学习

简介: No60.精选前端面试题,享受每天的挑战和学习

MVC 和 MVVM 区别

MVC(Model-View-Controller)和MVVM(Model-View-ViewModel)是两种常见的软件架构模式,用于组织和管理应用程序的代码。

下面是MVC和MVVM之间的主要区别:

1. 概念和关注点分离

  • MVC:MVC模式将应用程序划分为三个主要部分:模型(Model)、视图(View)和控制器(Controller)。模型负责数据处理和业务逻辑,视图负责用户界面展示,控制器负责管理模型和视图之间的通信。这种方式更加关注数据和交互逻辑的分离。
  • MVVM:MVVM模式也将应用程序划分为三个主要部分:模型(Model)、视图(View)和视图模型(ViewModel)。模型和视图在MVVM中与MVC中的相同,但引入了视图模型作为中间层。视图模型负责将模型的数据转换为视图可以使用的形式,并处理用户输入和交互逻辑。这种方式更加关注数据绑定和视图状态的管理。

2. 数据绑定

  • MVC:MVC模式中,视图和模型之间的通信通常是通过控制器来完成的,没有内置的数据绑定机制。视图从模型获取数据并更新显示,同时将用户的输入传递给控制器进行处理。
  • MVVM:MVVM模式中,视图和视图模型之间使用双向数据绑定机制进行通信。当模型的数据发生变化时,视图会自动更新;同时,当用户在视图中进行操作时,视图模型也会实时获取到最新的数据。

3. 单向 vs 双向通信

  • MVC:在MVC中,数据流通常是单向的,即从模型到视图。模型将数据传递给视图,视图负责显示这些数据。如果需要反向通信(比如用户输入),则需要通过控制器来处理。
  • MVVM:在MVVM中,数据流是双向的。视图模型可以从模型获取数据,并将其暴露给视图进行展示。同时,视图模型还可以监听视图的变化,并根据需要更新模型的数据。

4. 测试性

  • MVC:MVC模式相对较容易进行测试,因为它将应用程序分为独立的模块。可以针对模型、视图和控制器编写单元测试,确保每个模块的功能正确。
  • MVVM:MVVM模式在测试方面可能稍微复杂一些,因为视图模型通常涉及到与视图的交互和状态管理。但是,由于视图模型的独立性较高,仍然可以通过单元测试来验证其逻辑。

需要注意的是,MVC和MVVM都是基于分层原则的软件架构模式,它们的目标都是将应用程序的代码分离成更易于维护和扩展的模块。选择使用哪种模式取决于具体的需求和个人偏好。

为什么 data 是一个函数

在某些前端框架(例如Vue.js)中,将data属性设置为一个函数的原因是为了保证每个组件实例都有一个独立的数据副本,而不是共享相同的数据引用。

data属性的值是一个函数时,每次创建组件实例时,都会调用该函数来返回一个对象,这个对象就成为了组件实例的数据对象通过将data设置为函数,可以确保每个组件实例都拥有独立的数据副本,防止多个组件实例之间相互影响。

如果直接将data属性设置为一个对象,而不是一个函数,那么所有组件实例将共享相同的数据引用。这意味着一个组件实例的数据变化会影响到其他组件实例,导致意外的行为和错误。

通过使用函数返回数据对象的方式,每个组件实例都可以拥有自己的数据对象,并且数据之间是相互隔离的。这有助于提高组件的可维护性和可复用性,并且避免了潜在的bug和数据污染问题。

Vue 的生命周期方法有哪些 一般在哪一步发请求

Vue.js组件的生命周期方法有以下几个:

  1. beforeCreate:在实例初始化之后,数据观测 (data observer) 和事件配置之前被调用。
  2. created:在实例创建完成后被调用。在这一步,实例已完成以下配置:数据观测(data observer),属性和方法的运算,watch/event事件回调。然而,挂载阶段还未开始,$el 属性目前不可见。
  3. beforeMount:在挂载开始之前被调用。相关的 render 函数首次被调用。
  4. mounted:el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。此时,组件已经被渲染到页面上。
  5. beforeUpdate:数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。可以在该钩子中对更新前的状态进行修改。
  6. updated:由于数据更改导致的虚拟 DOM 重新渲染和打补丁完成之后调用。
  7. beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。
  8. destroyed:实例销毁之后调用。此时,所有的事件监听器都已被移除,子实例也被销毁。

一般来说,请求通常会在生命周期方法中的mounted阶段发起。mounted方法在组件挂载到页面上之后被调用,此时组件已经具有了一个完整的 DOM 结构,可以进行异步请求、操作 DOM 元素等操作。因此,mounted生命周期方法是常用的发送请求的时机。然而,确切的使用时机还是要根据具体需求来确定,视情况可以选择其他生命周期钩子或自定义方法来发起请求。

数据请求能不能在mounted,为什么

数据请求可以在mounted生命周期方法中进行,但需要注意一些细节。

mounted生命周期方法中发起数据请求是常见和合理的做法,因为在该阶段组件已经被挂载到页面上并完成了初始化,可以操作 DOM 元素和进行异步请求。这意味着你可以在此时访问组件的 DOM 元素、发送请求获取数据,并将数据更新到组件的状态或渲染到页面上。

然而,需要注意以下几点:

  1. 异步请求的时间:如果数据请求是异步的,你需要处理异步请求的回调或使用Promise/async-await等方式,确保在数据返回后对组件做出正确的响应。否则,可能在组件渲染完成之前得不到所需的数据,导致 UI 不准确或缺失关键数据。
  2. 避免过多的渲染:如果请求的数据量较大或请求频率较高,可能会导致频繁的重新渲染,降低性能。在这种情况下,可以考虑在请求之前展示一个加载状态,或者使用其他优化策略,例如节流(throttling)或防抖(debouncing),以减少渲染次数。
  3. 错误处理:要注意在请求过程中的错误处理。确保适当地处理请求失败、网络错误等异常情况,并向用户提供相关反馈或错误信息。

总的来说,使用mounted生命周期方法来发起数据请求是一种常见的做法,但在实际使用时需要综合考虑性能、数据准确性和错误处理等因素,以确保良好的用户体验和代码质量。

附录:「简历必备」前后端实战项目(推荐:⭐️⭐️⭐️⭐️⭐️)

Vue.js 和 Egg.js 开发企业级健康管理项目

带你从入门到实战全面掌握 uni-app

相关文章
|
12天前
|
Web App开发 前端开发 Linux
「offer来了」浅谈前端面试中开发环境常考知识点
该文章归纳了前端开发环境中常见的面试知识点,特别是围绕Git的使用进行了详细介绍,包括Git的基本概念、常用命令以及在团队协作中的最佳实践,同时还涉及了Chrome调试工具和Linux命令行的基础操作。
「offer来了」浅谈前端面试中开发环境常考知识点
|
2天前
|
XML 前端开发 Java
Spring,SpringBoot和SpringMVC的关系以及区别 —— 超准确,可当面试题!!!也可供零基础学习
本文阐述了Spring、Spring Boot和Spring MVC的关系与区别,指出Spring是一个轻量级、一站式、模块化的应用程序开发框架,Spring MVC是Spring的一个子框架,专注于Web应用和网络接口开发,而Spring Boot则是对Spring的封装,用于简化Spring应用的开发。
12 0
Spring,SpringBoot和SpringMVC的关系以及区别 —— 超准确,可当面试题!!!也可供零基础学习
|
2月前
|
存储 XML 移动开发
前端大厂面试真题
前端大厂面试真题
|
1月前
|
网络协议 算法 数据库
|
2月前
|
前端开发 Java 编译器
【前端学java】如何从前端视角快速学习Maven
【8月更文挑战第12天】如何从前端视角快速学习Maven
44 2
【前端学java】如何从前端视角快速学习Maven
|
2月前
|
前端开发 JavaScript API
前端框架Vue------>第二天学习(1)插槽
这篇文章介绍了Vue框架中插槽(slot)的概念和用法,以及如何在组件中使用自定义事件进行父子组件间的通信。
前端框架Vue------>第二天学习(1)插槽
|
2月前
|
前端开发 算法 网络协议
如何学习计算机基础知识,打好前端和网络安全的基础
如何学习计算机基础知识,打好前端和网络安全的基础
39 4
|
2月前
|
存储 前端开发 JavaScript
44 个 React 前端面试问题
【8月更文挑战第18天】
40 2
|
2月前
|
存储 JavaScript 前端开发
2022年前端js面试题
2022年前端js面试题
31 0
|
2月前
|
存储 前端开发 JavaScript
44 个 React 前端面试问题
44 个 React 前端面试问题

热门文章

最新文章