Vue2.5笔记：Vue的实例与生命周期

理解与认识 Vue 的实例是咱们学习 Vue 很是重要的一步，也是很是必须的，由于实例是它的一个起点，也是它的一个入口，只有咱们建立一个 Vue 实例以后，咱们才行利用它进行一些列的操做。

首先 Vue 没有彻底遵照 MVVM 的架构模式，可是它的设计也受到了该模式的启发，Vue 也就是在该模式中起到 VM（ViewModel） 的做用。若是有对 MVC、MVVM 模式不了解的同窗能够参考阮一峰老师的 《MVC，MVP 和 MVVM 的图示》 这篇文章能够对它们有一个简单对了解。

Vue 的实例从建立到使用以及销毁的过程当中会有多个生命周期钩子，这些钩子在咱们整个的实例过程当中起到了很是重要，并且有了这些钩子咱们能够很好的去控制咱们的整个过程的逻辑。

Vue 借鉴了 MVVM 架构模式，Vue 在整个过程当中起到的就是 VM 的做用，若是咱们对 MVVM 有过了解，V 即 View（ 视图层）就是咱们看到的模版HTML，M 即 Model（数据层）就是咱们想要显示出来的数据，Vue 就是负责把 View－Model 链接起来。

mvvm

建立Vue实例

每一个 Vue 实例都是经过 Vue 函数来建立的，在 Vue 中的每个应用都是会建立一个实例，组件也是一个实例。

当建立一个 vue 实例的时候，咱们能够传入一个选项对象，如data、el、methods、生命周期钩子函数等等。

var vm = new Vue({
  el: '#root',
  data: {
    name: 'Modeng'
  },
  methods: {
    handleClick () {
        console.log(123);
    }
  }
})

从上面的图片咱们看到咱们的实例已经挂在到 DOM 元素上，数据和方法都已经拥有。最后咱们就是要把这些数据怎么显示到咱们到眼前，这里就须要用到 Vue 另外一个知识点 模版了。

<div id="root">
    <div>Hello {{name}}</div>
</div>

咱们只须要使用 模版的 {{}} 语法将咱们的数据绑定到视图上就能显示咱们要的结果。

若是你觉得仅仅是这么简单那你就太年轻了，咱们也就没有使用 Vue 的必要了，当咱们建立一个实例时，Vue 会把视图与数据进行链接，当咱们修改数据时，视图会自动更新。

有一点值得咱们注意的是，咱们在使用 Vue 实例时，须要关注下 this，千万不要在含有 this 的函数时，使用箭头函数，由于箭头函数是没有绑定 this 的，因此会出现问题。

实例的属性、方法与 API

除了上面咱们所说的数据的属性之外，Vue 给咱们暴露了不少的实例与方法，例如： 「$data」、「$el」、「$watch」、「$refs」、「$watch」、「$mount」等等，若是你对等多的实例属性与方法感兴趣能够移至 API 参考，不事后面咱们也会介绍一些经常使用的方法和属性 watch、methods、refs等

Vue 实例不尽带了不少等实例方法与属性，还自带了不少 API 其中全局的有 11 个，全局配置的有 9个，若是想查看也是在上面的连接中。

生命周期构子

Vue 实例会有一个完整的生命周期，从实例的初始化，设置数据、编译模板、将实例挂载到 DOM 更新数据，销毁等一系列的过程，称为生命周期，在不一样的过程当中会自动执行一些函数，咱们称为生命周期钩子函数。Vue 给了咱们不少 生命周期函数，咱们能够在整个生命周期的不一样过程当中使用它。

下图展现了实例的生命周期。你不须要立马弄明白全部的东西，不过随着你的不断学习和使用，它的参考价值会愈来愈高。

钩子函数

• beforeCreate： 在实例初始化以后，数据观测 (data observer) 和 event/watcher 事件配置以前被调用。
• created：在实例建立完成后被当即调用。在这一步，实例已完成如下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，「$el」 属性目前不可见。
• beforeMount：在挂载开始以前被调用：相关的 render 函数首次被调用。
• mounted：el 被新建立的 vm.$el 替换，并挂载到实例上去以后调用该钩子。若是 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
• beforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁以前。这里适合在更新以前访问现有的 DOM，好比手动移除已添加的事件监听器。
• updated：因为数据更改致使的虚拟 DOM 从新渲染和打补丁，在这以后会调用该钩子。
  当这个钩子被调用时，组件 DOM 已经更新，因此你如今能够执行依赖于 DOM 的操做。然而在大多数状况下，你应该避免在此期间更改状态。若是要相应状态改变，一般最好使用计算属性或 watcher 取而代之。
• activated：keep-alive 组件激活时调用。
• deactivated：keep-alive 组件停用时调用。
• beforeDestroy：实例销毁以前调用。在这一步，实例仍然彻底可用。
• destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的全部东西都会解绑定，全部的事件监听器会被移除，全部的子实例也会被销毁。
• errorCaptured：2.5.0+ 新增，当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子能够返回 false 以阻止该错误继续向上传播。

var vm = new Vue({
  el: "#root",
  data: {
    name: "Modeng",
  },
  beforeCreate() {
    console.log("实例初始化");
    console.log("beforeCreate");
    console.log("------------------");
  },
  created() {
    console.log("实例建立完成");
    console.log("created");
    console.log("------------------");
  },
  beforeMount () {
    console.log("实例挂载DOM以前");
    console.log("beforeMount");
    console.log("------------------");
  },
  mounted () {
    console.log("实例挂载DOM完成");
    console.log("mounted");
    console.log("------------------");
  },
  beforeUpdate () {
    console.log("实例的数据更新以前");
    console.log("beforeUpdate");
    console.log("------------------");
  },
  updated () {
    console.log("实例的数据更新完成，DOM更新");
    console.log("updated");
    console.log("------------------");
  },
  beforeDestroy () {
    console.log("实例销毁以前");
    console.log("beforeDestory");
    console.log("------------------");
  },
  destroyed () {
    console.log("实例销毁完成");
    console.log("destoryed");
    console.log("------------------");
  }
});

咱们能够看到从实例开始建立到渲染挂载到 DOM 结束后，会执行的钩子函数，下面咱们来尝试进行数据的更新与销毁实例看看钩子是怎么执行的。

总结

这边文章主要是介绍了下 Vue 的实例与生命周期，在Vue 实例化的过程当中咱们能够添加许多可选对象，好比 data、methods、生命周期钩子函数等，让实例产生咱们想要的行为。

实例建立完成以后，咱们就可让它与视图同步，只要我修改数据视图会自动跟着同步。

在实例的建立过程当中会存在许多的生命周期钩子函数，它会在咱们实例的不一样阶段产生不一样的效果。

关注个人微信公众号：六小登登，更多干货文章，欢迎一块儿交流。人人均可以成为高手。我是一个会技术，又写干货的码农。欢迎勾搭。