深度剖析 Vue.js 经典知识点之:SPA、SSR与MVVM

这篇具有很好参考价值的文章主要介绍了深度剖析 Vue.js 经典知识点之:SPA、SSR与MVVM。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

SPA

深度剖析 Vue.js 经典知识点之:SPA、SSR与MVVM

更多精彩内容,请微信搜索“前端爱好者戳我 查看 。‘

谈一谈你对 SPA 单⻚面的理解,它的优缺点分别是什么

SPA( single-page application )仅在 Web ⻚面初始化时加载相应的 HTML、JavaScript 和 CSS。

一旦⻚面加载完成,SPA 不会因为用户的操作而进行⻚面的重新加载或跳转;取而代之的是利用路由机制实现 HTML 内容的变换,UI 与用户的交互,避免⻚面的重新加载。

优点:

  • 用户体验好、快,内容的改变不需要重新加载整个⻚面,避免了不必要的跳转和重复渲染;
  • 基于上面一点,SPA 相对对服务器压力小;
  • 前后端职责分离,架构清晰,前端进行交互逻辑,后端负责数据处理;

缺点:

  • 首屏(初次)加载慢:为实现单⻚ Web 应用功能及显示效果,需要在加载⻚面的时候将JavaScript、CSS 统一加载,部分⻚面按需加载;
  • 不利于 SEO:由于所有的内容都在一个⻚面中动态替换显示,所以在 SEO 上其有着天然的弱势。

SPA 单⻚面应用的实现方式有哪些

前端路由的实现原理。
  • hash 模式
  • history 模式

hash 模式中,在 window 上监听 hashchange 事件(地址栏中hash变化触发)驱动界面变化;

history 模式中,在 window 上监听 popstate 事件(浏览器的前进或后退按钮的点击触发)驱动
界面变化,监听 a 链接点击事件用 history.pushState 、 history.replaceState 方法驱动界面变
化;直接在界面用显示隐藏事件驱动界面变化。

VUE

深度剖析 Vue.js 经典知识点之:SPA、SSR与MVVM

使用过 Vue SSR 吗?说说 SSR?

深度剖析 Vue.js 经典知识点之:SPA、SSR与MVVM

SSR – Server Side Renderer

Vue.js 是构建客户端应用程序的框架。默认情况下,可以在浏览器中输出 Vue 组件,进行生成DOM 和操作 DOM。

然而,也可以将同一个组件渲染为服务端的 HTML 字符串,将它们直接发送到浏览器,最后将这些静态标记"激活"为客户端上完全可交互的应用程序。

即:SSR大致的意思就是vue在客户端将标签渲染成的整个 html 片段的工作在服务端完成,服务端形成的html 片段直接返回给客户端这个过程就叫做服务端渲染。

服务端渲染 SSR 的优缺点

服务端渲染的优点:

  • 更好的 SEO: 因为 SPA ⻚面的内容是通过 Ajax 获取,而搜索引擎爬取工具并不会等待 Ajax 异步完成后再抓取⻚面内容,所以在 SPA 中是抓取不到⻚面通过 Ajax 获取到的内容;而 SSR 是直接由服务端返回已经渲染好的⻚面(数据已经包含在⻚面中),所以搜索引擎爬取工具可以抓取渲染好的⻚面;

  • 更快的内容到达时间(首屏加载更快): SPA 会等待所有 Vue 编译后的 js 文件都下载完成后,才开始进行⻚面的渲染,文件下载等需要一定的时间等,所以首屏渲染需要一定的时间;SSR 直接由服务端渲染好⻚面直接返回显示,无需等待下载 js 文件及再去渲染等,所以 SSR 有更快的内容到达时间;

