還是先從瀏覽器直觀的感受下實例屬性和方法。

實例屬性：

對應解釋如下：

vm._uid // 自增的id vm._isVue // 標示是vue對象，避免被observe vm._renderProxy // Proxy代理對象 vm._self // 當前vm實例 vm.$parent // 用于自定義子組件中，指向父組件的實例 vm.$root // 指向根vm實例 vm.$children // 當前組件的子組件實例數組 vm.$refs vm._watcher = null vm._inactive = null vm._directInactive = false vm._isMounted = false // 標識是否已掛載 vm._isDestroyed = false // 標識是否已銷毀 vm._isBeingDestroyed = false // 標識是否正在銷毀 vm._events // 當前元素上綁定的自定義事件 vm._hasHookEvent // 標示是否有hook:開頭的事件 vm.$vnode // 當前自定義組件在父組件中的vnode，等同于vm.$options._parentVnode vm._vnode // 當前組件的vnode vm._staticTrees // 當前組件模板內分析出的靜態內容的render函數數組 vm.$el // 當前組件對應的根元素 vm.$slots // 定義在父組件中的slots，是個對象鍵為name，值為響應的數組 vm.$scopedSlots = emptyObject // 內部render函數使用的創建vnode的方法 vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false) // 用戶自定義render方法時，傳入的參數 vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)vm._props // 被observe的存儲props數據的對象 vm._data // 被observe的存儲data數據的對象 vm._computedWatchers // 保存計算屬性創建的watcher對象

看下實例方法,其實就是Vue原型上的方法了

?

接下來主要看下vm.$options,其實也就是我們new Vue(options)options這個選項對象可傳入的屬性，一個很吊的對象。

declare type ComponentOptions = {// datadata: Object | Function | void; // 傳入的data數據props?: { [key: string]: PropOptions }; // props傳入的數據propsData?: ?Object; // 對于自定義組件，父級通過`props`傳過來的數據computed?: { // 傳入的計算屬性[key: string]: Function | {get?: Function;set?: Function;cache?: boolean}};methods?: { [key: string]: Function }; // 傳入的方法watch?: { [key: string]: Function | string }; // 傳入的watch// DOMel?: string | Element; // 傳入的el字符串template?: string; // 傳入的模板字符串render: (h: () => VNode) => VNode; // 傳入的render函數renderError?: (h: () => VNode, err: Error) => VNode;staticRenderFns?: Array<() => VNode>;// 鉤子函數beforeCreate?: Function;created?: Function;beforeMount?: Function;mounted?: Function;beforeUpdate?: Function;updated?: Function;activated?: Function;deactivated?: Function;beforeDestroy?: Function;destroyed?: Function;// assetsdirectives?: { [key: string]: Object }; // 指令components?: { [key: string]: Class<Component> }; // 子組件的定義transitions?: { [key: string]: Object };filters?: { [key: string]: Function }; // 過濾器// contextprovide?: { [key: string | Symbol]: any } | () => { [key: string | Symbol]: any };inject?: { [key: string]: string | Symbol } | Array<string>;// component v-model customizationmodel?: {prop?: string;event?: string;};// miscparent?: Component; // 父組件實例mixins?: Array<Object>; // mixins傳入的數據name?: string; // 當前的組件名extends?: Class<Component> | Object; // extends傳入的數據delimiters?: [string, string]; // 模板分隔符// 私有屬性，均為內部創建自定義組件的對象時使用_isComponent?: true; // 是否是組件_propKeys?: Array<string>; // props傳入對象的鍵數組_parentVnode?: VNode; // 當前組件，在父組件中的VNode對象_parentListeners?: ?Object; // 當前組件，在父組件上綁定的事件_renderChildren?: ?Array<VNode>; // 父組件中定義在當前元素內的子元素的VNode數組（slot）_componentTag: ?string; // 自定義標簽名_scopeId: ?string;_base: Class<Component>; // Vue_parentElm: ?Node; // 當前自定義組件的父級dom結點_refElm: ?Node; // 當前元素的nextSlibing元素，即當前dom要插入到_parentElm結點下的_refElm前 }

?

總結: 關于vue實例的屬性和方法整理及new Vue(options) 中options對象的整理。

感謝濤哥：https://github.com/liutao/vue2.0-source/blob/master/Vue%E5%AE%9E%E4%BE%8B%E5%B1%9E%E6%80%A7.md

轉載于:https://www.cnblogs.com/sorrowx/p/7967137.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的Vue2.x源码学习笔记-Vue实例的属性和方法整理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。