vue_实例_组件的生命周期
重绘重排 中重复出现的是
mounted(){...}
beforeUpdate(){...}
uptated(){...}
其他钩子函数只会出现一次
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>viewModel 的生命周期</title>
<link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body>
<div id="test">
<button type="button" @click="destroyVue">卸载 viewModel</button>
<p v-show="isShow">生当作人杰，死亦为鬼雄。</p>
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: "#test",
data:{
isShow: true
},
methods:{
destroyVue(){
this.$destroy();
}
},
mounted(){ // 初始显示之后立即执行: 执行异步任务
this.timerId = window.setInterval(()=>{
console.log("27 ---- mounted");
this.isShow = !this.isShow
}, 1000)
},
beforeDestroy(){
console.log("32 ---- beforeDestroy");
window.clearInterval(this.timerId)
},
/****************************************************************************/
beforeCreate(){
console.log("36 beforeCreate")
},
created(){
console.log("40 createdcreated")
},
beforeMount(){
console.log("42 beforeMount")
},
beforeUpdate(){
console.log("46 beforeUpdate")
},
updated(){
console.log("49 updated")
},
destroyed(){
console.log("52 destoryed")
}
})
</script>
</body>
</html>
vue_实例_组件的生命周期的更多相关文章
- ReactJS入门（二）—— 组件的生命周期
如果你熟悉avalon,使用过 data-include-rendered 和 data-include-loaded 等回调方法,那么你会很好地理解React组件的各个生命周期. 说白了其实就是Re ...
- react.js 从零开始（二）组件的生命周期
什么是生命周期? 组件本质上是一个状态机,输入确定,输出一定确定. 当状态改变的时候 会触发不同的钩子函数,可以让开发者做出响应.. 一个组件的生命周期可以概括为 初始化:状态下 可以自定义的函数 g ...
- react 组件的生命周期
组件的生命周期 过程 装载(Mounting) :组件被插入到 DOM 中: 更新(Updating) :组件重新渲染以更新 DOM: 卸载(Unmounting) :组件从 DOM 中移除. 过程 ...
- ReactJS入门3:组件的生命周期
本文主要介绍组件的生命周期. 组建的生命周期主要分为3个:Mounting.Updating.Unmounting. 1. Mounting:组件被加载到DOM 在本阶段,主要有三个方法: 1 ...
- vue的组件和生命周期
Vue里组件的通信 通信:传参.控制.数据共享(A操控B做一个事件) 模式:父子组件间.非父子组件 父组件可以将一条数据传递给子组件,这条数据可以是动态的,父组件的数据更改的时候,子组件接收的也会变化 ...
- React组件和生命周期简介
React 简介----React 是 Facebook 出品的一套颠覆式的前端开发类库.为什么说它是颠覆式的呢? 内存维护虚拟 DOM 对于传统的 DOM 维护,我们的步骤可能是:1.初始化 ...
- React Native组件、生命周期及属性传值props详解
创建组件的三种方式 第一种:通过ES6的方式创建 /** * 方式一 :ES6 */ export default class HelloComponent extends Component { r ...
- Autofac容器对象实例的几种生命周期类型
实例范围决定了如何在同一服务的请求之间共享实例. 请注意,您应该熟悉生命周期范围的概念,以便更好地理解此处发生的情况. 当请求服务时,Autofac可以返回单个实例(单实例作用域),新实例(每个依赖作 ...
- React：组件的生命周期
在组件的整个生命周期中,随着该组件的props或者state发生改变,其DOM表现也会有相应的变化.一个组件就是一个状态机,对于特定地输入,它总返回一致的输出. 一个React组件的生命周期分为三个部 ...
随机推荐
- HDU 5965(三行扫雷 dp)
题意是在一个 3 行 n 列的图上进行扫雷,中间一行没有雷,且中间一行的每一格都会显示周围的雷数,问根据已知的雷数在上下两行设置地雷的方法数. 分析知每一列所填雷数的和与周围的雷数有关,但每列具体的填 ...
- NOI-OJ 1.12 ID:10 素数对
整体思路 本题涉及大量素数的使用,故使用埃拉拖色尼算法提前计算出素数表可以避免大量.重复的计算. 判断素数对很简单,使用两个变量p1和p2代表素数表中的第一个和第二个素数,依次在表中向后移动,判断p2 ...
- shiro登录认证
新建maven文件create a simple project shiro.ini文件 [users] root=123456 log4j.properties log4j.rootLogger=I ...
- pythonのdjango连接MYSQL
在py3.*中利用django使用mysql时,会出现一些问题.由于django默认的是 MySQLdb,但MySQLdb目前不支持py3.*所以我们要改用pymysql,首先要安装pymysql,命 ...
- 2017-2018-2 20155303『网络对抗技术』Exp6：信息收集与漏洞扫描
2017-2018-2 20155303『网络对抗技术』 Exp6:信息收集与漏洞扫描 --------CONTENTS-------- 一.原理与实践说明 1.实践内容 2.基础问题 二.实践过程记 ...
- ActiveMQ的Destination高级特性
1. Composite Destinations 组合目的地 组合队列Composite Destinations : 允许用一个虚拟的destination代表多个destinations ...
- dubbo监控中心与admin管理项目的使用
监控中心与admin管理项目都是针对特定的注册中心进行监控,因此需要配置对应的注册中心的地址,或者在dubbo.properties或者在applications.properties文件配置. == ...
- 网络(最大)流初步+二分图初步 (浅谈EK，Dinic, Hungarian method:]
本文中 N为点数,M为边数: EK: (brute_force) : 每次bfs暴力找到一条增广路,更新流量,代码如下 : 时间复杂度:O(NM²): #include<bits/stdc++ ...
- DataStructure-链表实现指数非递减一元多项式的求和
// 2-链表实现多项式的求和.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include<stdio.h> #inclu ...
- 【原创】Java基础之Session机制
Session机制 JSESSIONID是Session的标识,当客户端请求服务器端的时候,服务器端会检查是否已经给这个客户端创建过Session,也就是看客户端的请求中的header是否有Cooki ...