spa

基础篇 说说你对MVVM的理解 Model-View-ViewModel的缩写，Model代表数据模型，View代表UI组件,ViewModel将Model和View关联起来 数据会绑定到viewModel层并自动将数据渲染到页面中，视图变化的时候会通知 viewModel 层更新数据 了解mvc/mvp/mvvm的区别 Vue2.x响应式数据/双向绑定原理 Vue 数据双向绑定主要是指： 数据变化更新视图，视图变化更新数据 。其中，View变化更新Data，可以通过事件监听的方式来实现，所以 Vue数据双向绑定的工作主要是如何 根据Data变化更新View 。 简述 ： 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。 这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖，在 property 被访问和修改时通知变更。 每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。 深入理解： 监听器

前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术，帮我们处理了前端开发中最脏最累的 DOM 操作部分， 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM；但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题，所以我们仍然需要去关注 Vue 项目性能方面的优化，使项目具有更高效的性能、更好的用户体验。本文是作者通过实际项目的优化实践进行总结而来，希望读者读完本文，有一定的启发思考，从而对自己的项目进行优化起到帮助。本文内容分为以下三部分组成： Vue 代码层面的优化； webpack 配置层面的优化； 基础的 Web 技术层面的优化。 一、代码层面的优化 1.1、v-if 和 v-show 区分使用场景 v-if 是 真正 的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；也是 惰性的 ：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 v-show 就简单得多， 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 的 display 属性进行切换。 所以，v-if 适用于在运行时很少改变条件，不需要频繁切换条件的场景；v-show 则适用于需要非常频繁切换条件的场景。 1.2、computed 和 watch 区分使用场景 computed： 是计算属性

目录 1. 前言 2. 关于vue-simple-uploader 3. 基于vue-simple-uploader封装全局上传组件 4. 文件上传流程概览 5. 文件分片 6. MD5的计算过程 7. 秒传及断点续传 7.1 对于前端来说 7.2 前端做分片检验：checkChunkUploadedByResponse 8. 源码及后记 8.1 关于第一个分片丢失问题 2019/8/6更新 1. 前言 之前公司要在管理系统中做一个全局上传插件，即切换各个页面的时候，上传界面还在并且上传不会受到影响，这在vue这种spa框架面前并不是什么难题。然而后端大佬说我们要实现 分片上传 、 秒传 以及 断点续传 的功能，听起来头都大了。 很久之前我写了一篇webuploader的文章，结果使用起来发现问题很多，且官方团队不再维护这个插件了， 经过多天调研及踩雷，最终决定基于 vue-simple-uploader 插件实现该功能，在项目中使用起来无痛且稳定。 如果你只是想实现基本的（非定制化的）上传功能，直接使用 vue-simple-uploader ，多读一下它的文档，不需要更多的二次封装。 如果你只是想实现全局上传插件，也可以参照一下我的实现。 如果你用到了分片上传、秒传及断点续传这些复杂的功能，恭喜你，这篇文章的重点就在于此。 本文源码在此： https://github.com

本文将以理论介绍的方式来对微前端这个概念做一个整体扫盲，涉及到的大多数理论知识并不会太过于对展开，如果读者对一些细节比较感兴趣，可以留言或者搜索相关的概念。 什么是微前端？ 微前端（Micro-Frontends）是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立运行、独立开发、独立部署。 微前端不是单纯的前端框架或者工具，而是一套架构体系 ，这个概念最早在2016年底被提出，可以参考在Google上搜索Micro-Frontends, 排名靠前的https://micro-frontends.org的博客文章，提出了早期的微前端模型。 为什么会有微前端 任何新技术的产生都是为了解决现有场景和需求下的技术痛点，微前端也不例外： 拆分和细化 ：当下前端领域，单页面应用（SPA）是非常流行的项目形态之一，而随着时间的推移以及应用功能的丰富，单页应用变得不再单一而是越来越庞大也越来越难以维护，往往是改一处而动全身，由此带来的发版成本也越来越高。微前端的意义就是将这些庞大应用进行拆分，并随之解耦，每个部分可以单独进行维护和部署，提升效率。 整合历史系统 ：在不少的业务中，或多或少会存在一些历史项目，这些项目大多以采用老框架类似（Backbone.js，Angular.js 1

最近因为因为项目的原因，一直在寻找一款合适的前端模版，之前的 Vue 前端页面都是自己写的，写多了就烦了，因为功能都差不多，写来写去就没意思了。 所以在新项目中想看看市面上的 Vue 后台管理模版，找个现成的，改一改基本就 OK 了，团队也省事一些。 老实说，Vue 的生态还是相当丰富的，经典的、新生的后台管理框架都有，我这里和大家分享我们这次重点比较的三个。 vue-element-admin GitHub 地址： https://github.com/PanJiaChen/vue-element-admin 演示地址： https://panjiachen.github.io/vue-element-admin 这个项目名气还是挺大的，在我刚开始做 vhr 的时候，就有了解过这个项目，那个时候这个项目才刚刚开发没多久，star 都没几个，现在已然混成一方霸主了。 vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui 实现。它使用了最新的前端技术栈，内置了 i18n 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。 可以说，这个项目的功能还是比较全的，它里边将一些常见的功能模块如权限管理等都做好了，有的时候，你甚至会觉得这个项目有些臃肿。 我们来看一张效果图：

