vue2和vue3生命周期的区别
<template>
<div>
<h2>{{title}}</h2>
<ul>
<h3>{{num}}</h3>
<button @click="num++">+</button>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
title: "Hello Vue!",
num:0
};
},
methods:{
show(){
console.log('我是show方法');
},
},
beforeCreate() {
console.log("-------beforeCreate--------");
/*
beforeCreate钩子函数在组件创建之前被调用，该函数被调用的时候，props,data,mehtods都没有被创建
该组件的用处不是很大，但地位很高。
*/
console.log("data", this.msg);
//console.log('props',this.title);
//this.show();
},
created(){
console.log("-------created--------");
/*
created钩子函数是在init Injections&Activitys之后被调用，此时已经完成props,data,methods的创建，所以在此处
调用这些方法或方法
模板或者DOM还没有被创建
此钩子函数重要的用途是用来向服务端网络请求数据
在此钩子函数之后的钩子中也能完成网络请求，但是一般都是在这里完成最佳
*/
this.show();
},
beforeMount(){
console.log('-------beforeMount--------');
/*
该钩子函数之前的环节主要工作是将数据读取后填充到模板上，之后有读到内存中暂时存储
*/
console.log('dom',document.querySelector('h2'));
},
mounted(){
console.log('-------mounted--------');
console.log('dom',document.querySelector('h2'));
},
beforeUpdate(){
console.log('---------beforeUpdate-----------');
/*
beforeUpdate钩子函数中的特征
数据已经变了
但是页面还没来得及渲染
数据是新的，而页面是旧的
*/
console.log('data',this.num);
console.log('dom',document.querySelector('h3').innerHTML);
},
updated(){
console.log('---------updated-----------');
console.log('data',this.num);
console.log('dom',document.querySelector('h3').innerHTML);
},
beforeDestroy(){
console.log('-----------beforeDestroy--------------');
/*
此处是准备在销毁之前调用的钩子
此处特征，数据props，data,methods都可以访问，但是DOM已经被移除了
*/
console.log('data',this.num);
// console.log('dom',document.querySelector('h3').innerHTML);
},
destroyed(){
console.log('-----------destroyed--------------');
console.log('data',this.num);
}
};
</script>
<style>
</style>
2024最新激活全家桶教程，稳定运行到2099年，请移步至置顶文章：https://sigusoft.com/99576.html
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。 文章由激活谷谷主-小谷整理,转载请注明出处：https://sigusoft.com/10919.html
