前端面试笔记

最新推荐文章于 2022-12-27 10:20:04 发布

weixin_45790442

最新推荐文章于 2022-12-27 10:20:04 发布

阅读量188

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_45790442/article/details/104204449

版权

本文详细介绍了MVVM模式，包括其定义、核心思想以及与MVC的区别。重点讲解了Vue框架，阐述了Vue在MVVM中的角色，强调了组件开发的优势和特性，如提高开发效率、复用性和可维护性。此外，还探讨了前后端分离的原理，以及基于Vue的SPA页面优化策略，如路由懒加载和静态资源本地缓存。

摘要由CSDN通过智能技术生成

MVVM的定义

Model-View-ViewModel的缩写

Model-模型：后端传输的数据

View-视图：用户看到的页面

ViewModel-视图模型：MVVM的核心，它是链接View和Model的桥梁，它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现方式是：模型绑定。二是将【视图】转化成【模型】。即将所看到的页面转化成后端的数据。实现的方式是DOM监听。在这两个方向都实现的，即称为数据的双向绑定。

总结
- 在MVVM框架下视图和模型是不能直接进行通信的，它们通过ViewModel来通信，ViewModel通常要实现一个observe观察者，当数据发生变化，ViewModel能够监听到数据的变化，然后通知到对应的视图做自动更新，数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做出更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就体现了数据的双向绑。并且MVVM中的View和ViewModel可以互相通信。MVVM历程图如下
  
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mUjX4B4L-1581004966860)(assets/u=32561255,2826043542&fm=173&app=25&f=JPEG.jpg)]

MVC的定义

MVC是Model-View-Controller的简写。即模型 - 视图- 控制器

M和V的意思和MVVM中的M和V的意思一样，C即Controller指的是页面业务逻辑。使用MVC的目的就是将M和V的代码分离。MVC是单向通信，也就是View跟Model，必须通过Controller来呈上启下。MVC和MVVM的区别并不是VM完全取代了C，ViewModel存在的目的在于抽离Controller中展示的业务逻辑，并不是完全代替Controller，其他视图操作业务等还是应该放在Controller中实现。也就是说MVVM实现的是业务逻辑组件的重用，由于MVC出现的时间比较早，前端并不是那么成熟，很多的业务逻辑也是在后端实现，所以前端并没有真正意义上的MVC模式。我们了解MVC的目的在于大前端的到来，出现了MVVM的框架，我们需要了解一下MVVM这种设计模式是怎么演变而来的。

MVVM框架：Vue的介绍

Vue是基于MVVM模式实现的一套框架，在Vue中：Model：指的是js中的数据，如对象数组一类。View：指的是页面视图。ViewModel：指的是实例化对象，Vue是一个渐进式的框架，

如果你已经有了一个现成的服务器应用，你可以将vue作为该应用的一部分嵌入其中，带来丰富的交互体验，
如果你希望将更多的逻辑放到前端中来实现，那么Vue的核心库极其生态系统也可以满足你的各式需求。和其他前端框架一样，Vue允许将一个页面分割成可复用的组件，每个组件有属于自己HTML，CSS，JS以用来渲染网页对应的部分。
如果构建一个大型应用，在这一点我们可能需要将东西分割成各自的组件和文件，Vue有一个命令行工具，可以快速初始化一个真实的工程

组件开发

优点

提高开发效率
提高代码的复用性（可以重复使用）
提高整个项目的可维护性（哪里出了问题可以针对性的对该组件进行修复）
简化调试步骤（在调试过程中可以对比浏览器的控制台观察有没有BUG）
便于协作开发

特性

高内聚性，组件功能必须是完整的，如果要实现下拉的菜单功能，那么在下拉菜单这个组件中，就把下拉菜单所需要的的所有功能全部实现。
低耦合度，通俗讲，代码独立不会和项目中其他代码发生冲突，在实际过程中，我们经常会涉及到团队协作，传统按照业务线去编写代码的方式，就很容易互相冲突，所以运用组件化方式就可以大大避免这种冲突的存在。
每一个组件都有自己清晰的职责，完整的功能，较低的耦合度便于单元测试和重复利用

组件的构成

样式及逻辑
行为逻辑
数据

注册组件

组件必须在指定实例之前执行
一般将组件提取出来放在单独JS文件中，按需加载
也可以全局注册

组件的通信

父组件要给子组件传递数据，子组件需要将它内部发生的事情告知父组件。

组件中的数据

组件中的数据必须是函数，如果共用一个对象，在更改其中一个组件数据时，也会影响到其他的组件。

换做函数形式，每个组件都能够有自己独立的数据，从而不会影响到其他的组件，有点像解耦的概念。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OGC8ucO5-1581004966864)(assets/5a45a0771b86e.jpg)]

组件信息传递

前后端分离和前后端不分离

前后端不分离

在前后端不分离的模式中，前端的数据和交互都由后端实现。由后端渲染页面和重定向，前后端分离主要适合纯网页的布局，后端需要控制前端的展示，前端和后端的耦合度很高。

交互模式如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i0MaKpe4-1581004966865)(assets/1394466-20180916231510365-285933655.png)]

前后端分离

在前后端分离的模式中，后端仅仅返回前端所需要的数据，不再渲染HTML页面，不再控制前端的效果，至于前端用户看到什么效果，从后端请求的数据如何渲染到页面中，则完全由前端自己决定，网页有网页的处理方式，APP有APP的处理方式，但无论哪种模式，所需要的数据基本相同，后端只需要关心数据本身，设计出一套逻辑对外提供数据即可。

在前后端的分离的模式中，前端和后端的耦合度相对比较低。

在前后端分离的模式中，我们通常将后端开发的每个视图称之为一个接口，或者API，前端通过访问接口来对数据进行增删改查。

对应的数据交互如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oYt3L8ay-1581004966874)(assets/1394466-20180916231716242-1862208927.png)]