用Vue实现一个全选指令

最近用vue作了两个项目，都须要实现全选反选的功能，两个项目用了两种实现方法，第一个项目用vue的computed，第二个项目用指令来实现，用起来，发觉指令更加方便。

第一次作全选的时候是刚开始接触vue不久，全选的实现参考了知乎(连接：https://www.zhihu.com/question/37833194/answer/91812053)上的实现方法：
一、从服务器拿到数据，为每一个item设置checked属性
二、计算选中的数量selectCount,若是选中的数量与selectItems的数量相等，则全选selectAll选中
三、点全选时，将每一个item的checked属性置为true，反选时置为false，
四、每次selectItems的属性发生变化时，都将checked的为true的item放入数组checkedGroups中

下面为实现代码：

//全选
    data: function() {
        return {
            selectItems: [],  // 从服务器拿到的数据
        }
    },
    computed: {
        // 全选checkbox绑定的model
        selectAll: {
            get: function() {
                return this.selectCount == this.selectItems.length;
            },
            set: function(value) {
                this.selectItems.forEach(function(item) {
                    item.checked = value;
                });
                return value;
            }
        },
        //选中的数量
        selectCount: {
            get: function() {
                var i = 0;
                this.selectItems.forEach(function(item) {
                    if (item.checked) {
                        i++;
                    }
                });
                return i;
            }
        },
        //选中的数组
        checkedGroups: {
            get: function() {
                var checkedGroups = [];
                this.selectItems.forEach(function(item) {
                    if (item.checked) {
                        checkedGroups.push(item);
                    }
                });
                return checkedGroups;
            }
        }
    }

这种方法用起来不太方便，首先是很难复用，每次要用到的时候都须要写一次computed，其次是selectAll、checkedGroups、selectItems都已经固定，不太灵活。

因此在此次项目中，我用vue的指令从新实现了全选的功能，directive的思路其实跟computed差很少，先上代码：

export default {
    'check-all': {
        twoWay: true,
        params: ['checkData'],
        bind() {
            /**
             - 若是全部的列表的checked属性都为true,则选中全选框,不然不选中全选框
             */
            this.vm.$watch(this.params.checkData, (checkData) => {
                if (checkData.every((item) => item.checked)) {
                    this.set(true);
                } else {
                    this.set(false);
                }
            }, { deep: true });
        },
        // checkAll发生更改时
        update(checkAll) {
            /**
             - 若是全选框被选中,则将列表的全部checked属性转为true,不然转为false
             */
            if (checkAll) {
                this.vm[this.params.checkData].forEach((item) => {
                    item.checked = true;
                });
            } else {
                this.vm[this.params.checkData].forEach((item) => {
                    item.checked = false;
                });
            }
        },
    },
};

调用：

<input type="checkbox" v-model="checkAll" v-check-all="checkAll" check-data="checkData">
        <ul>
            <li v-for="item in checkData">
                <input type="checkbox" v-model="item.checked">
                {{item.text}}
            </li>
        </ul>

先说说这样用的优势：
一、方便使用，在须要用的地方，写上v-check-all指令和check-data就能够
二、全选的model和数组名能够定制，用什么名字均可以，全选的model不想叫checkAll叫checkAllData也能够，数组不想叫checkData叫dataFromServer也能够。

在指令中，指定twoWay为true,就能够用this.set(value)来设置checkAll的值，用params接收绑定指令元素上的属性值checkData,也就是须要操做的数组。

用this.vm获取使用指令的上下文，调用上下文的$watch来监听checkData的变化，若是checkData所有选中，则设置checkAll为true，不然设置checkAll为false。

当指令值（checkAll）发生变化，若是为true，则将checkData的checked属性都设为true，不然为false。至此，一个全选的指令就完成了。

在作这个全选指令的时候，原本想用paramWatchers来监听checkData的变化的，可是发觉checkData变更时，并不会触发paramWatchers的回调，后来看了一下源码才发现，paramWatchers其实也是调用了$watch，可是不支持深度检测：

Directive.prototype._setupParamWatcher = function (key, expression) {
  var self = this;
  var called = false;
  var unwatch = (this._scope || this.vm).$watch(expression, function (val, oldVal) {
    self.params[key] = val;
    // since we are in immediate mode,
    // only call the param change callbacks if this is not the first update.
    if (called) {
      var cb = self.paramWatchers && self.paramWatchers[key];
      if (cb) {
        cb.call(self, val, oldVal);
      }
    } else {
      called = true;
    }
  }, {
    immediate: true,
    user: false
  });(this._paramUnwatchFns || (this._paramUnwatchFns = [])).push(unwatch);
};

本人中途改行，入行1年出头，还有不少东西要学，有不对的地方，还请你们多多指教。为了勉励本身多些总结，开了个微信公众号(front-end-article)，最近都在用vue作项目，近期应该会写一些关于vue的文章。有兴趣能够关注一下哦，或者投稿也能够，多多交流哈：