分析上一節代碼中的school組件:
該組件是一個名為VueCompinent的構造函數。
截取部分vue.js源碼,分析Vue.extend:
// 定義一個名為VueComponent的構造函數對象Sub,往Sub對象調用_init(options)方法,參數為配置項:optionsvar Sub = function VueComponent(options) {this._init(options);};// 定義了一個Vue.extend函數,參數:extendOptions,返回值為構造函數對象Sub。Vue.extend = function (extendOptions) {...var Sub = function VueComponent(options) {this._init(options);};...return Sub;};
關于VueComponent:
1、school組件本質是一個名為VueComponent的構造函數,通過Vue.extend方法生成的。
2、我們只需要寫<school/>或<school></school>,Vue解析時會幫我們創建school組件的實例對象,即Vue幫我們執行的:new VueComponent(options)。
3、特別注意:每次調用Vue.extend,返回的都是一個全新的VueCompinent!!!(VueComponent構造函數所創建的新對象,同屬于VueComponent一類,即便配置項一樣,新對象之間內存分配的地址不同,對象也互不相同)
4、關于this指向:
(1).組件配置中:
data、methods、watch、computed中的函數,它們的this指向都是【VueCompinent實例對象】
(1).new Vue(options)配置中:
data、methods、watch、computed中的函數,它們的this指向都是【Vue實例對象】
5、VueCompinent的實例對象,以后簡稱vc(也可稱之為:組件實例對象)。Vue的實例對象,以后簡稱vm。
Vue實例對象【vm】 VS 組件實例對象【vc】
1、【官方解釋】組件是可復用的Vue實例,它們與new Vue接受相同的選項,例如 data、computed、watch、methods 以及生命周期鉤子等。僅有的例外是像 el 這樣根實例特有的選項。
-------------------------------------------------------------------------------------------------------------------------
簡而言之:組件實例對象【vm】和Vue實例對象【vc】很像,【vc】有的功能【vm】都有,但【vc】沒有el選項(由【vm】統一管理el)。
2、【官方解釋】一個組件的data選項必須是一個函數,因此每個實例可以維護一份被遣返對象的獨立的拷貝。
-------------------------------------------------------------------------------------------------------------------------
簡而言之:關于data選項,【vm】可以使用函數或對象形式創建,但【vc】必須使用函數形式創建。