Vue之组件的生命周期
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<button @click='isShow=!isShow'>改变组件的生死</button>
<keep-alive> <!--此标签用于使里面的组件缓存起，因此避免销毁，创建的过程，若想看见创建和销毁的过程，去掉该标签即可-->
<App v-if='isShow'/>
</keep-alive>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
/* 组件的生命周期的图示链接：https://cn.vuejs.org/images/lifecycle.png
以下是与组件生命周期相关的钩子函数
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- activated
- deactivated
- beforeDestory
- destoryed
*/
var App = {
template: `<div>我是局部组件App
<button @click='isShow=!isShow'>更新DOM</button>
<p v-if='isShow'>我被改变了～</p>
</div>`,
data() {
return {
msg:'hi',
isShow: false
}
},
beforeCreate() {
// 在组件创建前调用
console.log('Before create, you can not get msg, msg is:', this.msg);
},
created() {
// 在组件创建后调用
console.log('After created, you can get msg, msg is:', this.msg)
},
beforeMount() {
// 挂载数据到DOM前调用,此时还没有渲染局部组件里面的数据
console.log(document.getElementById('app'));
},
mounted() {
// 挂载数据到DOM后调用，此时已经正常地渲染了局部组件
console.log(document.getElementById('app'));
},
beforeUpdate() {
// 在更新DOM之前，调用此钩子函数，可以获取原始的DOM
console.log('I am original DOM:',document.getElementById('app').innerHTML);
},
updated() {
// 在更新DOM后调用此钩子函数，可以获取最新的DOM
console.log('I am new DOM:',document.getElementById('app').innerHTML)
},
beforeDestroy(){
console.log('beforeDestroy');
},
destroyed(){
console.log('destroyed');
},
activated(){
console.log('组件被激活了');
},
deactivated(){
console.log('组件被停用了');
}
};
new Vue({
el: '#app',
template: ``,
data() {
return {
isShow: false
}
},
components: {
App
}
});
</script>
</body>
</html>
Vue之组件的生命周期的更多相关文章
- vue的组件和生命周期
Vue里组件的通信 通信:传参.控制.数据共享(A操控B做一个事件) 模式:父子组件间.非父子组件 父组件可以将一条数据传递给子组件,这条数据可以是动态的,父组件的数据更改的时候,子组件接收的也会变化 ...
- vue 父子组件的生命周期顺序
一.加载渲染过程 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount ...
- 通俗易懂了解Vue组件的生命周期
1.前言 在使用vue2.0进行日常开发中,我们总有这样的需求,我就想在页面刚一加载出这个表格组件时就发送请求去后台拉取数据,亦或者我想在组件加载前显示个loading图,当组件加载出来就让这个loa ...
- vue组件的生命周期详解
1.生命周期&生命周期函数 生命周期:指一个组件从创建->运行->销毁的整个阶段,强调的是一个时间段. 生命周期函数:由vue框架提供的内置函数,会伴随着组件的生命周期,自动按序执 ...
- 《微信小程序七日谈》- 第三天：玩转Page组件的生命周期
<微信小程序七日谈>系列文章: 第一天:人生若只如初见: 第二天:你可能要抛弃原来的响应式开发思维: 第三天:玩转Page组件的生命周期: 第四天:页面路径最多五层?导航可以这么玩 前两篇 ...
- Vue2.5笔记：Vue的实例与生命周期
理解与认识 Vue 的实例是我们学习 Vue 非常重要的一步,也是非常必须的,因为实例是它的一个起点,也是它的一个入口,只有我们创建一个 Vue 实例之后,我们才行利用它进行一些列的操作. 首先 Vu ...
- vue基本配置和生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
- ReactJS入门（二）—— 组件的生命周期
如果你熟悉avalon,使用过 data-include-rendered 和 data-include-loaded 等回调方法,那么你会很好地理解React组件的各个生命周期. 说白了其实就是Re ...
- React Native 中组件的生命周期
概述 就像 Android 开发中的 View 一样,React Native(RN) 中的组件也有生命周期(Lifecycle).所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命 ...
随机推荐
- Cardboard profile的修改
Cardboard盒子中,手机屏幕大小.镜片离屏幕距离,屏幕分辨率等都会影响配戴者的眼中成像,通过对生成图像的变形可以部份解决这一问题,cardboard sdk中提供了cardboardprofil ...
- 用C++调用C的库函数（转载）
转自:http://linhs.blog.51cto.com/370259/140927 C++调用C的库函数时,如果头文件定义得不恰当,可能会出现明明某函数在obj文件中存在,但是却发生链接失败的情 ...
- Eclipse中，Open Type(Ctrl+Shift+T)失效后做法。
好几天ctrl shift T都不好用了,一直认为是工程的问题,没太在意,反正ctrl shift R也可也,今天看同事的好用,于是到网上查了一下解决的方法,刚才试了一下,应该是这个问题,明天就去公司 ...
- 在 DotNetty 中实现同步请求
一.背景 DotNetty 本身是一个优秀的网络通讯框架,不过它是基于异步事件驱动来处理另一端的响应,需要在单独的 Handler 去处理相应的返回结果.而在我们的实际使用当中,尤其是 客户端程序 基 ...
- 洛谷 - P1141 - 01迷宫 - dfs
https://www.luogu.org/problemnew/show/P1141 能互相到达的格子的答案自然是一样的,第一次dfs标记联通块,第二次dfs把cnt传递到整个联通卡并顺手消除vis ...
- poj1511【最短路spfa】
题意: 计算从源点1到各点的最短路之和+各点到源点1的最短路之和: 思路: 源点这个好做啊,可是各点到源点,转个弯就是反向建边然后求一下源点到各点的最短路,就是各点到源点的最短路,在两幅图里搞: 贴一 ...
- bzoj 3926: [Zjoi2015]诸神眷顾的幻想乡【SAM】
有一个显然的性质就是每个串一定在某个叶子为根的树中是一条直的链 然后因为SAM里是不会有相同状态的,所以以每个叶子为根dfs一遍,并且动态构造SAM(这里的节点u的last指向父亲),最后统计答案就是 ...
- Jmeter逻辑控制器操作，附栗子
jmeter中的逻辑控制器确定采样器的执行顺序.右键线程组-->添加-->逻辑控制器. 一.简单控制器 简单控制器对JMeter如何处理添加到其中的采样器没有影响.只是方便我们做分组命名. ...
- Luogu P1613跑路【倍增】By cellur925
题目传送门 开始的思路:直接跑一遍最短路,得到最短路的那个值.然后把那个值进行一下二进制拆分,看能拆几次.(可能是受到了刚做过的题影响) ;i>=;i--) { <<i)>qw ...
- php 中的引用(&)与foreach结合后的一个注意点
关于php中引用的概念及foreach循环的的应用就不多说了,php文档已经说的很明白了.直接上一段代码: <?php $arr = array(1,2, 3); foreach($arr as ...