Vue2.x源碼學習筆記-Vue實例的屬性和方法整理

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

實例屬性：

對應解釋如下：

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 = {
  // data
  data: 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

  // DOM
  el?: 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;

  // assets
  directives?: { [key: string]: Object }; // 指令
  components?: { [key: string]: Class<Component> }; // 子組件的定義
  transitions?: { [key: string]: Object };
  filters?: { [key: string]: Function }; // 過濾器

  // context
  provide?: { [key: string | Symbol]: any } | () => { [key: string | Symbol]: any };
  inject?: { [key: string]: string | Symbol } | Array<string>;

  // component v-model customization
  model?: {
    prop?: string;
    event?: string;
  };

  // misc
  parent?: 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