vue_实例_组件的生命周期
2024-08-29 07:39:54
重绘重排 中重复出现的是
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>
最新文章
- SVN源代码的版本控制系统使用简介
- python初识生成器 迭代器
- 十大关系数据库SQL注入工具一览
- Visual studio 2013安装及单元测试
- ContentProvider 使用示例（转载）
- andirod
- TMsgThread, TCommThread -- 在delphi线程中实现消息循环
- ubuntu下boost的配置方法
- linux(centos)搭建svn
- 使用 IDEA 创建 Maven Web 项目 （二）- 搭建 WEB 项目框架
- tomcat解压版安装（摘自网络）
- 全栈必备 JavaScript基础
- 从壹开始微服务 [ DDD ] 之五 ║聚合：实体与值对象 （上）
- 洛谷P1036选数（素数+组合数）
- react的Virtual DOM
- 7 种 join
- Openssl与私有CA搭建
- dedecms利用addfields body在首页调用文章内容
- Management Studio 插件生成安装包要点（以ProjkyAddin为例）
- Laya 1.x 按文件夹TS代码合并