服务端渲染的缺点:

  • 更多的开发条件限制: 例如服务端渲染只支持 beforCreate 和 created 两个钩子函数,这会导致一些外部扩展库需要特殊处理,才能在服务端渲染应用程序中运行;并且与可以部署在任何静态文件服务器上的完全静态单⻚面应用程序 SPA 不同,服务端渲染应用程序,需要处于 Node.js server运行环境;

  • 更多的服务器负载:在 Node.js 中渲染完整的应用程序,显然会比仅仅提供静态文件的 server 更加大量占用CPU 资源 (CPU-intensive - CPU 密集),因此如果你预料在高流量环境 ( high traffic ) 下使用,请准备相应的服务器负载,并明智地采用缓存策略。

如果没有 SSR 开发经验的同学,可以参考一篇 SSR 的实践文章《Vue SSR 踩坑之旅》,里面 SSR 项目搭建以及附有项目源码。

谈一谈你对 MVVM 的理解

传统的服务端 MVC 架构模型:View

  • models 数据模型,专⻔提供数据支持的
  • controllers 控制器模块,处理不同的⻚面请求的或者处理接口请求
  • views 视图文件

深度剖析 Vue.js 经典知识点之:SPA、SSR与MVVM

核心理念:单一职责,分工协作

优点:

  • 更好的开发效率
  • 更好的可维护性

MVVM 模式常⻅于用于构建用户界面的客户端应用。

深度剖析 Vue.js 经典知识点之:SPA、SSR与MVVM

MVVM 模型:

字面意义是这样的:

MVVM 是 Model-View-ViewModel 的缩写,MVVM 是一种设计思想。
  • Model 层代表数据模式,也可以在 Model 中定义数据修改和操作的业务逻辑
  • View 代表 UI 组件,它负责将数据模型转化为 UI 展现出来
  • ViewModel 是一个同步 View 和 Model 的对象。

简单理解

前端开发早期的时候都是操作 DOM

后来使用 jQuery 让我们提高了操作 DOM 的效率,但从开发⻆度还是在大量的手动操作 DOM

MVVM 模式让以往手动操作 DOM 的方式彻底解脱了,它不要用户自己操作 DOM,而是将普通数据绑定到 ViewModel 上,会自动将数据渲染到⻚面中,视图变化会通知 ViewModel 层更新数据,数据变化也会通过 ViewModel 层更新视图,因此 MVVM 中最重要的⻆色就是 ViewModel,真正意义上把视图和数据实现了解耦,提高了开发效率

MVVM 模式主要用于构建用户界面的前端应用

  • 微软的 WPF,构建客户端应用的
  • 手机应用,iOS APP、Android App
  • Web 应用

核心:

  • MVVM 模式让我们从繁琐的 DOM 操作中彻底解放了
  • MVVM 也叫数据驱动视图

Vue 中的 MVVM:

深度剖析 Vue.js 经典知识点之:SPA、SSR与MVVM

用 Vue 中组件代码来表示 MVVM 的话就是这样的:

深度剖析 Vue.js 经典知识点之:SPA、SSR与MVVM
深度剖析 Vue.js 经典知识点之:SPA、SSR与MVVM文章来源地址https://www.toymoban.com/news/detail-465333.html

