对Vue的理解

vue， 是一个JavaScript的框架，主要用于开发单页面应用，它的官网上给他的的定义是渐进式框架，在前端这个行业受许多人喜欢。

vue具有自己的数据驱动 ， (MVVM)模型 和 它的组件化编程， 内部优秀的指令系统。

与其他框架相比vue比较简单， 上手快。

vue的MVVM模型

vue的数据驱动 MVVM。
M - > Model 模型层 负责处理逻辑业务和服务端的交互

V - > View 视图层 负责将数据模型，转为UI展示出来，可以理解为HTML

VM -> View Model 视图模型层， 用来连接 Model 和 View 层的，实现模型层和视图层的通信， 是它们两个之间的通信的桥梁

vue组件化的好处

组件化， 就是将开发的代码中的某一个模块，进行封装为一个组件，需要时候随时可以使用

在vue中组件化的好处

  • 降低整个体系的耦合度、在保持接口不变的情况下， 可以替换不同的组件完成需求
  • 调试方便，某一个组件出现问题， 可以放快速找到该组件 进行修复或移除
  • 提高可维护性，由于每个组件的职责单一，并且组件在系统中是被复用的，所以对代码进行优化可获得系统的整体升级

vue的指令系统

  • v-if
  • v-for
  • v-html
  • v-show
  • v-on
  • v-bind
  • v-model
  • …

讲对SPA单页面的理解

SPA全称： Single Page Application, 即单页面应用。

SPA 页面是 它所需要的资源， 如HTML\CSS\JS 等，在一次请求中加就加载完成，也就是不刷新的动态加载。而对于普通的页面来说，所有的页面渲染、逻辑处理、页面路由、接口请求、都是在浏览器中发生。 对SPA页面来说， 页面的切换就是组件或是视图的切换

SPA页面只有一个HTML页面，在vue中通过vue-router 来对局部切换组件，而非刷新整个页面，来实现无刷新切换页面的技术

单页面应用的优缺点

优点：

  • 具有桌面应用的即时性、网站的可移植性和可访问性
  • 用户体验好、快，内容的改变不需要重新加载整个页面
  • 良好的前后端分离，分工更明确

缺点：

  • 不利于搜索引擎的抓取
  • 首次渲染速度相对较慢

SPA和MAP的区别

单页面应用和多页面应用的区别

MPA -> MultiPage-page Application 多页面应用
MPA 中的每一个页面都是一个主页，在访问另一个页面时候都需要重新加载 html、css、js 等文件

单页面应用和多页面应用的区别

单页面应用（SPA） 多页面应用（MPA）
组成 一个主页面和多个页面片段 多个主页面
刷新方式 局部刷新 整页刷新
url模式 哈希模式 历史模式
SEO搜索引擎优化 难实现，可使用SSR方式改善 容易实现
数据传递 容易 通过url、cookie、localStorage等传递
页面切换 速度快，用户体验良好 切换加载资源，速度慢，用户体验差
维护成本 相对容易 相对复杂

v-show 和 v-if 的区别和使用场景

v-if 和 v-show 的共同点

v-if 和 v-show 都能控制元素在页面是否展示。

  • 当表达是为 true 时， 都会占据页面的位置
  • 当表达式为 false 时， 都不会占据页面

v-if 和 v-show 的区别

  • v-show 是给元素加上 css--display: none , dom 元素依旧存在， v-if 显示和隐藏则是将 dom 元素整个添加或删除
  • v-if 消耗性能较高、 v-show 在初始渲染时消耗较高
  • v-if 绑定的表达式由 true -> false 时， 会触发vue的声明周期钩子 ， 比如 mountde beforeCreated beforeDestory ， 而 v-show 并不会触发声明组件的生命周期

v-if 和 v-show 的使用场景

v-if 与 v-show 都能控制 dom 元素页面显示

v-if 于 v-show 相比开销更大 （直接操作DOM的添加与删除）

如果需要非常频繁的切换， 使用 v-show 更好

如果在运行时条件很少改变 ， 使用 v-if 更好

day _4_10

复习到的vue2的面试内容

https://vue3js.cn/interview/vue/show_if.html#三、v-show与v-if原理分析