vue(20)生命周期函数「建议收藏」

vue(20)生命周期函数「建议收藏」生命周期函数生命周期函数代表的是Vue实例,或者是Vue组件,在网页中各个生命阶段所执行的函数。生命周期函数可以分为创建阶段和运行期间以及销毁期间。其中创建期间的函数有beforeCreate、c

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

生命周期函数

生命周期函数代表的是Vue实例,或者是Vue组件,在网页中各个生命阶段所执行的函数。生命周期函数可以分为创建阶段运行期间以及销毁期间
其中创建期间的函数有beforeCreatecreatedbeforeMountmounted
运行期间的函数有beforeUpdateupdated
销毁期间有beforeDestroydestroyed
以下是官方文档给到的一张图,从这种图中我们可以了解到每个部分执行的函数。
vue(20)生命周期函数「建议收藏」
 

1. 创建期间

 

1.1 beforeCreate:

Vue或者组件刚刚实例化,datamethods都还没有被创建。
 

1.2 created

此时datamethods已经被创建,可以使用了。模板还没有被编译。
 

1.3 beforeMount:

created的下一阶段。此时模板已经被编译了,但是并没有被挂在到网页中。
 

1.4 mounted

模板代码已经被加载到网页中了。此时创建期间所有事情都已经准备好了,网页开始运行了。
 

2. 运行期间

 

2.1 beforeUpdate:

在网页运行期间,data中的数据可能会进行更新。在这个阶段,数据只是在data中更新了,但是并没有在模板中进行更新,因此网页中显示的还是之前的。
 

2.2 updated

数据在data中更新了,也在网页中更新了。
 

3. 销毁期间

 

3.1 beforeDestroy

Vue实例或者是组件在被销毁之前执行的函数。在这一个函数中Vue或者组件中所有的属性都是可以使用的。
 

3.2 destroyed

Vue实例或者是组件被销毁后执行的。此时Vue实例上所有东西都会解绑,所有事件都会被移除,所有子元素都会被销毁。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/166080.html原文链接:https://javaforall.net

(0)
上一篇 2022年8月7日 上午11:46
下一篇 2022年8月7日 下午12:00


相关推荐

  • IBATIS两种in查询

    IBATIS两种in查询

    2022年1月19日
    54
  • java.lang.integer_java 中 关于java.lang.ArrayStoreException: java.lang.Integer异常,是什么原因?…

    java.lang.integer_java 中 关于java.lang.ArrayStoreException: java.lang.Integer异常,是什么原因?…Value的值是Object型,要装到Object[]数组中,而不是String[]。往数组里装不匹配的类型,就抛这个异常。packagepack.java.demo;importjava.util.HashMap;importjava.util.Map;publicclassTest{/***@paramargs*/publicstaticvoidmain(String[]…

    2022年7月16日
    16
  • perl正则表达式中文问题

    perl正则表达式中文问题
     
    在使用perl从地址中提取街道的时候遇到了个很诡异的问题
    同样一个地址,连续进行两次匹配出来的结果居然不一样
    一次是正常的,一次是乱码,搞了半天没弄明白是怎么回事
    看来perl的中文处理能力还是有待加强
    后来在进行正则匹配之前尝试用了useencoding”gbk”; 
    还算运气不错,居然搞定了
    useencoding”gbk”; 
    $address=~/^(.*(市|区))?(.*?(街|路|道)).*

    2022年5月31日
    26
  • MySQL——MySQL 图形化管理工具的介绍

    MySQL——MySQL 图形化管理工具的介绍文章目录MySQL——MySQL图形化管理工具的介绍1、MySQLWorkbench2、Navicat3、SQLyog4、DBeaver5、DataGripMySQL——MySQL图形化管理工具的介绍MySQL图形化管理工具极大地方便了数据库的操作与管理,常用的图形化管理工具有:MysQLWorkbench、phpMyAdmin、NavicatPreminum、MySQLDumper、SQLyog、dbeaver、MysQLODBcConnector、DataGrip。1、MySQL

    2022年6月30日
    29
  • yslow的安装方法

    yslow的安装方法firefox 安装 yslow 的方法 安装 yslow 前先安装 firebug 组件 安装步骤 在附加组件 扩展中搜索 firebug 点击安装 然后搜索 yslow 点击安装即可 chrome 安装扩展程序被墙了 使用软件到墙外面登录 yslow 网站 http yslow org 在 Availability 选项中可看到 chrome 右击 chrome 点击在新标签页中打开链接 打开一个新的标签页 https

    2026年3月18日
    3
  • 量子搜索算法(Grover Algorithm)

    量子搜索算法(Grover Algorithm)GroverAlgori 一 背景介绍二 具体内涵一 背景介绍遍历搜寻问题的任务是从一个海量元素的无序集合中 找到满足某种要求的元素 要验证给定元素是否满足要求很容易 但反过来查找这些合乎要求的元素则很费事 因为这些元素并没有按要求进行有序的排列 并且数量又很大 在经典算法中 只能按逐个元素试下去 这也正是 遍历搜寻 这一名称的由来 量子计算机比传统计算机具有的众多优势之一是其优越的速度搜索数据库 Grover 的算法证明了这种能力 该算法可以二次加速非结构化搜索问题 但其用途远不止于

    2026年3月17日
    2

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号