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

一、Vue的实例

1.1、创建一个 Vue 的实例

每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的：

rush:js;"> var vm = new Vue({// 选项})

虽然没有完全遵循 MVVM 模型，Vue 的设计无疑受到了它的启发。因此在文档中经常会使用 vm (viewmodel 的简称) 这个变量名表示 Vue 实例。

1、vue.js就是一个构造器，通过构造器Vue来实例化一个对象；例如：var vm = new Vue({});

2、实例化Vue时，需要传入一个参数（选项对象）；

3、参数：选项对象可以包含，数据(data)、挂载元素(el)、方法(methods)、模版(template)、生命周期函数等等；

4、扩展构造器Vue，从而用预定义选项创建可复用的组件构造器，所有组件都是被扩展的Vue的实例，使用Vue.extend({})来扩展；

注意：尽管可以命令式地创建扩展实例，不过在多数情况下建议将组件构造器注册为一个自定义元素，然后声明式地用在模板中。

当创建一个 Vue 实例时，你可以传入一个选项对象。这篇教程主要描述的就是如何使用这些选项来创建你想要的行为。作为参考，你也可以在 API 文档 中浏览完整的选项列表。

一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。举个例子，一个 todo 应用的组件树可以是这样的：

rush:js;"> Root Instance └─ TodoList ├─ TodoItem │ ├─ Deletetodobutton │ └─ EditTodobutton └─ TodoListFooter ├─ ClearTodosButton └─ TodoListStatistics

我们会在稍后的组件系统章节具体展开。不过现在，你只需要明白所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象即可 (一些根实例特有的选项除外)。

1.2、数据与方法

当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

true // 设置属性也会影响到原始数据 vm.a = 2 data.a // => 2 // ... 反之亦然 data.a = 3 vm.a // => 3

当这些数据改变时，视图会进行重渲染。 值得注意的是只有当实例被创建时 data 中存在的属性是响应式的 。也就是说如果你添加一个新的属性，像：

rush:js;"> vm.b = 'hi'

那么对 b 的改动将不会触发任何视图的更新。

示例：

rush:js;"> <Meta charset="UTF-8">

结果：

如果你知道你会在晚些时候需要一个属性，但是一开始它为空或不存在，那么你仅需要设置一些初始值。比如：

rush:js;"> data: { newTodoText: '',visitCount: 0,hideCompletedTodos: false,todos: [],error: null }

除了 data 属性，Vue 实例暴露了一些有用的实例属性与方法。它们都有前缀 ＄，以便与用户定义的属性区分开来。例如：

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

在未来，你可以在 API 参考查阅到完整的实例属性和方法的列表 。

1.3、实例属性

解释

createElement(vm,a,d,false) // 用户自定义render方法时，传入的参数 vm.＄createElement = (a,true) vm._props // 被observe的存储props数据的对象 vm._data // 被observe的存储data数据的对象 vm._computedWatchers // 保存计算属性创建的watcher对象

1.4、实例方法

vm.＄options其实也就是我们new Vue(options)options这个选项对象可传入的属性

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