Vue 学习笔记 — 组件初始化

时间：2021-02-11 19:42:03

简书

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

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

Vue 学习笔记 — 组件初始化

测试一下，结果是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>

效果：

Vue 学习笔记 — 组件初始化

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

Vue 学习笔记 — 组件初始化

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

Vue 学习笔记 — 组件初始化

结果杯具就发生了：

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 ...
})
标签：

相关文章