一个Vue实例与生命周期钩子函数

一个Vue实例

每个Vue应用都是通过一个Vue函数创建一个新的Vue实例开始的，一个Vue应用通过new vue创建的根Vue实例。

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

---

数据与方法

当一个 Vue 实例被创建时，它将 data 对象中的所有的数据(property )加入到 Vue 的响应式系统中。当这些数据的值发生改变时，视图将会产生“响应”，即页面会匹配更新为新的值。

注意:只有当实例被创建时就已经存在于 data 中的数据才是响应式的。也就是说，如果你控制台添加一个新的数据，比如：vm.b="h1"，那么对b的改动将不会触发任何新的视图更新。如果你知道你晚些时候会用到一个数据，但是一开始这个数据是为空或不存在的，那么你仅需要设置一些初始值，比如：
data: {
  text: '',
  count: 0,
  tobool: false,
  arr: [],
  error: null
}

---

选项数据

当创建一个Vue实例后，你可以传入选项对象。主要就是通过使用这些选项来创建你想要的行为。

选项	描述
el	提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标
data	Vue 实例的数据对象
props	props 可以是数组或对象，用于接收来自父组件的数据
computed	计算属性将被混入到 Vue 实例中
methods	methods 将被混入到 Vue 实例中
watch	个对象，键是需要观察的表达式，值是对应回调函数

---

声明周期钩子

每个Vue实例再被创建时，都有一个完整的生命周期，也就是说，从开始创建、初始化数据、编译模板、挂载Dom、渲染-更新-渲染、销毁等一系列过程。
同时在这个过程中也会运行一些叫做声明周期钩子的函数，这给了用户在不同阶段添加代码的机会。

各阶段钩子函数用意：

钩子函数	事件状态
beforeCreate	实例初始化之后，数据和事件挂载之前，this指向创建的实例，不能访问到data、computed、watch、methods上的方法和数据
created	可访问到data、computed、watch、methods上的方法和数据 ，还没有挂载到Dom上，可初始ajax请求
beforeMount	在挂载开始之前被调用，会找到对应的template，此时HTML还没有被渲染到页面中
mounted	挂载完成，可以通过Dom API获取到Dom节点，此时HTML已经渲染到了页面中，mounted只会执行一次
beforeUpdate	响应数据更新前调用
updated	更新完成后调用
beforeDestroy	Vue实例销毁前调用，实例任然可用，可用this获取到Vue实例
destroyed	Vue实例被销毁之后调用，所有的事件监听器和子实例都会被销毁，该钩子在渲染期间不被调用

示意图如下：