首页 > 编程语言 >vue2源码-十一、Vue的生命周期

vue2源码-十一、Vue的生命周期

时间:2023-04-21 11:12:46浏览次数:56  
标签:el updated Vue 渲染 触发 源码 vue2 mounted 方法

Vue的生命周期

  1. 钩子函数是如何实现?

    内部利用一个发布订阅模式,将用户写的钩子维护成一个数组,后续依次调用hooks。主要靠的是mergerOptions

  2. 方法有哪些?

    img

    引用自https://vue3js.cn/interview/vue/lifecycle.html#%E4%BA%8C%E3%80%81%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E6%9C%89%E5%93%AA%E4%BA%9B

    详细说明:

    • beforeCreate方法:没有实现响应式数据(没有用)
    • created方法:拿到的是响应式属性(不涉及DOM渲染),这个api可以在服务端渲染中使用,在vue3中为setup。(常用)
      • 完成了数据观测,属性与方法的运算,watcherevent事件回调的配置
      • 可调用methods中的方法,访问和修改data数据触发响应式渲染dom,可通过computedwatch完成数据计算
      • 此时vm.$el 并没有被创建
    • beforeMount方法:没有实际价值。此阶段vm.el虽已完成DOM初始化,但并未挂载在el选项上
    • mounted方法:mounted 中可以获取\(el 第一次渲染完毕了,等待渲染完毕后, `mounted`中可以获取`\)el`。(常用)
    • beforeUpdate方法:若在beforeUpdate中再次修改数据,不会再次触发更新方法。(没用)
    • updated方法:若在updated中再次修改数据,会再次触发更新方法(beforeUpdateupdated)(没用)
    • beforeDestory方法:手动移除会触发(常用)
    • destroyed方法:销毁后触发(常用)

    一般最多是在 mounted(created 不是比 mounted 早?代码是同步执行的,请求是异步的) 服务端渲染不都是在 created 中 在哪里发请求主要看做什么事情。

标签:el,updated,Vue,渲染,触发,源码,vue2,mounted,方法
From: https://www.cnblogs.com/dgqp/p/17339669.html

相关文章

  • vue实现的常见的动画效果
    本文包括的动画:zoom-inzoom-in-leftzoom-in-rightzoom-in-topzoom-in-bottomzoom-in-center-xzoom-in-center-yslideslide-leftslide-rightslide-topslide-bottomzoom-in-left.ivy-zoom-in-left-enter-active,.ivy-zoom-in-left-leave-active{transi......
  • vue3打包后一片空白控制台报错
    问题原因是路径不对,加上一行代码就可完美解决问题。在vue.config文件中加上  publicPath:'./' 即可解决问题。问题如图所示: 如何解决问题呢?     ......
  • Vue&Element-Ui(支技VUE2)&解决ttf, woff 文件报错的问题
    一、Vue&Element-Ui(支技VUE2)Vue是一套用于构建用户界面的渐进式JavaScript(主张最少)框架,开发者只需要关注视图层,它不仅易于上手,还便于与第三方库或既有项目的整合。是基于MVVM(Model-View-ViewModel即:视图层-视图模型层-模型层)设计思想。提供MVVM数据双向绑定的库,专注于UI......
  • vue3 源码
     这文章写的很好 Compiler模块:编译模板系统。主要职责是将template编译成虚拟节点。Runtime模块:也可以称之为Renderer模块,真正负责渲染的模块。主要职责是将虚拟节点渲染成真实元素,然后显示到浏览器上。Reactivity模块:响应式系统。主要职责是监听响应式的数据,然后通过di......
  • vue全家桶进阶之路47:Vue3 Axios拦截器封装成request文件
    可以将Axios拦截器封装成一个单独的request文件,以便在整个应用程序中重复使用。以下是一个示例,展示如何将Axios拦截器封装成一个request文件:1、创建一个名为request.js的新文件,并导入Axios:importaxiosfrom'axios';2、创建一个名为request的函数,并将其导出:这将创建一个名......
  • 【Visual Leak Detector】源码下载
    说明使用VLD内存泄漏检测工具辅助开发时整理的学习笔记。本篇介绍VLD源码的下载。同系列文章目录可见《内存泄漏检测工具》目录目录说明1.下载途径2.不同下载途径的源文件差异1.下载途径以v2.5.1版本为例,可以到Github-KindDragon-vld页面下载master的zip源码......
  • vue中的ref 和 reactive--今天学了啥 23/3/12
     这两者都是默认deepreactive,不同的是reactive使用es6的proxy,只能使对象reactive。ref不仅支持对象还支持基本数组,不能说ref是reactive的超集,因为这两者返回的类型就不一样。 Reftype:functionref<T>(value:T):Ref<UnwrapRef<T>>interfaceRef<T>{value:T}如......
  • 关于vue3中Scope slot实战中使用
    今天学了啥-23/03/28 vue提供slot机制让组件可以接收模板片段,来渲染模板片段。比如最常见的button组件,基本是如下这样使用。<FancyButton>Clickme!<!--插槽内容--></FancyButton>FancyButton组件则是这样:<buttonclass="fancy-btn"><slot></slot><!--插......
  • vue全家桶进阶之路46:Vue3 Axios拦截器和globalProperties全局设置
    在Vue.js3中,使用Axios与Vue.js2.x中类似,但是需要进行一些修改和更新,下面是Vue.js3中Axios的定义和使用方式:首先,你需要安装Axios和Vue.js3.x,可以使用npm或yarn等包管理工具安装:npminstallaxiosvue@next然后,在你的Vue.js3应用程序中,你可以使用以下代码来导入和使用Axio......
  • Vue3 日历组件的实现
    Vue3日历组件的实现以下是一个基于Vue3实现的简单日历组件的代码示例。这个日历组件包含了前一个月、当前月、下一个月的日期,并且可以支持选择日期、切换月份等功能。<template><divclass="calendar"><divclass="header"><buttonclass="prev"@click="pre......