首页 > 其他分享 >1、vue2.0的生命周期

1、vue2.0的生命周期

时间:2023-10-23 21:16:06浏览次数:33  
标签:生命周期 函数 更新 销毁 组件 挂载 数据 vue2.0

首先,组建从创建到销毁的过程就是它的生命周期。

一共分为4个阶段,创建、挂载、更新以及销毁。

第一个阶段:创建

beforeCreate () {}         // 实例创建前,在这个函数内属性和方法都不能使用  
created () {} // 实例已经初始化好了,也完成了数据挂载,可以修改数据、使用数据但是不能触发updated()函数,不能更新视图

第二个阶段:挂载

beforeMount () {}         // 模版已经编译完成,虚拟DOM也创建完成了,可以使用数据、修改数据,但是不能出发updated()函数,不能更新视图
mounted () {} // 把编译好的模版挂载到页面上,可以在这个函数内调用一步请求,也可以访问DOM节点

第三个阶段:更新

beforeUpdate () {}        // 组件数据更新之前使用,数据是新的,页面上的数据是旧的,组件即将更新,准备渲染,可以修改数据
updated () {} // render()函数重新做了渲染,数据和页面上的数据都是新的,不建议在这个修改数据,可能回造成页面死循环

第四个阶段:销毁

beforeDestory () {}      // 组件销毁之前,这时候组件还没有被销毁,可以在这个函数内清除计时器、清除闭包、移除时间监听
destoryed () {} // 组件销毁后,数据卸载,事件移除、子组件也被销毁了

如果使用了<keep-alive></keep-alive>组件会增加生命周期

activited () {}          // 组件激活时调用
deactivited () {} // 组件被销毁时调用 

标签:生命周期,函数,更新,销毁,组件,挂载,数据,vue2.0
From: https://www.cnblogs.com/DongZixin/p/17783468.html

相关文章

  • PMP项目生命周期的区分
     预测型迭代型增量型敏捷型需求在开发前预先确定需求在交付期间定期细化需求在交付期间频繁细化针对最终可交付成果制定交付计划,然后在项目终了时一次交付最终产品分次交付整体产品的各种子集频繁交付对客户有价值的各种子集(隶属于整体产品)尽量限制......
  • vue学习七之生命周期
    1.vue的四个生命阶段 2.vue的八个钩子(1)beforeCreate:创建阶段前,script数据尚未加载(2)created:创建阶段已完成(3)beforeMount:挂载阶段前,开始通过数据进行页面渲染(4)mounted:挂载阶段完毕(5)beforeUpdate每次修改会经历本阶段,本阶段数据已......
  • MySQL 5.7生命周期终结的技术探讨
    MySQL5.7将于2023年10月31日终结生命周期。终结意味着自2023年10月31日起,MySQL官方将不再提供对MySQL5.7版本的技术支持和更新。具体来说,这意味着以下几点。安全补丁和错误修复:MySQL官方将不再发布关于MySQL5.7版本的安全补丁和错误修复。这可能会导致在未来发现的安全漏......
  • 35 组件生命周期的应用
    banner:横幅,旗帜这节课没啥的重要的是,哪个时间节点应该做什么事,可以做什么事,这一点要理解。(或者说,不同的事情放在不同的时间节点完成)<template><div><h3>组件的生命周期</h3><pref="zhan">{{msg}}</p><button@click="clickHandle">修改数据,触发更新相关......
  • 34 组件的生命周期
    出生————>死亡在主要的时间节点上,自动执行生命周期钩子函数mount:安装,handle:处理组件生命周期示意图虽然写这东西没什么意义,但还是花了一点时间手撕代码吧<template><div><h3>组件的生命周期</h3><p>{{msg}}</p><button@click="clickHandle">......
  • 项目管理之生命周期管理
    项目生命周期管理矩阵是项目管理中一个重要的概念,它包括了项目从准备到收尾的各个阶段。项目生命周期管理矩阵以四个主要管理阶段为基础,分别为准备阶段、启动阶段、执行阶段和收尾阶段。这四个阶段在项目管理中有着明确的目标和职责,贯穿了整个项目的生命周期。四大管理阶段准备阶段......
  • uniapp页面生命周期函数执行时机
    一、总览  二、分析通过浏览器控制台得到:从上述实验我们可以得到以下结论:onLoad对应created,onReady对应mounted,不过uniapp页面生命周期函数执行时机略早于组件生命周期函数,在页面级vue文件中可优先考虑使用页面级生命周期函数。需要依赖页面传参逻辑的需使用on......
  • 0到1搭建vue2.0项目
    一、创建vue项目1、node-v查看是否安装了node 如果没安装,到官网下载安装https://nodejs.org/en2、创建名为VueProject的文件夹,cmd进入该文件夹,npminit-y 进行初始化(备注:在使用命令行工具npm进行初始化项目时,-y是一个参数,表示在初始化过程中自动应答所有的问题为默......
  • 探索Vue生命周期钩子函数:从创生到销毁
    Vue这个引领前端开发潮流的框架,其优雅的响应式数据绑定和组件式开发方式,使得它备受瞩目。然而,Vue的魅力绝不仅限于此,它还赋予开发者一组神奇的生命周期钩子函数,能够在组件的各个成长阶段插入自定义代码。本文将带你进入Vue生命周期钩子函数的奇妙世界,一探它们的妙用、内部机制,同时......
  • 小程序底层技术机制解读 - 页面生命周期
    小程序的页面生命周期是开发者在开发小程序应用时必须了解的重要概念之一。它定义了小程序页面从创建到销毁的整个生命周期过程,开发者可以在不同的生命周期阶段执行特定的操作。本文将深入解读小程序页面生命周期的底层技术机制,以及如何使用它来管理页面的行为。同时,我们将提供一个......