理解vue的生命周期钩子

qpal 发布于2019-08-20 17:41 / 2422人阅读

摘要：实例有一个完整的生命周期，从开始创建到实例销毁整个过程，都提供了事件钩子，给我们提供了执行自定义逻辑的机会。例如上面的例子中，初始化的时候，会赋值给如下图当执行时，里边的方法就会执行比如例子中的

Vue 实例有一个完整的生命周期，从开始创建到实例销毁整个过程，vue都提供了事件钩子，给我们提供了执行自定义逻辑的机会。

官网提供的生命周期图示：

例如，在实例挂载完成，模版中的html渲染到页面之后，可以通过mounted进行我们自定义的事件：

var vm = new Vue({
  data: {
    a: “实例挂载完成”
  },
  mounted: function () {
      console.log(this.a)
  }
})

生命周期钩子的使用方法就是在vue实例化的参数中，添加上mounted，beforeMount等方法。

那么，他们究竟是如何实现的呢？

查看vue源码，会发现在vue实例初始化（_init）、挂载（$mount ）等过程中，都调用了一个叫callHook的方法，如下图：

vue在处理生命周期的lifecycle.js（src/core/instance/lifecycle.js）中定义了一个callHook函数：

export function callHook (vm: Component, hook: string) {
  const handlers = vm.$options[hook]
  if (handlers) {
    for (let i = 0, j = handlers.length; i < j; i++) {
      try {
        handlers[i].call(vm)
      } catch (e) {
        handleError(e, vm, `${hook} hook`)
      }
    }
  }
  if (vm._hasHookEvent) {
    vm.$emit("hook:" + hook)
  }
}

可以看出，vue实例在各个生命周期阶段，都会去调用钩子callHook，当options中有对应的内容时，就会去运行相关的方法。

例如上面的例子中，vue初始化的时候，会赋值给$options

vm.$options如下图：

当执行callHook(vm, ‘mounted’)时，$options.mounted里边的方法就会执行

比如例子中的 console.log(this.a)

云服务器 GPU服务器线程的生命周期 bug的生命周期 activity的生命周期 ios应用的生命周期

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83774.html

详解vue生命周期

摘要：注意看下此时还是没有选项钩子函数和间的生命周期在这一阶段发生的事情还是比较多的。钩子函数和钩子函数间的生命周期当发现中的数据发生了改变，会触发对应组件的重新渲染，先后调用和钩子函数。首先，每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期。首先看一张图吧~这是官方文档上的图片相信大家一定都会很熟悉： showImg(https://segmentfau...

svtter 2019-08-21 16:47 评论0 收藏0
Vue中父子组件生命周期执行顺序初探

摘要：结论父子组件生命周期钩子的执行顺序遵循从外到内，然后再从内到外，不管嵌套几层深，也遵循这个规律。组件化的设计思路大抵相同，中父子组件生命周期钩子执行顺序，具体没做探究，但是值得一提的是父组件的也是晚于子组件执行的。如今前端框架都流行组件化，页面元素都可以使用组件进行高度概括，那么处理组件之间的关系就如同处理页面架构一样重要。正确理解组件之间的关系，才能让代码按照我们与预料方式工作。最...

Yumenokanata 2019-08-23 10:41 评论0 收藏0
Vue 实例中的生命周期钩子详解

摘要：实例在文档中经常会使用这个变量名表示实例，在实例化时，需要传入一个选项对象，它可以包含数据模板挂载元素方法生命周期钩子等选项。通俗说就是实例从创建到销毁的过程，就是生命周期。 Vue 实例中的生命周期钩子 Vue 框架的入口就是 Vue 实例，其实就是框架中的 view model ，它包含页面中的业务处理逻辑、数据模型等，它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程...

gityuan 2019-08-20 15:16 评论0 收藏0
如何解释vue的生命周期才能令面试官满意？

摘要：如果你只是简单罗列出这几个钩子函数的名称，不具体深入阐述的话，你这样的回答很难令面试官满意。那么接下来，闰土大叔将手摸手教你如何深入浅出地说出令面试官满意的有亮点的回答。当面试官问：谈谈你对vue的生命周期的理解，听到这句话你是不是心里暗自窃喜：这也太容易了吧，不就是beforeCreate、created、beforeMount、mounted、beforeUpdate、updat...

liangdas 2019-08-22 16:18 评论0 收藏0
标注图+部分举例聊聊Vue生命周期

摘要：天王盖地虎钩子事件得到的结果是小总结实例创建完成后，我们能读取到数据的值，但是还没生成，挂载属性还不存在。此时的阶段解读为挂载完毕阶段我们再打印下此时看看钩子事件得到的结果是可见，已经成功渲染成里面对应的值天王盖地虎了。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。现在项目中遇到了，好好回头总结一波Vue生命周期，以后用到的时候再来翻翻。啥叫V...

Aceyclee 2019-08-23 12:36 评论0 收藏0