本文主要是介绍vue框架-基础2-vue生命周期，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

vue实例

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

• 这就是创建了一个vue的实例
• 这个实例里面有很多的选项，我可以去定义，这个相当重要
• 选项-数据：可以传入data，props等等
• 选项-方法：可以传入，method，等等
• 选项-生命周期：可以传入，beforeCreate，created，等等
• 选项-DOM：可以传入el，template，等等
• 更加详细的再api文档里面有，https://cn.vuejs.org/v2/api

最常用的：

• 1，el，绑定元素
• 2，data，绑定数据
• 3，methods，绑定方法

实例的生命周期

• 每个 Vue 实例在被创建时都要经过一系列的初始化过程
• 这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
• 这个生命周期很重要！！！要重点理解，

比如 created 钩子可以用来在一个实例被创建之后执行代码：
new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

• 生命周期钩子的 this 上下文指向调用它的 Vue 实例。

• 不要在选项 property 或回调上使用箭头函数，比如 created: () => console.log(this.a)

• 因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，经常导致报错

• 完整的生命周期
  1，创建实例之前：beforeCreate
  2，创建实例之后：created
  3，在挂载开始之前：beforeMount 这个挂载应该是指的元素挂载前后
  4，实例被挂载后：mounted
  5，在数据发生改变后，DOM 被更新之前被调用：beforeUpdate
  6，在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用：updated
  7，被 keep-alive 缓存的组件激活时调用：activated
  8，被 keep-alive 缓存的组件失活时调用：deactivated
  9，实例销毁之前调用。在这一步，实例仍然完全可用：beforeDestroy
  10，实例销毁后调用：destroyed
  11，在捕获一个来自后代组件的错误时被调用：errorCaptured

• 现在还是有很多不理解的地方，如果深度使用？

• 这个生命周期的内容，可以一边实践，一边学习，不需要一口气都搞懂，慢慢来，

这篇关于vue框架-基础2-vue生命周期的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！