Vue 生命周期有哪些?作用是什么?

什么是vue的生命周期

        Vue 实例从开始创建、初始化数据、编译模板、挂载Dom和渲染、更新和渲染、卸载等一系列过程,这是 Vue 的生命周期

vue的生命周期的八个钩子函数

  • beforeCreat() 创建前 在new一个vue实例后,只有一些默认的生命周期钩子和默认事件,其他的东西都还没创建。在此生命周期执行的时候,data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法
  • created()被创建 data 和 methods都已经被初始化好了,可以调用了
  • beforeMount() 挂载前 在内存中已经编译好了模板了,但是还没有挂载到页面中,此时,页面还是旧的
  • mounted()已挂载 Vue实例已经初始化完成了。此时组件脱离了创建阶段,进入到了运行阶段。 如果我们想要通过插件操作页面上的DOM节点,最早可以在和这个阶段中进行
  • beforeupdate()更新前 页面中的显示的数据还是旧的,data中的数据是更新后的, 页面还没有和最新的数据保持同步
  • updated()更新 页面显示的数据和data中的数据已经保持同步了,都是最新的
  • beforeDestroy() 销毁前 Vue实例从运行阶段进入到了销毁阶段,这个时候上所有的 data 和 methods , 指令, 过滤器 ……都是处于可用状态。还没有真正被销毁
  • destroyed()被销毁 这个时候上所有的 data 和 methods , 指令, 过滤器 ……都是处于不可用状态。组件已经被销毁了。

vue生命周期的作用是什么

        它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑

第一次页面加载会触发哪几个钩子

        第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

DOM渲染在哪个周期中已经完成

        mounted

简述每个周期具体适合哪些场景

        beforecreate : 可以在这加个loading事件,在加载实例时触发
        created : 初始化完成时的事件写在这里,如在这结束loading事件,异步请求也适宜在这里调用
        mounted : 挂载元素,获取到DOM节点
        updated : 如果对数据统一处理,在这里写上相应函数
        beforeDestroy : 可以做一个确认停止事件的确认框
        nextTick : 更新数据后立即操作dom

created和mounted的区别

        created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。
        mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/593607.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Unity坦克大战开发全流程——开始场景——开始界面

开始场景——开始界面 step1:设置UI 反正按照这张图拼就行了 step2:写脚本 前面的拼UI都是些比较机械化的工作,直到这里写代码的时候才真正开始有点意思了,从这里开始,我们就要利用面向对象的思路来进行分析&#xff1…

虾皮跨境电商选品有哪些规则

如何在虾皮(Shopee)平台上进行跨境电商选品在如今全球化的商业环境中,跨境电商已成为许多卖家拓展业务的重要途径。虾皮(Shopee)作为一家知名的跨境电商平台,为卖家提供了丰富的销售机会。然而,…

【C++核心编程(二)】

一、类和对象 C面向对象的三大特性为:封装、继承、多态。 C认为万事万物都皆为对象,对象上有其属性和行为。 例如: 人可以作为对象,属性有姓名、年龄、身高、体重...,行为有走、跑、跳、吃饭、唱歌... 车也可以作为对象,属性…

HTML中的主根元素、文档元数据、分区根元素、内容分区、文本内容 和 内联文本语义

本文主要介绍了HTML中主根元素<html>、文档元数据<base>、<head>、<link>、<meta>、<style>、<title>、分区根元素<body>、内容分区<address>、<article>、<aside>、<footer>、<h1> (en-US), &…

3dmax全景图用什么渲染 全景图云渲染使用教程

在给客户展示设计概念时&#xff0c;应用3ds Max创建的全景图是一个高效直观的方法。这种方式不仅可以全方位地呈现整个空间&#xff0c;让客户沉浸式地感受设计师的创意&#xff0c;而且在展现大型空间设计&#xff0c;如展览馆或者会议室等&#xff0c;效果尤其显著&#xff…

在mac上怎么方便的编辑xml文件

在Mac上 XML 文件不能默认以较直观的方式在“文本编辑”中打开&#xff0c;如果已安装 Xcode&#xff0c;你可以使用 Xcode 打开 XML 文件。在 Xcode 中&#xff0c;XML 文件通常会以可视化的方式显示&#xff0c;使得编辑更加直观&#xff0c;但是如果你不想安装 XCode&#x…

Win10 开机突然时出现0xc000014c错误怎么办?

环境&#xff1a; Win10 专业版 问题描述&#xff1a; Win10 开机突然时出现0xc000014c错误怎么办&#xff1f; 尝试F8模式也进不了还是这个画面 文件&#xff1a;\Windows\System32\config\system 状态&#xff1a;0xc000014c 信息&#xff1a;无法加载操作系统&#xff…

摆烂式学习ssh

摆烂式学习ssh ssh工作原理ssh基本使用sshd配置文件密钥登录1.客户端2.服务器3.注意事项4.使用密钥登录测试 ssh高级使用技巧1.在非正规端口启动2.rsync 命令3.透过 ssh 通道加密原本无加密的服务4.以ssh信道配合x server 传递图形接口5.ssh配合virtualbox虚拟机使用技巧 ssh工…

