遇见Vue.js

• 关键词：Vue.js – 读书笔记

二十、Cache

A doubly linked list-based Least Recently Used(LRU) cache.

Will keep most recently used items while discarding least recently used items when its limit is reached.

This is a bare-bone version of Rasmus Andersson’s js-lru.

LRU(Least Recently Used)

Cache类

方法	说明
put(key, value)	返回被删除的
shift()	shift删除Cache里面最近最少使用的项，返回被删除的
get(key)	返回对应的值

props类

初始化props流程

    //设计一个didi-list列表组件
    export default{
        props:{
            gridData: Array,
            fields: Array
        }
    }

compileProps解析后的结果：

gridData会通过hyphenate函数将gridData转换成符合kebab-case规则的grid-data：

    var hyphenateRE = /([a-z\d])([A-Z])/g;
    function hyphenate(str){
        str = "gridData";
        return str.replace(hyphenateRE, '$1-$2').toLowerCase();
    }

fields的转换：

gridData和fields转换成内部prop对象：

其他

在编译props时，会对属性name进行一些验证处理。

在coerce属性配置上我们可以设置转换函数。

type验证：String-Number-Boolean-Function-Object-Array。

default设置一些默认值。

validator可以设置自定义的验证函数。

二十一、events

通过methods对象配置来给模板DOM元素绑定事件，那么如何在Vue.js实例之间以及父子类之间通过事件来通信呢？

events配置是什么

可以理解为一些简单的配置对象：

Key是在实例事件比如$emit调用时传入的参数，是监听的事件名称。

Value是对应的处理函数。我们可以在Vue实例化时通过类似methods的配置项events。

events初始化流程

实例化methods第一步

registerCallbacks和register执行流程分别如下两图：

events的$on执行流程如下，它操作this._events对象，把我们之前传入的sayHi当成key，对应的处理函数当成它的处理函数：

modifyListenerCount执行流程如下：

$emit 触发

使用$emit的语法：

    //vm.$emit(event, [...args])

    var vm = new Vue({
        events: {
            sayHi: function(msg){
                console.log('this is: ' + msg)
            }
        }
    })
    //$emit触发
    vm.$emit('sayHi', 'lzp');

$emit调试：

$once 绑定

相比前面流程中的$on，$once绑定的事件只触发一次，触发完成后就删除了。

    vm.$once(event, callback);
    //源码：
    Vue.prototype.$once = function(event, fn){
        var self = this;
        function on(){
            //依赖 $off
            self.$off(event, on);
            fn.apply(this, arguments);
        }
        on.fn = fn;
        //依赖 $on
        this.$on(event, on);
        return this;
    }

$off 删除

删除事件监听函数。

    vm.$off([event, callback]);
    //没有参数，删除所有的事件监听函数
    //只有事件名称，删除这个事件名称对应的所有监听函数
    //同时指定事件名称和对应的监听函数，只删除对应的
    //源码：包含modifyListenerCount(this, event, -cbs.length)
    }

$dispatch 派发

首先在实例上触发$on对应绑定的监听函数，然后沿着$parent向上冒泡。如果返回false，则直接return了。

    vm.$dispatch(event, [...args]);

$broadcast 广播

遍历当前所有$children，需要返回true，不然就中止了。

    vm.$broadcast(event, [...args]);