Vue 响应式原理剖析 —— 数据更新常见问题
在 Vue 开发的过程中，多少都会遇到数据更新后，页面没有更新渲染这类问题。而在上两篇文章中，从「实例化」、「渲染」、「数据更新」三条线完整地讲述了 Vue「响应式」的工作原理，本文正是基于这些原理去解决一些常见的数据更新相关问题。...
Read More –>Kayo's Melody
前端工程师，现就职于微信
在 Vue 开发的过程中，多少都会遇到数据更新后，页面没有更新渲染这类问题。而在上两篇文章中，从「实例化」、「渲染」、「数据更新」三条线完整地讲述了 Vue「响应式」的工作原理，本文正是基于这些原理去解决一些常见的数据更新相关问题。...
Read More –>在上一篇文章中，梳理了 Vue 实例化和渲染的基本逻辑，并且介绍了订阅者模式这种设计模式，Vue 的「响应式」实现本质上也是一个订阅者模式，但是由于 Vue 需要考虑更加复杂的情况，并且需要在其中作出大量优化操作，因此具体实现也会复杂很多。下面通过更详细地说明 Vue「响应式」的实现，同时发掘在 Vue 中订阅者三要素分别是什么。...
Read More –>在系统地梳理「响应式」工作原理的过程中，也参考了不少现有的文章，大部分都是围绕“依赖收集”、“派发更新”或者“Watcher”，“Dep”这些响应式相关的概念逻辑展开讲述，当然这些概念和逻辑是必不可少的要展开讲述的内容，但是如果单纯围绕这些内容展开来编写一篇文章，对于理解「响应式」在整个 Vue 中的工作过程可能会感到困惑。因此，本文会换一个角度，从 Vue 使用的过程展开说明「响应式」的工作原理，即从「实例化」、「渲染」、「数据更新」三条线讲述「响应式」的工作过程。...
Read More –>在修改项目时，发现了 Sass 的告警——由除号引起的告警。告警的内容很简单，用 / 作为除法已经在 Dart Sass 2.0.0 中被弃用了，作为一个 Sass 的基础语法，这次弃用属于 breaking change 了，因此目前编译时只是会抛出 warning 而不是 error，否则大量项目都无法正常运行。研究了一下可以看到，Sass 官方特定用了一整个篇幅的文章，来阐述为何要作出这个修改...
Read More –>背景 在开发面向内部使用的「内容管理平台」的过程中，我们不时会收到一些页面问题的反馈，但在本地调试的过程中，有大量无法在本地重现的问题，这些问题的出现跟用户的访问设备、网络环境、访问路径可能存在关联。为了方便快捷地去定位这些问题，我们试图为所有页面点击操作都加上打点记录，但在实际操作中，由于业务变更频繁，开发框架的限制，展示打点数据较为复杂等因素，通过打点排查问题的实际效果并不理想，因此我们希望引入完整的流量...
Read More –>Web 无障碍开发知识 对于 Web 开发者来说，可以通过调整 HTML 的结构和标签，增加 HTML 属性，配合 CSS 和 JavaScript 等手段来提高页面的可访问性和无障碍性。例如使用了 a 标签制作了按钮，如果不进行额外的优化，读屏软件在朗读时会读作"文字内容 链接"，但实际上该 a 标签是用作按钮使用，因此可以在标签上添加 role="button" 属性。此时，读屏软件会读作"文字内容 按钮...
Read More –>QMUI Web 是一个 Web UI 的解决方案，从零开始，由编码规范，到组件和工具方法的制作，再到工作流的整合，不断在迭代，也不断在优化，走过了不少的路。趁着发布的机会，我们正好回顾这一路的探索过程，分享其中的点滴，也希望能借此让大家更了解 QMUI Web。...
Read More –>在 Gulp 的官方文档中，Gulp 的任务都是写在 gulpfile.js 这一个文件中的，如果任务数量不多，这并不会有什么问题，但当任务数量较多时，会造成代码可读性差，难以维护，多人协作时还会容易造成冲突。因此，更好的处理方式是把 Gulp 的代码结构化。 开始结构化 https://github.com/QMUI/qmui_web 这是一个前端框架，主要由一个 SASS 方法合集与内置的工作...
Read More –>SassDoc 是一款专门为 Sass 代码生成注释的工具，通过 SassDoc，开发者可以通过类似 JSDoc 的方式在 Sass 代码上添加注释，然后直接用命令生成文档。最近在处理团队框架 QMUI Web 时，遇到了需要为大量 Sass 方法写文档的问题，因此研究了这个工具，本文将会详细说明 SassDoc 的使用方法以及其中的最佳实践。 基本使用 在 Sass 中，可以使用多行注释 /* xxx...
Read More –>一. 概要 在编写 HTML 模板时，有时候会利用空格来充当文字排版的手段，最为常见的情况是在一段文字之间插入空格，来分隔相对独立的词汇。但面对这种情况，一般是不会直接使用普通空格（半角空格，即英文输入法下键盘直接输入的空格），因为当我们期望连续输入几个这样的空格来制造一段空白时，实际最终网页上显示出的空白大小只有一个空格的大小，因此通常会用 来代替半角空格，连续输入多个 ...
Read More –>JavaScript 自定义事件就是有别于如 click, submit 等标准事件的自行定制的事件，在叙述自定义事件有何好处之前，先来看一个自定义事件的例子： <div id="testBox"></div> // 创建事件 var evt = document.createEvent('Event'); // 定义事件类型 evt.initEvent(...
Read More –>一. 场景再现 如大家熟知，Ajax 可以实现页面的无刷新操作，但会造成两个与普通页面操作（有刷新地改变页面）有着明显差别的问题—— URL 没有修改以及无法使用前进、后退按钮。例如常见的 Ajax 分页，在第一页点击第二页的链接，Ajax 分页完成后浏览器地址栏上显示的 URL 依然是第一页的 URL，使用后退按钮也无法回到第一页。url 的改变代表一个标识，在传统的网页体验中，内容的变更伴随 url 的改变，ur...
Read More –>