Python高级用法:装饰器(decorator)

装饰器&#xff08;decorator&#xff09; Python装饰器的作用是使函数包装与方法包装&#xff08;一个函数&#xff0c;接受函数并返回其增强函数&#xff09;变得更容易阅读和理解。最初的使用场景是在方法定义的开头能够将其定义为类方法或静态方法。 不使用装饰器的代码如…

杨中科.NET Core 教程 第一部分-2- .NET Core的重要问题

.NETCore 和 .NETFramework区别 尽管绝大部分用法都没变&#xff0c;但是.NET Core不是 .NET Framework的升级版&#xff0c;无法直接升级 用Mono&#xff0c;.NET Framework程序可以直接运行在Linux下。有了Mono&#xff0c;为啥微软还搞.NET Core? .NET Framework缺点&am…

主干网络篇 | YOLOv8 更换骨干网络之 ResNet50/ResNet101 | 原论文一比一复现

论文地址:https://arxiv.org/abs/1512.03385v1 更深层的神经网络更难以训练。我们提出了一个残差学习框架,以便于训练比以往使用的网络更深层的网络。我们明确地将层重构为学习相对于层输入的残差函数,而不是学习无参考的函数。我们提供了全面的实证证据,表明这些残差网络…

Unity 欧盟UMP用户隐私协议Android接入指南

Unity 欧盟UMP用户协议Android接入指南 官方文档链接开始接入mainTemplate.gradle 中引入CustomUnityPlayerActivity 导入UMP相关的包java类中新增字段初始化UMPSDK方法调用![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/d882171b068c46a1b956e80425f3a9cf.png)测…

1月3日,每日信息差

第一、美国年度LNG出口量首登全球第一&#xff0c;美国2023年出口了9120万吨LNG&#xff0c;超过澳大利亚和卡塔尔成为全球最大的LNG出口国。美国LNG出口增加&#xff0c;主要得益于德州自由港LNG工厂重启。自由港LNG是美国最大的天然气出口商&#xff0c;该工厂在2022年6月发生…

【技能---onnxruntime (C++/CUDA) 编译安装制定版本及部署】

文章目录 onnxruntime安装编译基础编译环境要求克隆ONNX Runtime源代码仓库配置和构建ONNX Runtime安装ONNX Runtime onnxruntime安装编译 主要介绍C版本的onnxruntime安装编译及其使用 基础编译环境要求 不同版本ONNXRuntime C对于cmake版本有不同的需求。 例如&#xff1a…

java实现大文件分片上传

背景&#xff1a; 公司后台管理系统有个需求&#xff0c;需要上传体积比较大的文件&#xff1a;500M&#xff0d;1024M&#xff1b;此时普通的文件上传显然有些吃力了&#xff0c;加上我司服务器配置本就不高&#xff0c;带宽也不大&#xff0c;所以必须考虑多线程异步上传来提…

mfc100u.dll文件丢失,有五种不同解决方法

在计算机使用过程中&#xff0c;我们经常会遇到一些错误提示&#xff0c;其中之一就是“找不到mfc100u.dll文件”。那么&#xff0c;mfc100u.dll文件到底是什么&#xff1f;为什么会出现丢失的情况&#xff1f;本文将详细介绍mfc100u.dll文件的作用以及丢失的原因&#xff0c;并…

Anaconda下载与超安装详解教程

1 Anaconda 1.1 简介 Anaconda 指的是一个开源的 Python 发行版本&#xff0c;其包含了 conda、Python等180多个科学包及其依赖项。 因为包含了大量的科学包&#xff0c;Anaconda 的下载文件比较大&#xff08;约 477MB&#xff09;&#xff0c;如果只需要某些包&#xff0c;…

编程笔记 html5cssjs 022 HTML表单概要

编程笔记 html5&css&js 022 HTML表单概要 一、<form> 元素二、HTML Form 属性小结 网页光是输出没有输入可不行&#xff0c;因为输出还是比输入容易&#xff0c;所有就先接触输出&#xff0c;后学习输入。html用来输入的东西叫“表单”。 HTML 表单用于搜集不同类…

安全与认证Week4

目录 本章需要理解的问题 历年题还出现 Web Security (TLS/SSL) 关于网络 使用网络会受到的威胁 各层安全协议 S/MIME、PGP&#xff08;后面和S/MIME一起出现&#xff09;、Kerberos、TLS/SSL 和 IP/IPSec 分别是&#xff1a; S/MIME (Secure/Multipurpose Internet Mail Exten…

cartographer切换地图显示问题,临时解决方案

注意:该方案只在2张地图的子图数量不同时才有效,即通过检测子图的不同来清除路径变量,是临时的解决方案,正确的思路应该再写一个话题或服务通知rviz更新数据 附代码 void SubmapsDisplay::processMessage(const ::cartographer_ros_msgs::SubmapList::ConstPtr& msg)…