首页 > 编程语言 >Vue源码学习(八):生命周期调用

Vue源码学习(八):生命周期调用

时间:2023-09-28 20:36:42浏览次数:40  
标签:生命周期 handlers vm Vue callHook hook 源码 options

好家伙,

 

Vue源码学习(七):合并生命周期(混入Vue.Mixin)

书接上回,在上一篇中,我们已经实现了合并生命周期

现在,我们要在我们的初始化过程中,注册生命周期

 

1.项目目录

 红框为本篇涉及到的.js文件

 

2.先来看 /utils/index.js

export const HOOKS =[
    "beforeCreated",
    "created",
    "beforeMount",
    "mounted",
    "beforeUpdate",
    "updated",
    "beforeDestory",
    "destroyed",
]

//遍历生命周期
HOOKS.forEach(hooks=>{
    starts[hooks] = mergeHook
})

function mergeHook(parentVal,childVal){
    if(childVal){
        if(parentVal){
            //把子元素合并进去
            return parentVal.concat(childVal)
        }else{
            return [childVal] //[a]
        }
    }else{
        return parentVal
    }
}

(此处仅为与hook相关的部分代码)

此处,对HOOK进行定义,并将合并方法mergeHook传给Hook中的starts数组

 

3.lifecycle.js中

的callHook方法

//生命周期调用
export function callHook(vm, hook) {
    // console.log(vm.options,"||this is vm.options")
    console.log(hook,"||this is hook")
    console.log(vm.$options,"||this is vm.$options")
    const handlers = vm.$options[hook]
    if (handlers) {
        for (let i = 0; i < handlers.length; i++) {
            handlers[i].call(this) //改变生命周期中的指向 
        }
    }
}

 

 

 

首先,它会在控制台输出 hook 的值,用于调试目的。

接着,它会从 vm.$options 中获取与 hook 相对应的处理函数数组 handlers。

若存在 handlers,它会遍历 handlers 数组,并通过 call 方法调用每个处理函数。

注意,在调用处理函数时,使用了 call 方法改变了 this 指向,确保处理函数在正确的上下文中执行。

 

 

4.调用callHook方法

在init.js文件中

export function initMixin(Vue) {
    Vue.prototype._init = function (options) {
        // console.log(options)
        let vm = this
        //options为
        vm.$options = mergeOptions(Vue.options, options)
        callHook(vm,'beforeCreated')
        //初始化状态
        initState(vm)
        callHook(vm,'created')

        // 渲染模板 el
        if (vm.$options.el) {
            vm.$mount(vm.$options.el)
        }
    }

(仅为init.js中的部分代码)

lifecycle.js文件

export function mounetComponent(vm, el) {
    //源码
    callHook(vm, "beforeMounted")
    //(1)vm._render() 将 render函数变成vnode
    //(2)vm.updata()将vnode变成真实dom
    let updataComponent = () => {
        vm._updata(vm._render())
    }
    new watcher(vm, updataComponent,()=>{},true)
    callHook(vm, "mounted")
}

 

按顺序调用我们的生命周期函数

你会问,不是还有四个吗?

"beforeUpdate",
    "updated",
    "beforeDestory",
    "destroyed",

这里还没写完,后面还有一系列的处理

这几个方法后面会加上的

 

 

 

 

 

标签:生命周期,handlers,vm,Vue,callHook,hook,源码,options
From: https://www.cnblogs.com/FatTiger4399/p/17736167.html

相关文章

  • 【Vue】全系列Vue教程-数据监视
    hello,我是小索奇哈,精心制作的Vue系列持续发放,涵盖大量的经验和示例,由浅入深进行讲解。本章给大家讲解的是数据监视,前面的章节已经更新完毕,后面的章节持续输出,有任何问题都可以留言或私信哈,一起加油~数据监视Vue实现数据监测的核心是通过defineProperty()劫持属性的getter&setter,......
  • 开源药店商城系统源码比较:哪个适合你的药品电商业务
    在构建药品电商业务时,选择适合的药店商城系统源码是至关重要的决策之一。开源药店商城系统源码提供了快速入门的机会,但在选择之前,您需要仔细考虑您的需求、技术要求和可扩展性。本文将比较几个流行的开源药店商城系统源码,以帮助您找到最适合您业务的选项。1.MagentoMagento是一个......
  • 小程序获取源码
    1.获取加密的小程序文件进入文件夹 选择:Applet文件夹   根据第一次使用小程序的时间,选择目标小程序 找到wxapkg文件    使用工具解密小程序 解密后的文件,放入反编译工具 使用工具反编译,后查找Js文件,查找加解密方式。  https://githu......
  • 国外盲盒系统源码系统开发
      盲盒系统源码系统开发  盲盒系统定制开发,有多种玩法模式,可以是开箱,也可以是商城模式,它是以用户在商城购买盲盒,直接开箱。不知道如何选择盲盒可以玩随机的模式,输入自己想要东西,用户在选择他们想要的商品时,系统也会尽可能的满足的,系统会随机选择一个物品放入盲盒中,然后将......
  • 21-生命周期
    生命周期生命周期又名生命周期回调函数、生命周期函数、生命周期钩子什么是生命周期Vue在关键时刻帮我们调用的一些特殊名称的函数。生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的。生命周期函数中的this指向是vm或组件实例对象。 通过一个小案......
  • 养猪农场源码系统开发
      智慧养猪农场软件app是结合线上线下的养殖系统,开发人员在开发时需要对相关的软件程序化,序列化的算进行计算,软件开发还需要有多种语言的技术和实现,其中最常见的是php开发、Java和C++等。  智慧养猪农场软件开发需求先确定好,用户都想要什么样的功能,用户需要一个领养的功能......
  • Spring Cloud智慧工地云服务平台源码 PC端+APP端+数据大屏源码 开箱即用
    智慧工地云服务平台源码 PC端+APP端+数据大屏全套源码 自主版权智慧工地利用移动互联、物联网、云计算、大数据等新一代信息技术,彻底改变传统施工现场各参建方的交互方式、工作方式和管理模式,为建设集团、施工企业、监理单位、设计单位、政府监管部门等提供一揽子工地现场管理信......
  • Go每日一库之64:ants(源码赏析)
    简介继上一篇Go每日一库之ants,这篇文章我们来一起看看ants的源码。Pool通过上篇文章,我们知道ants池有两种创建方式:p,_:=ants.NewPool(cap):这种方式创建的池子对象需要调用p.Submit(task)提交任务,任务是一个无参数无返回值的函数;p,_:=ants.NewPoolWithFunc(cap,func......
  • 源码编译nginx安装脚本
    #!/bin/bashprofile(){echo"installingrelyon...."yum-yinstallgccgcc-c++pcrewgetopensslopenssl-devellibtoolgdgd-develecho"dowloadnginx_1.18......"cd/usr/local/src&&wgethttps://nginx.org/download/nginx-1.......
  • Uniapp学习笔记(vue3)
    https://uniapp.dcloud.net.cn/使用Vue.js开发所有前端应用的框架开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。周边生态丰富发送请求 methods:{ getMsg(msg){ ......