Vue 学习笔记 — 组件初始化

来源:简书 分类: 文章浏览史 发布时间:2020-09-07 09:46:57 最后更新:2020-09-07 浏览:109
转载声明:
本文为摘录自“简书”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
2020-09-07 09:46:57

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

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

测试一下,结果是propsdata无法共存,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 ...
})
php技术微信