<body>
<!--
1.什么是生命周期方法?
和wbpack生命周期方法一样,都是在从生到死的特定阶段调用的方法
ps:生命周期钩子 = 生命周期函数 = 生命周期事件
2.vue生命周期方法分类
2.1创建期间的生命周期方法
beforeCreate:
created:
beforeMount:
mounted:
2.2运行期间的生命周期方法
beforeUpdate:
updated:
2.3销毁期间的生命周期方法
beforeDestroy:
destroyed:
-->
<div id="app">
<button @click="change">切换</button>
<!--通过v-if来切换,会直接删除和重新创建-->
<one v-if="isShow"></one>
</div>
<!--Vue实例对象可以看作一个大的组件,自定义组件可以看作一个小组件
那么大的组件可以使用的属性和方法,在小的组件中也可也使用
例如:在vue实例中外面可以添加data,methods,那么在自定义的组件中也可以添加data,methods
所以Vue实例中可以使用生命周期方法,组件中也可也使用生命周期方法-->
<template id="one">
<div>
<p>我是组件</p>
</div>
</template>
<script>
Vue.component("one",{
template:"#one",
data:function(){
return{
msg:"小猪熊"
}
},
methods:{
say(){
console.log("say");
}
},
/*
在调用beforeDestroy的时候表示当前组件即将被销毁了
注意点:只要组件不被销毁,那么beforeDestroy就不会被调用
beforeDestroy函数是外面最后能够访问到组件数据和方法的函数
*/
beforeDestroy:function(){
// console.log("beforeDestroy");
// console.log(this.msg);
// console.log(this.say);
},
destroyed:function () {
/*.
在调用destroyed的时候,表示当前组件已经被销毁了
注意点:只要组件不被销毁,那么destroyed就不会被调用
不要在这个生命周期方法中再去操作组件中的数据和方法
*/
console.log("destroyed");
}
});
//1.创建一个Vue的实例对象
let vue = new Vue({
beforeCreate:function(){
/*
在调用beforeCreate的时候,仅仅表示Vue实例刚刚被创建出来
此时此刻还没有初始化好Vue实例中的数据和方法,所以此时此刻还不能访问Vue实例中保存的数据和方法
*/
// console.log(this.msg);
// console.log(this.say);
},
created:function(){
//在调用created的时候,是我们最早能够访问Vue实例中保存的数据和方法的地方
// console.log(this.msg);
// console.log(this.say);
},
beforeMount:function(){
//在调用beforeMount的时候,表示Vue已经编译好了最终模板,但是还没有将最终的模板渲染到界面上
// console.log(document.querySelector("p").innerHTML);
// console.log(document.querySelector("p").innerText);
},
mounted:function(){
/*
在调用mounted的时候,表示Vue已经完成了模板的渲染
*/
// console.log(document.querySelector("p").innerHTML);
// console.log(document.querySelector("p").innerText);
},
beforeUpdate:function(){
/*
在调用beforeUpdate的时候,表示Vue实例中保存的数据被修改了
注意点:只有保存的数据被修改了才会调用beforeUpdate,否则不会
在调用beforeUpdate的时候,数据已经更新了,但是界面还没有更新
*/
// console.log("beforeUpdate");
// console.log(document.querySelector("p").innerHTML);
// console.log(document.querySelector("p").innerText);
},
updated:function(){
/*
在调用updated的时候表示Vue实例中保存的数据被修改了,并且界面也同步了修改的数据了
也就是说数据和界面都同步更新之后会调用updated
*/
// console.log("beforeUpdate");
// console.log(document.querySelector("p").innerHTML);
// console.log(document.querySelector("p").innerText);
},
//2.告诉Vue的实例对象,将来需要控制界面上的哪个区域
el:'#app',
//3.告诉Vue的实例对象,被控制区域的数据是什么
//专门监听数据变化的
watch:{
},
//这里就是MVVM中的Model
data:{
msg:"小猪熊",
isShow:true
},
//专门用于存储监听事件回调函数
methods:{
say(){
console.log("say");
},
change(){
this.isShow = !this.isShow
}
},
//专门用于定义计算属性的
computed:{
},
//专门用于定义局部组件
components:{
}
});
</script>
</body>
Vue生命周期 (图解+代码解析)
猜你喜欢
转载自blog.csdn.net/mhblog/article/details/108319175
今日推荐
周排行