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组件的生命周期分为三个部 ...
随机推荐
- gdb core 调试多线程
ref :http://blog.sina.com.cn/s/blog_62dc94eb0100flyn.html 如果目标进程已经core dump了,那么 gdb -c core xxx xx ...
- 071、如何定制calico网络的IP池（2019-04-16 周二）
参考https://www.cnblogs.com/CloudMan6/p/7571272.html 在前面的学习中,我们没有特别配置,calico会自动为网络分配subnet,当然我们也可以根据 ...
- 【转载】c++类的实例化与拷贝
https://www.cnblogs.com/chris-cp/p/3578976.html c++的默认拷贝构造函数,从深度拷贝和浅拷贝说起: https://blog.csdn.net/qq_2 ...
- 《Java编程思想第四版》第 16 章 设计范式-提到观察者模式
在由Gamma,Helm 和 Johnson 编著的<Design Patterns>一书中被定义成一个“里程碑”.那本书列出了解决这个问题的 23 种不同的方法 16.1.2 范式分类 ...
- Linux 之 rsyslog+mysql+LogAnalyzer 日志收集系统
作者:邓聪聪 LogAnalyzer 是一个 syslog 和其他网络事件数据的 Web 前端工具,提供简单易用的日志浏览.搜索和基本分析以及图表显示 由于公司部分项目需求使用日志记录系统,随笔记录 ...
- 堆溢出学习笔记(linux)
本文主要是linux下堆的数据结构及堆调试.堆溢出利用的一些基础知识 首先,linux下堆的数据结构如下 /* This struct declaration is misleading (but a ...
- 【原创】大叔问题定位分享（13）HBase Region频繁下线
问题现象:hive执行sql报错 select count(*) from test_hive_table; 报错 Error: java.io.IOException: org.apache.had ...
- 文本处理三剑客之awk（No.1）
示例1:只查看test.txt文件内的第3到第7行的内容 awk '{if(NR>=3 && NR<=7) print $0}' test.txt #其中的$0是输出整个行 ...
- 使用Selenium+ChromeDriver登录微博并且获取cookie
using OpenQA.Selenium;using OpenQA.Selenium.Chrome; public class GetSinaCookie { private static stri ...
- ansible的delegate_to、connection、和local_action
由于工作需要,经常需要把目标节点获得的信息写入执行节点文件日志. 所以经常用到delegate_to和connection,而local_action写法难看,基本不用. delegate_to和co ...