Vue生命周期钩子

vue生命周期表示在组件创建后的一系列变化,其中钩子函数会在生命周期的关键节点中被调用

为什么在beforeCreated()时,data和methods方法还没有创建,但是在beforeCreated()里面打印this可以看到data相关的数据?

跟浏览器有关,浏览器中,如果是引用数据类型,在后续对其有改变时,前面打印也会时后面更改后的数据。可以通过debugger断点进行查看就没有了

1.首次渲染阶段:

beforeCreate()中data和methods方法还没有创建,此时可以添加一些友好的loading状态;

created()中此时data数据和methods方法已创建,此时可以发送请求去获取数据;异步请求。但是此时拿不到DOM节点

有设置el节点时会直接渲染设置的el节点及其包含的节点;如果没有设置el节点,会在vm.$mount("#app")调用时再渲染(vm是new Vue()接收的变量)

template属性表示模版,如果手动设置了template属性,会将template作为根节点进行渲染;

beforeMount()时已完成了数据和虚拟DOM的初始化,但未完成初始化渲染,所以在这里还可以在首次渲染前去修改数据

mounted()时所有DOM节点挂载完成

2.更新阶段:

会对数据进行监听,只要数据更改就会触发beforeUpdate方法

beforeUpdate()中在DOM更新前,data和虚拟DOM完成更新

updated()中DOM节点更新完成

3.销毁阶段:

beforeDestroy():在卸载前,还能获取到data,methods等数据,在这里可以清除定时器、订阅事件

destroyed():卸载完成

4.详细描述

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

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

相关文章

FL Studio中文最新21破解版本水果软件下载

那么,大家知道编曲是什么吗?编曲和作曲又有什么区别呢? 一首歌的制作过程通常是由作词或作曲开始的,作曲就是运用基本乐理、和声学、复调、配器法、曲式结构的技术理论体系来表达创作者音乐思想的方法。说白了其实就是制作一首歌…

LeetCode13——罗马数字转整数

