vue从入门到精通之基础篇(三)生命周期

生命周期

定义:

每个 Vue 实例在被创建时都要经过从创建倒挂载再到更新、卸载的一系列过程,同时在这个过程中也会运行一些叫做生命周期钩子的函数,可以让我们用自己注册的js方法控制整个大局,在这些事件响应方法中的this直接指向的是vue的实例。

钩子函数的执行时间

beforeCreate

在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。

created

实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。

beforeMount

在挂载开始之前被调用:相关的 render 函数首次被调用。

mounted

el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。

beforeUpdate

数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。

updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。

beforeDestroy

实例销毁之前调用。在这一步,实例仍然完全可用。

destroyed

Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。

还有两个特殊的(配合使用keep-alive):activated、deactivated

activated

keep-alive组件被激活时调用

deactivated

keep-alive组件被停用时调用

钩子函数中该做的事情

created

实例已经创建完成,因为它是最早触发的原因可以进行一些数据,资源的请求。

mounted

实例已经挂载完成,可以进行一些DOM操作

beforeUpdate

可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。

updated

可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。

该钩子在服务器端渲染期间不被调用。

destroyed

可以执行一些优化操作

keep-alive

在使用vue-router时有时需要使用来缓存组件状态,这个时候created钩子就不会被重复调用了,如果我们的子组件需要在每次加载的时候进行某些操作,可以使用activated钩子触发。

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

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

相关文章

libcurl库进行http通讯网络编程

https://www.cnblogs.com/lifan3a/articles/7479256.html

Java 开始

(事先声明:该文章并非完全是我自己的产出,更多的是我个人在看到资料后通过理解并记录下来,作为自己阅读后的一个笔记;我现在试图对自己多年工作中的知识点做一个回顾,希望能融会贯通) &#xff…

Java核心技术笔记——第 12 章 反射

转载自:[https://www.cnblogs.com/chanshuyi/p/head_first_of_reflection.html] 12 反射 1. 引入反射 通常情况下,调用一个类的方法的步骤如下: 创建该类的对象。调用该对象的方法。通过这种方式调用方法时,必须要知道类的定义以及…

HTML5知识点汇总

1、HTML5新特性 用于绘画的canvas标签用于媒介回放的video和audio元素对本地离线储存的更好支持新的特殊内容元素,如:article、footer、header、nav、section、aside、hgroup、figure新的表单控件,如:calendar、date、time、emai…

实用网站

https://blog.csdn.net/devcloud/article/details/103121883

网络(图)(数学)

转载于:https://www.cnblogs.com/fengxunling/p/9781575.html

DES加解密时 Given final block not properly padded 的解决方案

事情的经过是这个样子的。。。。。。 先说说问题是怎么出现的。根据客户需求,需要完成一个一键登录的功能,于是我的项目中就诞生了DesUtil,但是经过几百次测试,发现有一个登录直接报错!难道又遇到神坑啦!&a…

java 算法优化向导

一.什么是数据结构?什么是算法 不必像学生时代深究定义。以一个简单的例子说明。 数据结构,图书馆的书怎么摆列,按照书的类型,作者,出版时间,语言等等放置,这就是数据的结构。 算法&#xff0c…

appium工作原理

Appium原理 面试的时候,被问到appium原理,一点不会,实在尴尬。大家可以直接翻看原作https://blog.csdn.net/jffhy2017/article/details/69220719 appium运行时安装的2个应用:Appium Settings和Unlock。 一、appium加载的过程图解&…

LeetCode 21. Merge Two Sorted Lists

LeetCode 21. Merge Two Sorted Lists 分析 难度:易 题目 Merge two sorted linked lists and return it as a new list. The new list should be made by splicing together the nodes of the first two lists. Example: Input: 1->2->4, 1->3->4 Out…

Mac OS X 下 TAR.GZ 方式安装 MySQL

Mac OS X 下 TAR.GZ 方式安装 MySQL 注意: 本篇文章适用与 MySQL 5.6 版本的安装, 但已不再适用 5.7 的安装, 5.7 的安装方式请参见:《Mac OS X 下 TAR.GZ 方式安装 MySQL 5.7》 在 Mac 系统上, 安装 MySQL Server 一般是用 DMG 包在图形化界面下按提示安装, 此外 MySQL 还提供…

快排再改进

快排再改进 #include <iostream> using namespace std;void mySwap(int &a, int &b) {int temp a;a b;b temp; }void insertSort(int a[], int left, int right) {int tmp;int in 0;int out 0;for (out left 1; out < right; out) {tmp a[out];in ou…

【Linux基础】crontab定时命令详解

周期执行的任务一般由cron这个守护进程来处理[ps -ef|grep cron]。cron读取一个或多个配置文件&#xff0c;这些配置文件中包含了命令行及其调用时间。cron的配置文件称为“crontab”&#xff0c;是“cron table”的简写。 一、cron服务  cron是一个linux下 的定时执行工具&a…

5个Vue.js项目的令人敬畏的模板

开发人员查看使用SPA&#xff0c;Webpack&#xff0c;身份验证&#xff0c;GraphQL&#xff0c;文档和测试的Vue开发人员的资源。 你准备开始一个重要的Vue项目吗&#xff1f;为了确保从坚实的基础开始&#xff0c;您可以使用模板&#xff08;也就是样板&#xff0c;骨架&#…

测试多个输入条件的方法

转载于:https://www.cnblogs.com/www-qcdwx-com/p/10641281.html

问题规模

问题规模本身并没有非常精准的定义吧一般都是指运行时间t和输入参数个数n的关系用O(n)表示比如max([x])就是O(n)而冒泡排序则是O(n^2)

SSM+mybatis单元测试

初学SSMmybatis单元测试遇到的问题&#xff0c;dao注入后为nullDao层注入失败&#xff0c;查看后&#xff0c;发现注解都写的无误&#xff0c;经朋友的指点&#xff0c;在测试类上加了一句“RunWith(SpringJUnit4ClassRunner.class) ContextConfiguration(locations{“classpat…

Sublime text 2/3 中 Package Control 的安装与使用方法

Package Control 插件是一个方便 Sublime text 管理插件的插件&#xff0c;但因为 Sublime Text 3 更新了 Python 的函数&#xff0c;API不同了&#xff0c;导致基于 Python 开发的插件很多都不能工作&#xff0c;Package Control 原来的安装方法都失效了。 网上有2种使用 Git…

接口测试

集成&#xff1a; 接口&#xff0c;代码级&#xff0c;service层 unit-》service-》UI 接口测试和界面没有任何关系 A->B  数据流向 理论 我们学过&#xff0c;集成测试主要测接口&#xff0c;通过学习集成测试&#xff0c;我们发现是把单元测试通过后的方法直接需要对接的…

React-Router ---withRouter

import React from react import { withRouter } from react-router const Hello (props) > { return ( <div><button onClick{ () > props.history.push(/about) }>Hello</button></div> ) } const WithRouterHello withRouter(Hello);//也可…