在vue中有3個概念很容易搞混,data,computed,props,特別是我們這些原後端開發人員。
new vue(,
props: ["id"],
computed:
}});
測試一下,結果是props
和data
無法共存,data
優先順序高於computed
;
我經常是吧元件封裝成乙個extend來使用的,比如這樣:
效果:
一開始用的還挺嗨的,直到有一次乙個extend用了大量的conputed
然後這個元件對應的文件是這樣的:
結果杯具就發生了:
var pager = new vpager(
});
剛才文章開頭說了,data
的優先順序是高於computed
的,所以導致pagesize的計算屬性被覆蓋了,結果可想而知。
所以最後使用的時候改成了這樣:
var pager = new vpager(
});
但是總感覺很不舒服所以我決定寫乙個mixin來優化這個初始化的操作;
var pager = new vpager(
});
我希望達到這樣的效果,無論是data或者computed都可以被賦值
vue.mixin(}}
}});
這是最初的樣子,挺簡單的,經過一段時間的使用,又增加了一些功能,最後的變成了這樣子:
(function (vue)
vue.mixin(
var me = this;
opt.created.push(init);
var hasoninit = "oninit" in opt.methods;
if (!hasoninit)
if ("reinit" in opt.methods === false)
//--- function ---
function initcallback(data)
setdata(data);
me.$emit("init", );
}function setdata(data) }}
}function init() else
}setdata(initdata);
callback && callback(initdata);}}
});})(window.vue);
這是個全域性的mixin,為每個存在init選項的vue例項新增init功能init功能:
關閉init功能
要關閉init功能也可以在初始化時將init:undefined
,為此需要專門寫乙個合併選項策略
vue.config.optionmergestrategies.init = function (parent, child)
策略比較粗暴,直接讓子選項覆蓋父選項;
除了最初的初始化屬性的功能以外還支援init為function的情況:
init 為無參的`function
var pager = new vpager(
}});
init 為有參的`function,直接返回初始化資料,延遲觸發**var pager = new vpager().done(function (data) );
return
}});
init 為有參的`function,延遲傳入初始化資料並觸發**var pager = new vpager().done(function (data) );
});}
});
init 事件
觸發 init 事件
vm.$emit("init", )
訂閱 init 事件
vm.$on("init", function(event))
vue 初始化請求例子 Vue例項初始化
vue的建構函式new vue 一切都是從vue的建構函式開始的.當執行了npm run dev的構建過程就是執行這些初始化的過程,首先在node modules中找到vue原始碼,core檔案是對vue核心的包裝,入口檔案index.js,先從乙個建構函式開始,然後在vue的prototype上進...
eCos元件初始化
mingdu.zheng gmail com ecos元件初始化利用了c 靜態物件例項初始化的機制。c 物件在初始化時不像c語言中的靜態變數那樣只是在特定的記憶體單元寫入特定的數值,c 物件在初始化時將會呼叫該物件類的建構函式來初始化物件。如果c 物件是在函式內宣告,那麼函式執行到物件的宣告處呼叫類...
Swift學習筆記 初始化
swift為結構體提供了預設初始化方法,當結構體所有屬性都有預設值時,可以使用空白初始化方法 struct person var person person 成員初始化方法是預設初始化方法的另外一種形式,注意常量屬性如果有預設值則不能使用初始化方法,因為常量只能初始化一次 struct person...