【Vue】vue中VM的生命周期及加载和销毁实例
2023-09-11 14:14:57 时间
将要创建 | 调用beforeCreate函数 |
创建完毕 | 调用 created函数 |
将要挂载 | 调用beforeMount函数 |
挂载完毕(重要) | 调用mounted函数 |
将要更新 | 调用beforeUpdate函数 |
更新完毕 | 调用updated函数 |
将要销毁(重要) | 调用beforeDestory函数 |
销毁完毕 | 调用destoryed函数 |
常用的生命周期钩子:
1.mounted:发送ajax请求、启动定时器、绑定自定义事件、订阅消息等(初始化操作)
2.beforeDestory:清除定时器、解除自定义事件、取消订阅消息等(首尾工作)
关于销毁Vue实例:
1.销毁后借助Vue开发者工具看不到任何信息
2.销毁后自定义事件会失效,但原生DOM事件依然有效
3.一般不会再beforeDestroy操作数据,因为即便操作数据,也不会再触发更新流程了
原文链接:https://blog.csdn.net/m0_58151273/article/details/122359649
【mounted】挂载实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo</title>
</head>
<script type="text/javascript" src="vue.js"></script>
<body>
<div id="box">
<h2 :style="{opacity}">我是李逵</h2>
<button @click="begin">开始变化效果</button>
<button @click="stop">停止变化效果</button>
</div>
</body>
<script type="text/javascript">
var box = new Vue({
el: "#box",
data: {
opacity:1
},
methods: {
begin(){
this.timer=setInterval(()=>{
this.opacity=this.opacity-0.01;
if(this.opacity<=0){
this.opacity=1;
}
}
,16)
},
stop(){
// 销毁掉vm(box)
this.$destroy();
}
},
// vm(box)挂载后执行
mounted() {
this.timer=setInterval(()=>{
this.opacity=this.opacity-0.01;
if(this.opacity<=0){
this.opacity=1;
}
}
,16)
},
// vm(box)即将销毁时,清除掉定时器
beforeDestory(){
clearInterval(this.timer)
}
})
</script>
</html>
相关文章
- 基于 Vue.js 之 iView UI 框架非工程化实践记要 使用 Newtonsoft.Json 操作 JSON 字符串 基于.net core实现项目自动编译、并生成nuget包 webpack + vue 在dev和production模式下的小小区别 这样入门asp.net core 之 静态文件 这样入门asp.net core,如何
- 【Vue】错误 : 无法加载文件 C:UsersAdministratorAppDataRoamingnpmvue.ps1,因为在此系统上禁止运行脚本的解决方法
- 【Vue】Vue通过路由实现父子【嵌套】功能(图文+完整代码)
- vue+iview使用webpack打包工具上线后丢包问题Loading chunk xxx failed
- vue 开发中的常见问题
- Vue 兼容性问题 Vue-cli3.x/4.x 兼容低版本浏览器的方案
- Vue vue-awesome-swiper 的坑
- vue.js-详解三大流行框架VUE_快速进阶前端大咖-Vue基础
- vue可拖拽树
- Vue-cli2.0报错[WDS] Disconnected的解决方式
- Vue知识点总结(23)——Vue-Cli3脚手架基本配置和快速原型开发(超级详细)
- VUE图片懒加载-vue lazyload插件的简单使用
- 用 vue cli 脚手架搭建单页面 Vue 应用(进阶2)
- vue解决点击不同按钮,回显数据时相同的问题
- vue项目中两种回车键搜索功能实现
- vue学习笔记十:Jquery VS Vue之页面动画明细对照
- vue学习笔记三:Jquery VS Vue之差异比较概览
- Vue Router安装与基本使用
- 一个vue请求接口渲染页面的例子
- vue项目中 如何让外部引入的js模块 的this值 指向vue实例
- 基于vue+leaflet+echart的足迹分享评论平台
- 浅析Vue数据更新了但页面不更新的7种情况及vue异步更新带来的数据响应的误解
- springboot+vue影城管理系统(源码+文档)
- Vue开发实例目录总索引
- Vue经典实例之数据搜索、数据过滤(简单易懂)
- vue 挂载点 实例 模板