前端面试中Vue的有经典面试题三

最新推荐文章于 2024-08-18 21:06:49 发布

学长是个程序员

最新推荐文章于 2024-08-18 21:06:49 发布

阅读量593

点赞数

分类专栏：前端开发文章标签：前端面试 vue.js 职场和发展 javascript 前端框架 vue

本文链接：https://blog.csdn.net/ybigbear1/article/details/132204183

版权

前端开发专栏收录该内容

27 篇文章 0 订阅

订阅专栏

11. 网页从输入网址到渲染完成经历了哪些过程？

大致可以分为如下7步：

输入网址；

发送到DNS服务器，并获取域名对应的web服务器对应的ip地址；

与web服务器建立TCP连接；

浏览器向web服务器发送http请求；

web服务器响应请求，并返回指定url的数据（或错误信息，或重定向的新的url地址）；

浏览器下载web服务器返回的数据及解析html源文件；

生成DOM树，解析css和js，渲染页面，直至显示完成；

12. jQuery获取的dom对象和原生的dom对象有何区别？

js原生获取的dom是一个对象，jQuery对象就是一个数组对象，其实就是选择出来的元素的数组集合，所以说他们两者是不同的对象类型不等价。

原生DOM对象转jQuery对象：

jQuery对象转原生DOM对象：

13. jQuery如何扩展自定义方法

目前来看公司面试的问题还是比较基础的，但是对于某些只追求会用并不研究其原理的同学来说可能就没那么容易了。所以大家不仅要追求学习的广度，更要追求深度。

如何理解MVVM原理？
提到MVVM，很多前端开发者都会想到Vue的双向绑定，然而它们并不能划等号，MVVM是一种软件架构模式，而Vue只是一种在前端层面上的实现，其实不单在Vue里，在很多Web 框架应用里都有相关的实现。MVVM模式到底是什么呢？要说到MVVM这种模式，则必须要提及另一种大多数开发者都能耳熟能详的模式，就是MVC模式。

什么是MVC?
在前几年，前后端完全分离开之前，很多很火的后端框架都会说自己是支持MVC模式，像JAVA的SpringMVC、PHP的smarty、Nodejs的express和Koa，那么MVC的模式到底是什么样的？先看看下面这张经典的MVC模型图，Model（模型）、View（视图）、 Controller（控制器）相互依赖关系的三部分组成模型。

认识一下这三部分具体是指什么。

Model

这里的Model在MVC中实际是数据模型的概念，可以把它当成从数据库里查出来后的一条数据，或者是将查询出来的元数据经过裁剪或者处理后的一个特定数据模型结构。

Controller

Controller是数据模型与View之间的桥梁层，实际界面层的各种变化都要经过它来控制，而且像用户从界面提交的数据也会经过Controller的组装检查生成数据模型，然后改变数据库里的数据内容。

MVC的使用
像接触过MVC框架的同学就知道，如果想把数据从数据库里渲染到页面上，先要查询完数据库后，将拿到的元数据进行一些处理，一般会删掉无用的字段，或者进行多个数据模型间的数据聚合，然后再给到页面模板引擎（ejs，Thymeleaf等）进行数据组装，最后组合完成进行渲染后生成HTML格式文件供浏览器展示使用。
像前面提到的各大支持MVC模式的Web开发框架，在前后端彻底分离之后就很少再提了。因为前端独立开发发布，实际相对原来的MVC模式是少了View这一层，这也让新的概念Restful出现在我们的视野里，很多新的框架又开始支持提供这种前端控制轻量级模式下的适配方案。
但是前后端分离的出现后，MVC就此没有了吗？当然不是。实际对于MVC模式没有特别明确的概念，在前后端分离之后可以尝试从不同的角度去看。可以理解整个系统在原先的MVC基础上View层进行细化，把整个前端项目当成一个View层，也可以从前端视角去看，Restful接口返回的Json数据当成一个数据模型，作为MVC的Model层，而前端Javascript自身对数据的处理是Contrller层，真正的页面渲染结果是View层。
下面以前端视角下的MVC模式中举个例子，接口返回的数据Model模型与View页面之间由Controller连接，来完成系统中的数据展示。

<!--view-->
<html>
  ...
  <div>
    <span id="name"></span>
    <div id="data"></div>
  </div>
  ...
</html>
<script>
  // 生成model数据模型
  function getDataApi() {
    // 模拟接口返回
    return {
      name: 'mvc',
      data: 'mvc 数据信息'
    }
  }

  // controller控制逻辑
  function pageController() {
    const result = getDataApi();
    document.getElementById('name').innerText = `姓名： ${result.name}`;
    document.getElementById('data').innerText = result.data;
  }
</script>

什么是MVVM？

随着前端对于控制逻辑的越来越轻量，MVVM模式作为MVC模式的一种补充出现了，万变不离其宗，最终的目的都是将Model里的数据展示在View视图上，而MVVM相比于MVC则将前端开发者所要控制的逻辑做到更加符合轻量级的要求。

ViewModel

在Model和View之间多了叫做View-Model的一层，将模型与视图做了一层绑定关系，在理想情况下，数据模型返回什么试图就应该展示什么，看看下面这个例子。

<!--view页面-->
<html>
  ...
  <div>
    <span vm-bind-key="name"></span>
    <div vm-bind-key="data"></div>
  </div>
  ...
</html>
<script>
  // 生成model数据模型
  function getDataApi() {
    // 模拟接口返回
    return {
      name: 'mvc',
      data: 'mvc 数据信息'
    }
  }

  // ViewModel控制逻辑
  function pageViewModel() {
    const result = getDataApi();
    return result;
  }
</script>

上面作为理想情况下例子，在ViewModel引入之后，视图完全由接口返回数据驱动，由开发者所控制的逻辑非常轻量。不过这里要说明的是，在MVVM模式下，Controller控制逻辑并非就没了，像操作页面DOM响应的逻辑被SDK（如Vue的内部封装实现）统一实现了，像不操作接口返回的数据是因为服务端在数据返回给前端前已经操作好了。
例子里pageViewModel函数的实现是非常关键的一步，如何将数据模型与页面视图绑定起来呢？在目前的前端领域里有三类实现，Angularjs的主动轮询检查新旧值变化更新视图、Vue利用ES5的Object.defineProperty的getter/setter方法绑定、backbone的发布订阅模式，从主动和被动的方式去实现了ViewModel的关系绑定，接下来主要看看Vue中的MVVM的实现。

子组件可以直接改变父组件的数据吗？

子组件不可以直接改变父组件的数据。这样做主要是为了维护父子组件的单向数据流。每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。如果这样做了，Vue 会在浏览器的控制台中发出警告。Vue 提倡单向数据流，即父级 props 的更新会流向子组件，但是反过来则不行。这是为了防止意外的改变父组件状态，使得应用的数据流变得难以理解，导致数据流混乱。如果破坏了单向数据流，当应用复杂时，debug 的成本会非常高。

只能通过 $emit 派发一个自定义事件，父组件接收到后，由父组件修改。

学长是个程序员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端面试中Vue的有经典面试题三

在前几年，前后端完全分离开之前，很多很火的后端框架都会说自己是支持MVC模式，像JAVA的SpringMVC、PHP的smarty、Nodejs的express和Koa，那么MVC的模式到底是什么样的？先看看下面这张经典的MVC模型图，Model（模型）、View（视图）、 Controller（控制器）相互依赖关系的三部分组成模型。认识一下这三部分具体是指什么。
复制链接

扫一扫

专栏目录