vue的异步更新队列

前言 了解vue的双向数据绑定就会知道,在数据发生变化的时候,会触发劫持数据后设置的setter,在setter中,会触发Dep的notify, notify则会调用所有watchers(订阅者)的update,从而触发视图的更新,但其实watchers的update过程并没有那么简单。思考这样一个问题,在vue中,多次设置data里的同一个key的值,视图渲染几次?其实答案很明显,计算虚拟dom, 渲染的过程是很消耗性能的,vue肯定也会在这一个地方做优化,那vue又是如何实现多次设置同一个值只渲染一次呢?答案如标题所示,用的是异步更新队列。 queueWatcher 先来看下watcher.update做了什么: update () { /* istanbul ignore else */ if (this.lazy) { this.

  • ChangFaHu
6 min read

react-redux源码学习

前言 之前已经分析过,redux的源码。现在再来看一下react-redux的源码吧。 还是和之前一样,我习惯带着问题去看源码,关于react-redux我有如下几个问题: Provider的作用 connect的作用原理 react-redux如何促发组件更新 源码分析 react-redux的源码结构如下: │ index.js │ ├─components │ connectAdvanced.js │ Provider.js │ ├─connect │ connect.js │ mapDispatchToProps.js │ mapStateToProps.js │ mergeProps.js │ selectorFactory.js │ verifySubselectors.js │ wrapMapToProps.

  • ChangFaHu
9 min read

Redux源码学习

前言 学习源码,个人认为最佳的方式是带着问题去看源码,那么对于redux我们会有什么想要知道的问题呢? createStore做了什么? dispatch做了什么? reducer做了什么? redux中间件怎么实现? redux的state树怎么和react交互? 源码分析 这是redux源码的文件目录,一个文件一个文件看,让我们带着问题去看一下源码的实现方式。 createStore import isPlainObject from 'lodash/isPlainObject' import $$observable from 'symbol-observable' //redux自己创建的一个action,最后面有dispatch调用,用来初始化状态树和reducer改变后初始化状态树 export const ActionTypes = { INIT: '@@redux/INIT'

  • ChangFaHu
11 min read

关于vue双向数据绑定实现的学习

学习vue的双向数据绑定首先要知道几个知识点: 1.Object.defineProperty: 用于劫持数据 Object.defineProperty(obj, prop, descriptor) 参数 obj 需要被操作的目标对象 prop 目标对象需要定义或修改的属性的名称。 descriptor 将被定义或修改的属性的描述符。 返回值 被传递给函数的对象。 eg: var obj = { }; // 为obj定义一个名为 hello 的访问器属性 Object.defineProperty(obj, "hello", { get: function

  • ChangFaHu
6 min read

co源码学习笔记

关于yield yield 表达式 遇到yield表达式,就暂停执行后面的操作,并将紧跟在yield后面的那个表达式的值,作为返回的对象的value属性值。 下一次调用next方法时,再继续往下执行,直到遇到下一个yield表达式。 如果没有再遇到新的yield表达式,就一直运行到函数结束,直到return语句为止,并将return语句后面的表达式的值,作为返回的对象的value属性值。 如果该函数没有return语句,则返回的对象的value属性值为undefined。 eg. function* helloWorldGenerator() { yield 'hello'; yield 'world'; return 'ending'; } var hw = helloWorldGenerator(); hw.next() // { value: 'hello',

  • ChangFaHu
7 min read

前端路由实现

HashHistory hash(“#”)符号的本来作用是加在URL中指示网页中的位置,#符号本身以及它后面的字符称之为hash,可通过window.location.hash属性读取。 hash的特点: hash虽然出现在URL中,但不会被包括在HTTP请求中。它是用来指导浏览器动作的,对服务器端完全无用,因此,改变hash不会重新加载页面。 可以为hash的改变添加监听事件: window.addEventListener("hashchange", function(){}, false) 每一次改变hash(window.location.hash),都会在浏览器的访问历史中增加一个记录 通过修改hash值,并使页面作出相应处理,则可实现改变路由,同时不重新加载页面,修改hash的方法: 实现HashHistory.

  • ChangFaHu
5 min read

CSS之BFC的学习

什么是BFC 一些元素,如float元素,如position为absolute,inline-block,table-cell或table-caption的元素,以及overflow属性不为visible的元素,它们将会建立一个新的块级格式化上下文(Block Formatting Context),也就是我们所说的BFC 怎么形成BFC BFC也是HTML中的一个盒子(看不见而已),只有满足至少下列条件之一才能形成BFC: float属性不为none. position属性不为static和relative. display属性为下列之一:table-cell,table-caption,inline-block, flex,inline-flex. overflow属性不为visible. 我们可以用CSS为container容器附加上述条件,如overflow: scroll, overflow: hidden, display: flex, float:

  • ChangFaHu
7 min read

关于缓存的学习笔记

浏览器缓存 1.http中header各字段作用及区别: 作用: Expires: 告诉浏览器在过期时间前可以使用缓存副本; Cache-Control: 参数(no-cache, no-store, max-age, public, private); Last-Modified:告诉浏览器资源最后修改时间; ETag: 告诉浏览器当前资源在服务器的唯一标识符(规则服务器决定) 区别: Expires 与 Cache-Controle:Cache-Control与Expires的作用一致,都是指明当前资源的有效期,控制浏览器是否直接从浏览器缓存取数据还是重新发请求到服务器取数据。只不过Cache-Control的选择更多,设置更细致; ETag 与 Last-Modified: 你可能会觉得使用Last-Modified已经足以让浏览器知道本地的缓存副本是否足够新,为什么还需要Etag(实体标识)

  • ChangFaHu
4 min read