解题思想: 前后指针 左边比右边小 做减法 左边比右边大 做加法 最后一个数字直接加。 package keepcoding.leetcode.leetcode13;public class Result02 {public static void main(String[] args) {int result romanToInt("XIV");System.out.println(re…

设计模式:模板模式(C#、JAVA、JavaScript、C++、Python、Go、PHP)

简介: 模板模式,它是一种行为型设计模式,它定义了一个操作中的算法的框架,将一些步骤延迟到子类中实现,使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤。 通俗地说,模板模式就是将某一行…

C++初阶(五)类和对象

文章目录 一、C两大类型二、类的6个默认成员函数三、构造函数1、概念2、特性1、构造函数自动调用特性演示2、无参有参调用两种情况演示3、函数重载演示4、默认构造函数组成及演示5、内置类型成员不初始化的补丁演示 3、析构函数1、概念2、特性1、代码演示2、析构两种情况 4、构…

vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法

vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法 先看一下效果图&#xff08;想在表单里动态的增删 form-item&#xff0c;然后添加rules&#xff0c;校验其必填项&#xff1b; &#xff09;: html部分 <div v-for"(item, index) in …

GitHub下载太慢的解决方案

修改hosts文件&#xff1a; windows的hosts文件在 C:\Windows\System32\drivers\etc\hosts cmd管理员运行命令notepad C:\Windows\System32\drivers\etc\hosts 然后cmd命令重启网络ipconfig /flushdns windows修改hosts Ubuntu22.04修改hosts sudo vim /etc/hosts # This fil…

基于北方苍鹰优化的BP神经网络(分类应用) - 附代码

基于北方苍鹰优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码 文章目录 基于北方苍鹰优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码1.鸢尾花iris数据介绍2.数据集整理3.北方苍鹰优化BP神经网络3.1 BP神经网络参数设置3.2 北方苍鹰算法应用 4.测试结果…

13 Multi-Head Self-Attention(从空间角度解释为什么做多头)

博客配套视频链接: https://space.bilibili.com/383551518?spm_id_from=333.1007.0.0 b 站直接看 配套 github 链接:https://github.com/nickchen121/Pre-training-language-model 配套博客链接:https://www.cnblogs.com/nickchen121/p/15105048.html 上节课回顾 0:40 At…

系统架构之微服务架构

微服务架构 一.传统的单体架构与微服务架构的区别1.1 单体架构1.1.1 优点1.1.2 缺点 1.2 微服务架构1.2.1 优点1.2.2 面临的问题与挑战 二. 微服务架构模式方案2.1 聚合器微服务2.2 链式微服务2.3 数据共享微服务2.4 异步消息传递微服务 三. SOA与微服务的区别 微服务&#xff…

JAVA毕业设计100—基于Java+Springboot+Vue的WMS仓库管理系统+移动端微信小程序(源码+数据库+部署视频)

基于JavaSpringbootVue的WMS仓库管理系统移动端(源码数据库部署视频) 一、系统介绍 本系统前后端分离带小程序 本系统分为管理员、用户角色(角色权限可自行分配) 功能列表&#xff1a; 1、 数据管理&#xff1a;物料数据管理、物料Bom管理、物料组管理、物料分类管理、供应…

uni-app:实现当前时间的获取,并且根据当前时间判断所在时间段为早上,下午还是晚上

效果图 核心代码 获取当前时间 toString()方法将数字转换为字符串 padStart(2, 0)&#xff1a;padStart()方法用于在字符串头部填充指定的字符&#xff0c;使其达到指定的长度。该方法接受两个参数&#xff1a;第一个参数为期望得到的字符串长度&#xff0c;第二个参数为要填充…

Java - 多进程编程(对比线程、API 操作)

目录 一、多进程编程 1.1、为什么要使用多进程编程 1.2、Java 中多进程编程的实现 1.2.1、前言 1.2.2、进程创建 1.2.3、进程等待 1.2.4、封装操作到一个工具类中 一、多进程编程 1.1、为什么要使用多进程编程 一个 .exe 文件执行以后&#xff0c;就会变成一个进程. 多…

vscode使用CSScomb插件

1. 安装 在设置中搜索csscomb&#xff0c;把Csscomb: Format On Save勾上 然后去edit in settings.json配置 2.使用 2.1 用官网提供的三种方法 https://github.com/csscomb/csscomb.js/tree/master/config 2.2 自定义 CSS 书写顺序规则可以参考这个荐腾讯 AollyTeam 团队的…

Java SSL/TLS证书认证逻辑

前言 最近做项目使用httpclient转发https请求&#xff0c;但是遇到一些坑&#xff0c;尤其是证书的认证&#xff0c;证书认证一般都是单向的&#xff0c;除非相互访问&#xff0c;证书一般基于host&#xff0c;但是如果访问需要ip&#xff0c;那么JDK默认的认证就会不通过&…

emqx 启动正常,但是1883端口无法telnet,emqx无法正常工作

emqx一直正常工作&#xff0c;后面突然就不工作了&#xff0c;查找日志&#xff0c;发现报错说设备空间不足&#xff0c;但是我记得华为云SSD从40G扩容到500G&#xff0c;不至于空间不足&#xff0c;于是运行df -Dh确实显示只有40G&#xff0c;运行lsblk确实有500G&#xff0c;…

基于Arrow的轻量线程池

基于Arrow的轻量线程池 大家好&#xff0c;我是光城&#xff0c;最近花了几周业余时间&#xff0c;开发出这款轻量线程池&#xff0c;代码也全部开源啦&#xff0c;欢迎大家star。 本线程池的设计与实现会有涉及非常多的知识&#xff0c;这些内容也都会以视频的方式分享在知识星…

每个epoch的溯源(MNE)

每个epoch的溯源&#xff1a; from mne.minimum_norm import apply_inverse_epochs stcs apply_inverse_epochs(epochs,inverse_operator,lambda2,method,pick_ori"normal"# naveevoked.nave, )

从零开始构建基于YOLOv5的目标检测系统

本博文从零开始搭建基于YOLOv5模型的目标检测系统&#xff08;具体系统参考本博主的其他博客&#xff09;&#xff0c;手把手保姆级完成环境的搭建。 &#xff08;1&#xff09;首先Windows R输入cmd命令后打开命令窗口&#xff0c;进入项目目录&#xff0c;本博文以野生动物…

交换机控制在同一个网段内的终端,用hybrid接口实现不同的IP通和不通。

实验效果&#xff1a;pc1和pc2不能通&#xff0c;但pc1和pc2分别可以和pc3通。 通过这个实验可以彻底掌握数据包在交换机上的进去的类型状态。 sw1配置&#xff1a; [sw1]dis current-configuration sysname sw1 vlan batch 10 20 100 interface GigabitEthernet0/0/1 port h…