vue 2.5.1ソースの学習Vue.extedとdataの統合戦略
1.子類親類
2.Vue.exted() //vueのサブクラスを作成します
コンポーネントのシンタックス
新規init Exend
=>Vue.exted
3.strat.data
=>>if(vm){サブコンポーネントのdataの値はメソッドfunction=>mergDataorFn（）//データの統合です。
=>else{}//例によって結合されたdataは実際に関数mergDataorFnである。
=>>mergDataorFn if(！vm)mergDataFn=>mergData()
else==>mergdInstance DataFn=>mergData()
mergData(to，from)//最終合併
jquery.exted/深copyと浅copy
以上は小编が绍介したvue 2.5.1ソースの学习のVue.extedとdataの合并戦略です。皆さんに助けてほしいです。ここでも私たちのサイトを応援してくれてありがとうございます。
本文があなたのためになると思ったら、転載を歓迎します。出所を明記してください。ありがとうございます。
2.Vue.exted() //vueのサブクラスを作成します
コンポーネントのシンタックス
Vue.extend(options)Profile().$mount('#app') //appにかけ、アプリを置き換える新規init Exend
=>Vue.exted
3.strat.data
=>>if(vm){サブコンポーネントのdataの値はメソッドfunction=>mergDataorFn（）//データの統合です。
=>else{}//例によって結合されたdataは実際に関数mergDataorFnである。
=>>mergDataorFn if(！vm)mergDataFn=>mergData()
else==>mergdInstance DataFn=>mergData()
mergData(to，from)//最終合併
jquery.exted/深copyと浅copy
// （ ）
// 1.
/*
2.Vue.extend() // vue
Vue.extend(options)
Profile().$mount('#app') // app ， app
initExend
==》 Vue.extend
*/
/* 3. strat.data
==> if(!vm){ data function ==> mergeDataorFn()} //
==> else {} // data mergeDataorFn
==》 mergeDataorFn if(!vm) mergeDataFn ==> mergeData()
else ==》mergedInstanceDataFn ==>mergeData()
mergeData(to,from) //
jquery.extend // copy copy
*/
(function(global,factory){
// cmd
typeof exports === 'object' && module !== 'undefined' ? module.exports = factory():
// Amd
typeof define === 'function' && define.amd ? define(factory) : global.Vue = factory();
})(this,function(){
var uip = 0;
function warn(string){
console.error('Vue Wran:' + string)
}
function resolveConstructorOptions(Con){
var options = Con.options;
// vm
return options
}
var hasOwnPropeerty = Object.prototype.hasOwnProperty
function hasOwn(obj , key){
return hasOwnPropeerty.call(obj,key)
}
function makeMap(str, expectsLoweraseC){
if(expectsLoweraseC){
str = str.toLowerCase()
}
var map = Object.create(null)
var list = str.split(',')
for(var i = 0 ; i < list.length; i++){
map[list[i]] = true
}
return function(key){
return map[key]
}
}
var isbuiltInTag = makeMap('slot,component',true)
var isHTMLTag = makeMap(
'html,body,base,head,link,meta,style,title,' +
'address,article,aside,footer,header,h1,h2,h3,h4,h5,h6,hgroup,nav,section,' +
'div,dd,dl,dt,figcaption,figure,picture,hr,img,li,main,ol,p,pre,ul,' +
'a,b,abbr,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rp,rt,rtc,ruby,' +
's,samp,small,span,strong,sub,sup,time,u,var,wbr,area,audio,map,track,video,' +
'embed,object,param,source,canvas,script,noscript,del,ins,' +
'caption,col,colgroup,table,thead,tbody,td,th,tr,' +
'button,datalist,fieldset,form,input,label,legend,meter,optgroup,option,' +
'output,progress,select,textarea,' +
'details,dialog,menu,menuitem,summary,' +
'content,element,shadow,template,blockquote,iframe,tfoot'
);
var isSVG = makeMap(
'svg,animate,circle,clippath,cursor,defs,desc,ellipse,filter,font-face,' +
'foreignObject,g,glyph,image,line,marker,mask,missing-glyph,path,pattern,' +
'polygon,polyline,rect,switch,symbol,text,textpath,tspan,use,view',
true
);
var isReservedTag = function(key){
return isHTMLTag(key) || isSVG(key)
}
function validataComponentName(key){
// component
// ，
if(!(/^[a-zA-Z][\w-]*$/g.test(key))){
warn(' ， ')
}
// 1. ，2. html , avg
if( isbuiltInTag(key) || isReservedTag(key)){
warn(' html avg ')
}
}
function checkComonpents(child){
for(var key in child.component){
validataComponentName(key)
}
}
//
var config = {
//
optionMergeStrategies:{}
}
var strats = config.optionMergeStrategies
strats.el = function(parent,child , key , vm){
if(!vm){
warn(' '+key+' vue ')
}
return defaultStrat(parent,child , key , vm)
}
function mergeData(to,form){
//
if(!form){
return to
}
}
function mergeDataorFn(parentVal,childVal,vm){
// parentVal childVal
if(!vm){
if(!childVal){
return parentVal
}
if(!parentVal){
return childVal
}
return function mergeDataFn(parentVal,childVal,vm){//
// data data
return mergeData(
typeof parentVal === 'function' ? parentVal.call(this,this) : parentVal, // -----
typeof childVal === 'function' ? childVal.call(this,this): childVal) // -----
}
}else{ // vue
return function mergeInstanceDataFn(parentVal,childVal,vm){//
var InstanceData = typeof childVal === 'function' ? childVal.call(vm,vm): childVal; // -----
var defaultData = typeof parentVal === 'function' ? parent.call(vm,vm): parentVal; // -----
if(InstanceData){
return mergeData(parentVal,childVal)
}else{ // -----
defaultData
}
}
}
}
strats.data = function(parent,child , key , vm){
if(!vm){
// console.log(typeof child === 'function')
if(child && !(typeof child === 'function')){
warn('data function')
}
return mergeDataorFn(parent,child)
}
return mergeDataorFn(parent,child,vm)
}
function defaultStrat(parent,child , key , vm){
return child === undefined ? parent :child ;
}
function mergeOptions(parent,child,vm){
var options = {}
// component
checkComonpents(child)
// console.log(parent, child)
for(key in parent){
magerField(key)
}
for(key in child){
if(!hasOwn(parent ,key)){ // parent
magerField(key) // ----
}
}
//
function magerField(key){
//
// console.log(key)
var result = strats[key] || defaultStrat // ---
options[key] = result(parent[key],child[key] , key , vm)
}
// console.log(options)
return options
}
function initMinxin(options){
Vue.prototype._init = function(options){
var vm = this
// vue
vm._uip = uip++ // //-------
vm.$options =mergeOptions(resolveConstructorOptions(vm.constructor),options,vm)
}
}
function Vue(options){
//
if(!(this instanceof Vue)){ //-------
warn('Vue ， new ')
}
this._init(options)
}
initMinxin() // 1: 2: 。
Vue.options = {
components: {},
directives:{},
_bash: Vue
}
function initExend(Vue){
Vue.extend = function(extendOptions){
extendOptions = extendOptions || {} // -----
var Super = this
var Child = function VueComponent() {
this._init(options)
}
Child.prototype = Object.create(Super.prototype)
Child.prototype.constructor = Child // constructor
Child.options = mergeOptions(Super.options,extendOptions)
// 。
Child.extend = Vue.extend
return Child
}
}
initExend(Vue)
return Vue
})
<body>
<div id="app">
<huml></huml>
</div>
<script src="vue.js"></script>
<!-- <script src="vue2.5.1.js"></script> -->
<script type="text/javascript">
var componentA = {
el: "#app"
}
var vm = new Vue({
el:"#app",
data: {
message: "hello Vue",
key: "wodow"
},
components:{
huml: componentA
}
})
// console.log(Vue)
var Parent = Vue.extend({
data: function() {}
})
var Child = Parent.extend({});
console.log(vm.$options)
</script>
</body>以上は小编が绍介したvue 2.5.1ソースの学习のVue.extedとdataの合并戦略です。皆さんに助けてほしいです。ここでも私たちのサイトを応援してくれてありがとうございます。
本文があなたのためになると思ったら、転載を歓迎します。出所を明記してください。ありがとうございます。