Vue的实例、生命周期与Vue脚手架（vue-cli）实例详解

var vm = new Vue({// 选项})

Root Instance
└─ TodoList
├─ TodoItem
│ ├─ DeleteTodoButton
│ └─ EditTodoButton
└─ TodoListFooter
├─ ClearTodosButton
└─ TodoListStatistics

// 我们的数据对象
var data = { a: 1 }
// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
 data: data
})
// 他们引用相同的对象！
vm.a === data.a // => true
// 设置属性也会影响到原始数据
vm.a = 2
data.a // => 2
// ... 反之亦然
data.a = 3
vm.a // => 3

vm.b = 'hi'

data: {
newTodoText: '',
visitCount: 0,
hideCompletedTodos: false,
todos: [],
error: null
}

var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
})
vm.＄data === data // => true
vm.＄el === document.getElementById('example') // => true
// ＄watch 是一个实例方法
vm.＄watch('a', function (newValue, oldValue) {
// 这个回调将在 `vm.a` 改变后调用
})

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对象

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 }; // 子组件的定义
 transitions?: { [key: string]: Object };
 filters?: { [key: string]: Function }; // 过滤器
 // context
 provide?: { [key: string | Symbol]: any } | () => { [key: string | Symbol]: any };
 inject?: { [key: string]: string | Symbol } | Array;
 // component v-model customization
 model?: {
 prop?: string;
 event?: string;
 };
 // misc
 parent?: Component; // 父组件实例
 mixins?: Array