Vue.js系列：生命周期钩子
开发人员提供了一个Web开发人员可以在Vue.js应用程序的整个生命周期中使用的各种方法的讨论。
生命周期钩子是在Vue对象生命周期的某个阶段执行的已定义方法。从初始化开始到它被破坏时，对象都会遵循不同的生命阶段。这是一个着名的图表，表示挂钩顺序。
让我们将代码添加到钩子并查看它们如何被解雇的阶段。
<!DOCTYPE html ><html><head><div id='div1' v-bind:title="div_title">{{hello_message}}</div></head><body><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var v1 = new Vue({el: "#div1",data: {hello_message: "Hello, there welcome to VueJS world",div_title: "This is my intro div",},beforeCreate: function(){alert('Before Create');},created: function(){alert('Created');},beforeMount: function(){alert('Before Mount');},mounted: function(){alert('Mounted');},beforeUpdate: function(){alert('Before Update');},updated: function(){alert('Updated');},beforeDestroy: function(){alert('Before Destroy');},destroyed: function(){alert('Destroyed');}});// To fire updatev1.$data.hello_message = "New message";// This can be invoked to destroy the object, which will fire the destroy hook//v1.$destroy();</script></body></html>
beforeCreate（新对象诞生）
Vue对象用新方法实例化。它创建一个Vue类的对象来处理DOM元素。对象的这个生命阶段可以通过beforeCreated 挂钩来访问 。我们可以在这个钩子中插入我们的代码，在对象初始化之前执行。
创建（具有默认特性的对象）
在这个生命阶段，对象及其事件完全初始化。 created 是访问这个阶段并编写代码的钩子。
beforeMounted（对象在DOM中适合形状）
这个钩子被调用 beforeMounted。在这个阶段，它检查是否有任何模板可用于要在DOM中呈现的对象。如果没有找到模板，那么它将所定义元素的外部HTML视为模板。
已安装（DOM已准备就绪并放置在页面内）
一旦模板准备就绪。它将数据放入模板并创建可呈现元素。用这个新的数据填充元素替换DOM元素。这一切都发生在mounted钩子上。
beforeUpdate（更改已完成，但尚未准备好更新DOM）
在外部事件/用户输入beforeUpdate发生更改时，此钩子即 在反映原始DOM元素的更改之前被触发。
为了解决这个问题 beforeUpdated，我添加了下面的代码。它通过更新DOM来更改运行时中的hello_message。
// To fire updatev1.$data.hello_message="New message";
更新（在DOM中呈现的更改）
然后，通过实际更新DOM对象并触发updated，屏幕上的变化得到呈现 。
beforeDestroy（对象准备死掉）
就在Vue对象被破坏并从内存中释放之前， deforeDestroy 钩子被触发，并允许我们在其中处理我们的自定义代码。
为了激发这个钩子，我添加了下面的代码来销毁Vue对象。
//这可以被调用来销毁该对象，这将触发销毁钩v1.$ destroy（）;
销毁（对象停止并从内存中删除）
该 destroyed 钩子被成功运行销毁对象上调用。
概要
我们可以使用生命周期钩子在Vue对象生命周期的不同阶段添加我们的自定义代码。它将帮助我们控制在DOM中创建对象时创建的流程，以及更新和删除对象。
Vue.js系列：生命周期钩子的更多相关文章
- vue 项目实战 (生命周期钩子)
开篇先来一张图 下图是官方展示的生命周期图 Vue实例的生命周期钩子函数(8个) 1. beforeCreate 刚 new了一个组件,无法访问到数据和真实的do ...
- Vue 2.0 生命周期-钩子函数理解
Vue 2.0 + 生命周期钩子在项目过程中经常用到,所以闲下来整理了下,直接复制下面的实例运行: <!DOCTYPE html> <html lang="en" ...
- Vue js 的生命周期详解
Vue 实例的生命周期 Vue 实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom→渲染.更新→渲染.卸载等一系列 过程,我们称这是 Vue 的生命周期.通俗说就是 Vue ...
- vue学习三:生命周期钩子
生命周期钩子介绍: 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生 ...
- Vue学习之生命周期钩子小结（四）
一.生命周期钩子(函数): 1.每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运 ...
- vue.js之生命周期，防止闪烁，计算属性的使用，vue实例简单方法和循环重复数据
摘要:今天是比较糟糕的一天没怎么学习,原因是学校的wifi连不上了~~.今天学习一下vue的生命周期,如何防止闪烁(也就是用户看得到花括号),计算属性的使用,vue实例简单方法,以及当有重复数据时如何 ...
- Vue.js之生命周期
有时候,我们需要在实例创建过程中进行一些初始化的工作,以帮助我们完成项目中更复杂更丰富的需求开发,针对这样的需求,Vue提供给我们一系列的钩子函数. vue生命周期 beforeCreate 在实例初 ...
- vue.js的生命周期 及其created和mounted的部分
网上很多人有所总结,转载自: https://segmentfault.com/a/1190000008570622 关于created和mounted的部分,也可以参考: https://blo ...
- Vue js 的生命周期（看了就懂）
转自: https://blog.csdn.net/qq_24073885/article/details/60143856 用Vue框架,熟悉它的生命周期可以让开发更好的进行. 首先先看看官网的图, ...
- Vue.js——5.生命周期
Vue的生命周期 创建阶段new Vue1,beforeCreate() 表示在实例没有被创建出来之前会执行它加载data和methods2,caeated() data 和methods被初始化了 ...
随机推荐
- Codeforces 898 贪心关闭最少闹钟 优先队列最少操作构造N/2squares 讨论情况哈希数字串分割a+b=c
A /* Huyyt */ #include <bits/stdc++.h> #define mem(a,b) memset(a,b,sizeof(a)) #define mkp(a,b) ...
- 折半搜索+Hash表+状态压缩 | [Usaco2012 Open]Balanced Cow Subsets | BZOJ 2679 | Luogu SP11469
题面:SP11469 SUBSET - Balanced Cow Subsets 题解: 对于任意一个数,它要么属于集合A,要么属于集合B,要么不选它.对应以上三种情况设置三个系数1.-1.0,于是将 ...
- java多线程面试题整理及答案
1) 什么是线程? 线程是操作系统能够进行运算调度的最小单位,它被包含在进程之中,是进程中的实际运作单位.程序员可以通过它进行多处理器编程,你可以使用多线程对 运算密集型任务提速.比如,如果一个线程完 ...
- 【转载】网易极客战记官方攻略-地牢-Kithgard 橱柜 A
关卡连接: https://codecombat.163.com/play/level/cupboards-of-kithgard-a 谁知道什么样的恐怖事情潜伏在 Kithgard 的橱柜里? 简介 ...
- xmlns, xmlns:xsi, xsi:schemaLocation 解释
xmlns, xmlns:xsi, xsi:schemaLocation 解释 xmlnsxsischemaLocation 我们在写 xml 文件时,尤其是 spring .mybatis 的配置文 ...
- UI控件Telerik UI for ASP.NET MVC全新发布R2 2019 SP1
Telerik UI for ASP.NET MVC拥有使用JavaScript和HTML5构建网站和移动应用所需的70+UI部件,来满足开发者的各种需求,提供无语伦比的开发性能和用户体验.它主要是针 ...
- 基于注解的IOC配置
1 明确 注解配置和XML配置要实现的功能都是一样的,都是要降低程序间的耦合.只是配置的形式不一样. 关于实际的开发中到底是使用XML还是注解,每家公司有着不同的习惯.具体问题具体分析. 2 环境搭建 ...
- ESP8266WiFiGeneric---通用库--事件和配置
ESP8266WiFiSTAClass .ESP8266WiFiScanClass .ESP8266WiFiAPClass 可以访问 ESP8266WiFiGenericClass的private和p ...
- 【mysql】全文索引match多列报错
表结构如下: CREATE TABLE `T` ( .... FULLTEXT KEY `title_fc` (`titleindex`), FULLTEXT KEY `shortname_fc` ( ...
- 详解GSM的基带跳频和射频跳频
跳频技术源于军事通信,目的是为了获得较好的保密性和抗干扰能力.跳频分为快速和慢速两种,GSM中的跳频属于慢跳频. 跳频方式从时域概念上分为帧跳频和时隙跳频,从载频实现方式上分为射频跳频和基带跳频. 帧 ...