vue每日一问

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天，点击查看活动详情

一。说说你对vue的理解

vue 是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架。

Vue核心特性： ·

• 数据驱动（MVVM)

  • M：Model（模型层，负责处理业务逻辑以及和服务器端进行交互）
  • V：View（视图层，负责将数据模型转化为UI展示出来，可以简单的理解为HTML页面）
  • VM：ViewModel（视图模型层，用来连接Model和View，是Model和View之间的通信桥梁）
  • vue的数据驱动核心，就是对VM层的实现

• 组件化

  • 将组成网页的三要素：结构(html)，样式(css)，交互(javascript) 进行拆分。
  • 降低整个系统的耦合度，可以随时对页面中的组件进行更换，例如输入框，可以替换为日历。
  • 调试方便，可以用排除法直接移除组件，检查错误是否发生在该组件中。
  • 提高可维护性，由于每个组件的职责单一，并且组件在系统中是被复用的，所以对代码进行优化可获得系统的整体升级

• 指令系统

  • vue是通过指令实现对DOM的操作
  • 条件渲染指令 v-if
  • 列表渲染指令v-for
  • 属性绑定指令v-bind
  • 事件绑定指令v-on
  • 双向数据绑定指令v-model

Vue和React对比：

• 相同点：

  • 都是MVVM框架（数据驱动视图）
  • 都有组件化思想
  • 都有Virtual DOM（虚拟dom）
  • 都有自己的构建工具（Vue是vue-cli、React是Create React App）
  • 都支持服务器端渲染
  • 都有支持native的方案（Vue是weex、React是React native）

• 区别：

  • 数据流向的不同。react从诞生开始就推崇单向数据流，而Vue是双向数据流
  • vue管理的数据变化后，离开更新页面渲染；react管理的数据变化后，需要手动更新页面渲染
  • 组件化通信的不同。react中我们通过使用回调函数来进行通信的，而Vue中子组件向父组件传递消息有两种方式：事件和回调函数
  • diff算法不同。react主要使用diff队列保存需要更新哪些DOM，得到patch树，再统一操作批量更新DOM。Vue 使用双向指针，边对比，边更新DOM

二。你对SPA单页面的理解

SPA（single-page application）,翻译过来就是单页应用，整个网站其实只有一个页面，它通过动态重写当前页面的内容来与用户交互，传统的多页面应用，页面之间需要来回切换会打断用户在浏览应用时的流畅度体验。

比如：一个杯子，早上装的牛奶，中午装的是开水，晚上装的是茶，我们发现，变的始终是杯子里的内容。

单页应用优缺点：

优点：

• 用户体验好、快，内容的改变不需要重新加载整个页面
• 良好的前后端分离，分工更明确

缺点：

• 不利于搜索引擎的抓取

  • SSR服务端渲染（将组件或页面通过服务器生成html，再返回给浏览器，如nuxt.js）
  • 静态化（1.生成静态页面保存在服务器中，2.外部请求的静态地址转化为实际的动态页面地址，而静态页面实际是不存在的）
  • 使用Phantomjs针对爬虫处理（原理是通过Nginx配置，判断访问来源是否为爬虫，如果是则搜索引擎的爬虫请求会转发到一个node server，再通过PhantomJS来解析完整的HTML，返回给爬虫。）

• 首次渲染速度相对较慢

  • 减小入口文件积
  • 静态资源本地缓存
  • 模块按需导入
  • 第三组件库按需引入
  • 路由采用懒加载方式
  • 小图片转为base64编码存储
  • 开启GZip压缩代码打包
  • 使用SSR