脚本宝典收集整理的这篇文章主要介绍了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生命周期全部内容，希望文章能够帮你解决vue框架-基础2-vue生命周期所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。