vue中SPA的优缺点和理解
说说你对SPA的理解,他的优缺点分别是什么?
SPA(single-page application) 尽在Web页面初始化时加载相应的HTML,JavaScript和CSS。一旦页面加载完成,SPA不会因为用户的操作而进行页面的重新加载或者跳转;取而代之的时利用路由机制实现HTML内容的变化,UI与用户的交互,避免页面的重新加载。
优点:
用户体验好、快、内容的改变不需要重新加载真个页面,避免了不必要的跳转和重复渲染;甚至于上面的一点,SPA相对对服务器压力小;前后端职责分离,架构清晰,前端进行交互逻辑,后端负责数据处理;
缺点:
初次加载耗时多;位实现单页Web应用功能及显示效果,需要在加载页面的时候讲JavaScript、CSS统一加载,部分页面按需加载,前进后退路由管理,由于单页应用在一个页面中显示所有的内容,所以不能使用浏览器的前进后退功能,所有页面切换需要自己建立堆栈管理;SEO难度较大;由于所有的内容都在一个页面中动态替换显示,所以SEO上有着天然的弱势
总结:
整个应用只有一个.html文件
S(Single)P(Page)A(applaction)
单页应用的优点,全局只有一个html,他的刷新是局部刷新。
优点是:响应速度快,用户体验性好
缺点是:不利于SEO(搜索引擎)优化,首页加载过慢
单页应用的案例: se6官网
vue中SPA的优缺点和理解的更多相关文章
- vue中的钩子函数的理解
接下来我们对几个钩子函数进行解释 beforeCreated:这个钩子函数实在vue实例创建后,触发的.这个时候还没有进行data里的数据监听和事件的初始化 其实大家很多时候都会在created钩子函 ...
- vue中关于computed的一点理解
computed相当于属性的一个实时计算,如果实时计算里关联了对象,那么当对象的某个值改变的时候,同事会出发实时计算. 例子: <body id="content"> ...
- 理解MVVM在react、vue中的使用
理解MVVM在react.vue中的使用 一:什么是MVC.为什么不用MVC 1:MVC的含义: M(modal):是应用程序中处理数据逻辑的部分. V (view) :是应用程序中数据显示的部分. ...
- 理解vue中的scope的使用
理解vue中的scope的使用 我们都知道vue slot插槽可以传递任何属性或html元素,但是在调用组件的页面中我们可以使用 template scope="props"来获取 ...
- 理解Vue中的Render渲染函数
理解Vue中的Render渲染函数 VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数.比如如下我想要实现 ...
- 【转】简单理解Vue中的nextTick
前言: Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick ...
- 简单理解Vue中的nextTick
Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick. 一. ...
- vue中config/index.js:配置的详细理解
当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面 (环境变量及其基本变量的配置) var path = require('path') ...
- 对vue中 默认的 config/index.js:配置的详细理解 -【以及webpack配置的理解】-config配置的目的都是为了服务webpack的配置,给不同的编译条件提供配置
当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面 (环境变量及其基本变量的配置) var path = require('path') ...
随机推荐
- asp.net net::ERR_ABORTED 500 (Internal Server Error) 无法加载JS CSS等文件的解决方法
网站换服务器,部署上去后打开首页,js .css等文件始终无法加载,经过排查,问题出现在web.config文件中. <defaultDocument> <files> < ...
- 死磕Lambda表达式(五):Comparator复合
给岁月以文明,而不是给文明以岁月.--<三体> 在上一篇文章(传送门)中介绍了JDK为我们提供的常用函数式接口,JDK不仅提供的这些函数式接口,其中一些接口还为我们提供了实用的默认方法,这 ...
- Codeforces Round #567 (Div. 2) B. Split a Number
Split a Number time limit per test 2 seconds memory limit per test 512 megabytes input standard inpu ...
- Javascript函数之深入浅出递归思想
一.递归函数的理解 1.生活中的递归 "递归"在生活中的一个典例就是"问路".如图小哥哥进入电影院后找不到自己的座位,问身边的小姐姐"这是第几排&qu ...
- cookie sessionStorage localStorage 使用小结
1.cookie 随http 一起发送 2.webStorage 客户端本地存储功能 可以在客户端 本地建立 一个数据库 不参与与服务器的通讯 setItem (key, value) —— 保存 ...
- 初识js(第一篇)
初识javascript js是前端中作交互控制的语言,有了它,我们的前端页面才能"活"起来.学好这么语言显得非常重要,但是存在一定难度,所以一定要认真学习,充满耐心. js书写规 ...
- 理解MapReduce计算构架
用Python编写WordCount程序任务 程序 WordCount 输入 一个包含大量单词的文本文件 输出 文件中每个单词及其出现次数(频数),并按照单词字母顺序排序,每个单词和其频数占一行,单词 ...
- IEnumerable和IQueryable在使用时的区别
最近在调研数据库查询时因使用IEnumerable进行Linq to entity的操作,造成数据库访问缓慢.此文讲述的便是IEnumerable和IQueryable的区别. 微软对IEnumera ...
- HIT软件构造课程3.2总结(Designing Specificaton)
本节转向“方法/函数/操作”如何定义 上一节是名词 这一节是动词 1.编程语言中的函数和方法 方法 使用者不需要知道方法内部如何实现,这叫做“抽象”. 参数 参数类型是否匹配,在静态检查时完成. 返回 ...
- [noip2012]国王游戏<贪心+高精度>
题目链接: https://vijos.org/p/1779 https://www.luogu.org/problem/show?pid=1080 http://codevs.cn/problem/ ...