Vue 學習筆記 元件初始化

2022-01-11 05:47:02 字數 2557 閱讀 3955

在vue中有3個概念很容易搞混,data,computed,props,特別是我們這些原後端開發人員。

new vue(,

props: ["id"],

computed:

}});

測試一下,結果是propsdata無法共存,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...