day--27--vue生命周期总结

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>生命周期总结</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<!--
1、常用的生命周期钩子
mounted:发送ajax请求、启动定时器、绑定自定义事件、订阅消息【等初始化操作】
beforeDestory:清除定时器、解绑自定义事件、曲线订阅消息等【收尾工作】
2、销毁vm实例
销毁后vm开发工具看不到任何信息
销毁后自定义事件失效，但是原生DOM事件有效
一般不会在beforeDestory操作数据，因为操作了，也不会触发更新流程
-->
<h2 :style="{opacity}">欢迎学习vue</h2>
<button @click="opacity=1">透明度设置为1</button>
<button @click="stop">点击停止变化</button>
</div>

<script type="text/javascript">
new Vue({
el: "#root",
data: {
opacity: 1,
},
methods: {
stop() {
//clearInterval(this.timer);
this.$destroy();
},
add() {
console.log("add");
this.n++;
},
bye() {
console.log("bye");
this.$destroy();
console.log("bye9999");
},
},

beforeCreate() {
console.log("beforeCreate");
//debugger;
},
created() {
console.log("created");
},

beforeMount() {
console.log("beforeMount");
},
// vue 完成模板的解析 并把真实的dom 元素放到页面后（挂在完毕）调用mounted
mounted() {
this.timer = setInterval(() => {
// console.log("mounted", this);
this.opacity -= 0.01;
if (this.opacity <= 0) this.opacity = 1;
}, 16);
},

beforeUpdate() {
console.log("beforeUpdate");
},
updated() {
console.log("updated");
},

beforeDestroy() {
console.log("beforeDestroy");
clearInterval(this.timer);
},
destroyed() {
console.log("destroyed");
},
});
</script>
</body>
</html>
posted @ 2023-07-18 00:23  雪落无痕1  阅读(12)  评论(0)    收藏  举报