Vue 学习笔记 — 组件初始化

2017-04-15 本文已影响0人冰麟轻武

在vue中有3个概念很容易搞混，data，computed，props，特别是我们这些原后端开发人员。

new Vue({
    el: "#x",
    data: { id: 1 },
    props: ["id"],
    computed: {
        id: function () { return 3; }
    }
});

测试一下，结果是props和data无法共存，data优先级高于computed；

我经常是吧组件封装成一个extend来使用的，比如这样：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="js/vue2.2.6.js"></script>
    <script src="js/vCheckBox.js"></script>
</head>
<body>
    <input type="checkbox" id="test1" />
    <script>
        var test1 = new vCheckBox({
            el: "#test1",
            data: {
                text: "测试多选框"
            }
        });
    </script>
</body>
</html>

效果：

一开始用的还挺嗨的，直到有一次一个extend用了大量的conputed

然后这个组件对应的文档是这样的：

结果杯具就发生了：

var pager = new vPager({
    el: "#pager",
    data: {
        pageSize: 10
    }
});

刚才文章开头说了，data的优先级是高于computed的，所以导致pageSize的计算属性被覆盖了，结果可想而知。
所以最后使用的时候改成了这样：

var pager = new vPager({
    el: "#pager",
    created: function () {
        this.pageSize = 10;
    }
});

但是总感觉很不舒服

所以我决定写一个mixin来优化这个初始化的操作；

var pager = new vPager({
    el: "#pager",
    init: {
        pageSize: 10
    }
});

我希望达到这样的效果，无论是data或者computed都可以被赋值

vue.mixin({
    created: function () {
        var init = this.$options.init;
        if (typeof init === "object") {
            for (var key in init) {
                if (init.hasOwnProperty(key) && this.hasOwnProperty(key)) {
                    this[key] = init[key];
                }
            }
        }
    }
});

这是最初的样子，挺简单的，经过一段时间的使用，又增加了一些功能，最后的变成了这样子：

(function (vue) {
    if (vue == null) return;
    vue.config.optionMergeStrategies.init = function (parent, child) { return child; }
    vue.mixin({
        beforeCreate: function () {
            var opt = this.$options;
            if (opt.init === undefined) return;
            if (opt.created == null) {
                opt.created = [];
            }
            var me = this;

            opt.created.push(init);
            var hasOnInit = "onInit" in opt.methods;
            if (!hasOnInit) {
                opt.methods.onInit = initCallback;
            }
            if ("reInit" in opt.methods === false) {
                opt.methods.reInit = init;
            }
            //--- function ---
            function initCallback(data) {
                if (hasOnInit && typeof me.onInit === "function") {
                    me.onInit.apply(me, arguments);
                }
                setData(data);
                me.$emit("init", { vm: me, data: data });
            }

            function setData(data) {
                if (typeof data === "object") {
                    for (var key in data) {
                        if (data.hasOwnProperty(key) && key in me) {
                            me[key] = data[key];
                        }
                    }
                }
            }

            function init() {
                var initData = me.$options.init;
                var callback = initCallback;
                if (typeof initData === "function") {
                    if (initData.length > 0) {
                        initData = initData.call(me, callback);
                        callback = null;
                    } else {
                        initData = initData.call(me);
                    }
                }

                setData(initData);
                callback && callback(initData);
            }
        }
    });
})(window.Vue);

这是个全局的mixin，为每个存在init选项的Vue实例添加init功能

init功能：

如果init选项为object，则使用init选项的值初始化Vue实例的字段，并触发init事件；
如果init选项为无参的function，执行function后使用返回值初始化Vue实例字段，并触发init事件；
如果init选项为有参的function，则会传入一个回调函数，执行回调函数会触发init事件，可以在init函数中直接返回初始值也可以在回调函数中传入初始值；
为Vue添加一个函数reInit()，用于使用原始init选项重新初始化对象并触发init事件（对象存在reInit成员该功能无效）；
为Vue添加一个函数onInit(data)，用于使用data参数初始化对象并触发init事件；

关闭init功能

要关闭init功能也可以在初始化时将init:undefined，为此需要专门写一个合并选项策略

Vue.config.optionMergeStrategies.init = function (parent, child) { return child; }

策略比较粗暴，直接让子选项覆盖父选项；
除了最初的初始化属性的功能以外还支持init为function的情况：

init 为无参的`function

var pager = new vPager({
    el: "#pager",
    init: function() {
        var p = location.search.slice(1).split(',');
        return {
            pageNumber: p[0] || 1,
            pageSize: p[1] || 20
        }
    }
});

init 为有参的`function，直接返回初始化数据，延迟触发回调

var pager = new vPager({
    el: "#pager",
    init: function (callback) {
        $.ajax({
            ... ,
            context: this
        }).done(function (data) {
            this.pageNumber = data.pageNumber;
            this.pageSize = data.pageSize;
            callback();
        });
        return {
            pageNumber: 1,
            pageSize: 20
        }
    }
});

init 为有参的`function，延迟传入初始化数据并触发回调

var pager = new vPager({
    el: "#pager",
    init: function (callback) {
        $.ajax({
            ... ,
            context: this
        }).done(function (data) {
            callback({
                data.pageNumber,
                data.pageSize
            });
        });
    }
});

init 事件

触发 init 事件

vm.$emit("init", { vm: vm, data: initData })

订阅 init 事件

vm.$on("init", function(event){
    event.vm ...
    event.initData ...
})