到了这里,关于深度剖析 Vue.js 经典知识点之:SPA、SSR与MVVM的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 持续不断更新中... 自己整理的一些前端知识点以及前端面试题,包括vue2,vue3,js,ts,css,微信小程序等

    答: 在普通的前端项目工程中,在script标签中增加setup即可使用api 使用setup()钩子函数 答: 不要在计算属性中进行异步请求或者更改DOM 不要直接修改computed的值 区别: 计算属性值基于其响应式依赖被缓存,意思就是只要他之前的依赖不发生变化,那么调用他只会返回之前缓

    2024年02月11日
    浏览(58)
  • 微机原理 || 8253接口芯片知识点+4道经典例题+手写解题过程

      【例1】 :  设825 3 端口地址为3 00H~303H, 要求计数器2工作在方式5,二进制计数, CLK2=2MHz , OUT2=1KHz。 试按上述要求完成825 3 的 初始化 。   【例2】: 选择计数器 0 工作于方式 3 ,计数初值为 1234 ,十进制计数方式;计数器 2 工作于方式 2 ,计数初值为 61H ,采用二进制

    2024年02月10日
    浏览(51)
  • 【计算机网络】第五章传输层知识点及经典例题汇总

    1、从通信和信息处理的角度看,传输层向它上面的应用层提供通信服务,它属于面向通信部分的最高层,同时也是用户功能中的最低层 2、此层包含TCP和UDP协议。TCP 传送的数据单位协议是 TCP 报文段(segment),UDP 传送的数据单位协议是 UDP 报文或用户数据报。 3、IP数据报要经过

    2024年02月04日
    浏览(49)
  • [深度学习]1. 深度学习知识点汇总

    本文记录了我在学习深度学习的过程中遇到过的不懂的知识点,为了方便翻阅,故将其发表于此,随时更新,供大家参考。 在深度学习中, 测试精度 和 训练精度 是两个重要的指标,它们分别代表了模型在 测试集上的分类正确率 和 训练集上的分类正确率 。测试集是用来评

    2024年02月10日
    浏览(45)
  • 【计算机组成原理】考研真题攻克与重点知识点剖析 - 第 1 篇:计算机系统概述

    本文基础知识部分来自于b站:分享笔记的好人儿的思维导图与王道考研课程,感谢大佬的开源精神,习题来自老师划的重点以及考研真题。 此前我尝试了完全使用Python或是结合大语言模型对考研真题进行数据清洗与可视化分析,本人技术有限,最终数据清洗结果不够理想,

    2024年02月07日
    浏览(63)
  • 深度学习相关知识点概念

    卷积神经网络(Convolutional Neural Network,CNN) 是一种专门用于处理和分析具有网格结构数据的人工神经网络。CNN主要应用于计算机视觉领域,用于图像识别、物体检测、图像分割等任务。 CNN的设计受到了生物视觉系统的启发,其主要特点是在网络中引入了卷积层(convolutiona

    2024年04月16日
    浏览(47)
  • 本文将从云原生的概念、背景知识、Kubernetes架构及核心组件、应用场景、案例研究等方面深入剖析云原生课程的相关知识点

    作者:禅与计算机程序设计艺术 2020年,技术快速发展,云计算火爆。云原生领域也随之蓬勃发展。云原生已经成为大势所趋,大量企业都在逐渐转型云原生应用架构。国内外云服务厂商也纷纷推出基于Kubernetes的服务平台,而Kubernetes又是云原生开源技术体系的一部分。为了帮

    2024年02月07日
    浏览(64)
  • js的十个知识点

    1、箭头函数 箭头函数没有自己的this,只会在自己的作用域的上一层继承this,所以箭头函数的this指向在它定义的时候就已经确定了,之后不会改变,使用call、apply、bind等方法也不能改变,因为没有自己的this,所以不能作为构造函数使用 2、JSON json是一种基于文本的轻量级的

    2024年01月23日
    浏览(55)
  • Node.js基础知识点(四)

    本节介绍一下最简单的http服务 一.http 可以使用Node 非常轻松的构建一个web服务器,在 Node 中专门提供了一个核心模块:http http 这个模块的就可以帮你创建编写服务器。 1. 加载 http 核心模块 2. 使用 http.createServer() 方法创建一个Web 服务器 返回的是一个 Server 实例: 3.服务器要干

    2024年01月17日
    浏览(49)
  • Node.js基础知识点(三)

    一、fs 浏览器中的Javascript是没有文件操作的能力的,但是Node中的Javascript具有文件操作的能力 fs是 file-system的简写,就是文件系统的意思,在Node中如果想要进行文件操作,就必须引入 fs 这个核心模块,在 fs 中就提供了所有的文件操作相关的 API 例如: fs.readFile 就是用来读取

    2024年01月25日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包