【Vue原理】生命周期 - 源码版

siberiawolf 发布于2019-08-23 18:32 / 408人阅读

摘要：其中的标志位什么时候设置呢，是在相应的钩子触发之后，具体看下面源码怎么执行钩子呢没错，就是下面这个函数是自己传入的等回调那是怎么用呢比如触发就会这么调用很简单不，直接拿到钩子，然后遍历执行，绑定上下文对象。

写文章不容易，点个赞呗兄弟
专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧
研究基于 Vue版本 【2.5.17】

如果你觉得排版难看，请点击 下面链接 或者拉到下面关注公众号也可以吧

【Vue原理】生命周期 - 源码版

好的！今天探索Vue的生命周期，鉴于生命周期这个东西很简单，所以直接写源码版了

简单到什么程度呢，就是直接执行你的 created 什么的，只是分在什么时候执行而已

但是！我们仍然要分两个问题，理清思路方便记忆

1、生命钩子怎么触发
2、生命钩子在什么时候触发

钩子怎么触发

首先，我设置了下面的例子

那么 el 和 created 就是你传入 Vue 的自定义选项啦

1、把所有同类钩子先合并成数组，然后存放在 vm.$options

这个点跟 mixins 有关，可以看这篇下对钩子的合并处理

【Vue原理】Mixins - 源码版

合并，主要是为了把全局设置的钩子和组件自定义的钩子合并起来，就算你没有全局钩子，也要存在数组里面，比如 created 是下面

vm.$options={
    created:[fn,fn,fn...]
}

2、初始化设置一些标志位，表明是否已经完成某种钩子

function initLifecycle(vm) {
    vm._isMounted = false;
    vm._isDestroyed = false;
    vm._isBeingDestroyed = false;
}

这个函数会在 beforeCreated 钩子触发前调用，在 Vue.prototype._init 中，下个问题源码有显示。其中的标志位什么时候设置呢，是在相应的钩子触发之后，具体看下面源码

3怎么执行钩子呢

没错，就是下面这个函数

function callHook(vm, hook) {    

    // 是自己传入的 created 等回调

    var handlers = vm.$options[hook];    

    if (handlers) {        

    for (var i = 0,j = handlers.length; i < j; i++) {

            handlers[i].call(vm);
        }
    }
}

那是怎么用呢？

比如触发 created 就会这么调用

callHook(vm,"created")

很简单4不4，直接拿到钩子，然后遍历执行，绑定上下文对象。

为什么是数组？上面已经说过啦，一个实例通过mixins可能有很多个相同钩子，所以合并成的数组

钩子什么时候触发

要说讲解钩子在什么时候触发把，好像也没什么讲的，Vue文档都说清楚了，但是很显然，所以我们直接以源码的形式给出来

下面就说了几个钩子，有几个感觉不太常用，就不列出来了

function Vue(opt){    

    this._init(opt)

}



Vue.prototype._init(opt){
    ... 合并选项
    ... 设置初始值 ，事件 等数据
    initLifecycle(vm)
    callHook(vm, "beforeCreate");
    ... 初始化选项等数据
    callHook(vm, "created");
    ...获取挂载的DOM 父节点
    callHook(vm, "beforeMount");
    ...解析模板成渲染函数，并执行渲染函数，生成DOM插入页面
    vm._isMounted = true;
    callHook(vm, "mounted");
}



// 组件更新时会调用这个函数

Vue.prototype._update = function(

    vnode, hydrating

) {    

    if (vm._isMounted) {

        callHook(vm, "beforeUpdate");
    }
    ...重新调用渲染函数，对比旧节点和新节点，得到最小差异，然后只更新这部分页面
    callHook(vm, "updated");
}



// 节点被移除时会调用这个函数

Vue.prototype.$destroy = function() {
    callHook(vm, "beforeDestroy");
    vm._isBeingDestroyed = true;
    ...实例被消除，移除所有 watcher
    vm._isDestroyed = true;
    ...DOM被移除
    callHook(vm, "destroyed");
}

云服务器 GPU云服务器生命周期软件生命周期生命周期理论页面生命周期

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

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

【Vue原理】Mixin - 白话版

摘要：而我觉得现在出一个白话版，是让大家有兴趣去研究源码的时候，可以提前理清一下思路。相当于封装，提取公共部分。显然，今天我不是来教大家怎么用的，怎么用看文档就好了，我是讲解生命的真谛内部的工作原理。而这个不会合并，直接替换掉整个选项写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于 Vue版...

CollinPeng 2019-08-23 18:25 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

khs1994 2019-08-23 18:08 评论0 收藏0
Vue面试中，经常会被问到的面试题/知识点(2019改进版)

摘要：在第一版的基础上进行了优化，新增一些面试题知识点，对一些知识点进行更加深入的描述。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。改变中的状态的唯一途径就是显式地提交。这两个可以在不进行刷新的情况下，操作浏览器的历史纪录。在第一版的基础上进行了优化，新增一些面试题/知识点，对一些知识点进行更加深入的描述。一、对于MVVM的理解？ MVVM 是 Model-View-Vie...

singerye 2019-08-26 11:00 评论0 收藏0