背景 性能优化是所有前端人的追求，在这条路上，方法多种多样。这篇文章，说一下可以怎样定义性能指标及上报。 指标 FP 含义 FP，全称 First Paint ，翻译为 首次绘制 ,是时间线上的第一个 时间点 ，它代表网页的第一个像素渲染到屏幕上所用时间，也就是页面在屏幕上首次发生视觉变化的时间。 统计逻辑 通过performance.getEntriesByType('paint’)，取第一个pain的时间。如： function getFPTime ( ) { const timings = performance.getEntriesByType( 'paint' )[ 0 ]; return timings ? Math .round(timings.startTime) : null } 复制代码 FCP 含义 FCP，全称 First Contentful Paint ，翻译为 首次内容绘制 ，顾名思义，它代表浏览器第一次向屏幕绘 内容 。 注意：只有首次绘制文本、图片（包含背景图）、非白色的canvas或SVG时才被算作FCP。 统计逻辑 通过performance.getEntriesByType('paint’)，取第二个pain的时间，或者通过Mutation Observer观察到首次节点变动的时间。如： const domEntries = [] const

前言： 准备写这篇文章的时候 ， 我自认为对MVC已经有深刻理解了，可是画图的时候发现，理解还是有漏洞，于是又阅读，思考，整理，加深了理解， 写了这篇文章， 估计还有漏洞，欢迎讨论。 这再一次说明了写作的好处： 很多时候自以为理解了，实际上脑海中有很多想当然的假设，写作会把这些假设给暴露出来。 大概是二三十年前， 人类逐渐从命令行界面时代走出来，进化到了GUI时代。 注： GUI（Graphic User Interface），即图形用户接口。 （一个命令行程序） （一个带有图形界面的桌面应用程序 ，自己画的，有点丑啊） 每当人类努力地开发新的 桌面GUI程序 的时候， 至少要搞定下面几类工作： 1. 界面（以及界面中元素的）布局。 这是一件挺费劲的工作， 要尽可能地美观漂亮，要不然就卖不出去。 2. 界面上有些“逻辑”需要处理 比如上图中那个薪水计算程序，“计算” 按钮默认是灰色的， 不能点击，用户输入了税前收入以后， “计算”按钮就会被激活，表示计算了。 3. 所谓的业务逻辑。 用户点击了“计算”按钮以后，计算五险一金，个人所得税和税后收入。 这三者搅在一起，让程序代码凌乱不堪，稍微复杂点儿的程序就长达几千行， 不断地挑战着程序员的底线，修改别人的代码，添加新的功能要比从头写难好多倍！ 大家都在泥潭中挣扎。 关于MVC, MVP, MVVM的精选资料 需要的小伙伴可以私信

实际上存在三种模式： 　　Hash: 使用URL的hash值来作为路由。支持所有浏览器。 　　History: 以来HTML5 History API 和服务器配置。参考官网中HTML5 History模式 　　Abstract： 支持所有javascript运行模式。如果发现没有浏览器的API，路由会自动强制进入这个模式。 Vue-router 中hash模式和history模式的关系 在vue的路由配置中有mode选项 最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的 mode:"hash"; mode:"history"; hash模式和history模式的不同 对于vue这类渐进式前端开发框架，为了构建 SPA（单页面应用），需要引入前端路由系统，这也就是 Vue-Router 存在的意义。前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。 为了达到这一目的，浏览器当前提供了以下两种支持： hash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。比如这个 URL：http://www.abc.com/#/hello，hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。

webpack插件用于执行更广泛的任务，例如包优化，资产管理和环境变量注入。 webpack本身建立在与webpack配置相同的插件系统上。根据你使用Webpack的方式，有多种使用插件的方法。 事不宜迟，这里有六个很棒的webpack插件。 Webpack Bundle Analyzer 通过交互式的、可缩放的树状图来可视化webpack输出文件的大小。 该插件将帮助你您执行以下操作： 了解你的包里真正有什么 找出哪些模块构成了捆绑软件的最大组成部分 查找错误到达的模块 优化你的Webpack捆绑包 安装 # NPM npm install --save-dev webpack-bundle-analyzer # Yarn yarn add -D webpack-bundle-analyzer 复制代码 使用 const BundleAnalyzerPlugin = require ( 'webpack-bundle analyzer' ); module .exports = { plugins : [ new BundleAnalyzerPlugin() ] } 复制代码 offline-plugin offline-plugin 旨在为webpack项目提供离线体验。 该插件使用 ServiceWorker 和 AppCache 作为后台引擎。只需将这个插件包含在

(转自) https://www.cnblogs.com/zifayin/p/8312677.html 1.路由变化页面数据不刷新问题 这种情况一般出现在vue-router的history模式下，初次进入会执行钩子函数，再次进入时则不会。 　解决方案： 监听路由变化 watch : { "$route" (to, from) { if(to.path.indexOf('/home') > -1) { this.initData() } } } 2.setInterval路由跳转继续运行并没有及时进行销毁 　 比如一些弹幕，走马灯文字，这类需要定时调用的，路由跳转之后，因为组件已经销毁了，但是setInterval还没有销毁，还在继续后台调用，控制台会不断报错，如果运算量大的话，无法及时清除，会导致严重的页面卡顿。 　解决方案：在组件生命周期beforeDestroy停止setInterval beforeDestory() { clearInterval(this.timer); MessageBox.close() } 3.vue 滚动行为用法，进入路由需要滚动到浏览器底部、头部等等 使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。 注意