大家好,又见面了,我是你们的朋友全栈君。
定义:vue的生命周期是指vue实例从初始化创建到实例销毁的过程。期间会有8个钩子函数的调用。
vue的钩子函数图解:
vue的钩子函数使用总结:
1、beforeCreate(创建前):beforeCreate钩子函数,这个时候,vue实例的挂载元素$el和数据对象data都为undefined,还未初始化。无法访问到数据和真实的dom和data中的数据,可以在这里面使用loading
2、created(创建后):created函数中可以对data对象里面的数据进行使用和更改,不会触发其他的钩子函数,一般可以在这里做初始数据的获取,也可以结束loading; 这里进行dom操作需要使用vue.nextTick()方法
3、beforeMount(挂载前):beforeMount钩子函数,vue实例的$el和data都初始化了,但还是虚拟的dom节点,具体的data.filter还未替换。在这里也可以更改数据,不会触发其他的钩子函数,一般可以在这里做初始数据的获取
4、mounted(挂载后):mounted钩子函数,此时,组件已经出现在页面中,数据、真实dom都已经处理好了,事件都已经挂载好了,data.filter成功渲染,可以在这里操作真实dom等事情…
5、beforeUpdate (更新前):当组件或实例的数据更改之后,会立即执行beforeUpdate,然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染,一般不做什么事儿
6、updated(更新后):当更新完成后,执行updated,数据已经更改完成,dom也重新render完成,可以操作更新后的虚拟dom
7、beforeDestroy(销毁前):当经过某种途径调用$destroy方法后,立即执行beforeDestroy,一般在这里做一些善后工作,例如清除计时器、清除非指令绑定的事件等等
8、destroyed(销毁后):vue实例解除了事件监听以及和dom的绑定(无响应了),但DOM节点依旧存在。这个时候,执行destroyed,在这里做善后工作也可以
vue的钩子函数代码验证:
console打印效果:
demo验证代码:
<template>
<div>
<h3>{
{testMsg}}</h3>
<p style="color:red;" id="testNum">{
{testNum}}</p>
<div><button @click="changNum()">点击修改num的数值大小</button></div>
<p style="color:red;">过滤器处理后的值:{
{testNum | add(10,20)}}</p>
<div><button @click="destroyVue()">销毁</button></div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
// data是数据对象
data () {
return {
testMsg:"原始值",
num:2,
}
},
//computed对象包括需要计算的属性,属性值依赖于别的数据
computed:{
testNum:function(){
let that =this;
return that.num * 3;
},
},
//检测某一属性值的变化,属性值的变化会造成其他dom变化
watch:{
testNum:function(val){
if(val>9){
console.log("testNum的值变得大于9了!");
}
}
},
//组件内部的方法
methods:{
changNum:function(){
let that =this;
that.num=5;
},
destroyVue:function(){
this.$destroy();
}
},
//过滤器对象,filter的第一个参数默认是当前的item值
filters:{
add:function(val,num1,num2){
return val+num1+num2;
},
},
//vue实例创建前
beforeCreate:function(){
console.group('beforeCreate 创建前状态===============》'); //console的分组打印
console.log("%c%s", "color:red","el : " + this.$el); //输出undefined
console.log("%c%s", "color:red","data : " + this.$data); //输出undefined
console.log("%c%s", "color:red","testMsg: " + this.testMsg);//输出undefined
console.log("%c%s", "color:red","testNum: " + this.testNum);//输出undefined
console.groupEnd();
},
//vue实例创建完成,可以进行data对象中数据操作,一般获取初始化数据
created:function(){
console.group('created 创建完成状态===============》');
console.log("%c%s", "color:red","el : " + this.$el); //输出undefined
console.log("%c%s", "color:red","data : " + this.$data); //输出[Object Object] ,初始化成功
console.log("%c%s", "color:red","testMsg: " + this.testMsg);//输出:"原始值",初始化成功
console.log("%c%s", "color:red","testNum: " + this.testNum);//输出:6,可以computed计算
console.groupEnd();
},
//vue实例挂载前,不能获取$el元素,生成的虚拟dom
beforeMount:function(){
console.group('beforeMount 挂载前状态===============》');
console.log("%c%s", "color:red","el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //初始化成功
console.log("%c%s", "color:red","testMsg: " + this.testMsg);//初始化成功
console.log("%c%s", "color:red","testNum: " + this.testNum);//初始化成功
console.log($("#testNum").text()); //无输出,dom未生成
console.groupEnd();
},
//
mounted:function(){
console.group('mounted 挂载完成的状态===============》');
console.log("%c%s", "color:red","el : " + this.$el); //输出[object HTMLDivElement],初始化成功
console.log("%c%s", "color:red","data : " + this.$data); //初始化成功
console.log("%c%s", "color:red","testMsg: " + this.testMsg);//初始化成功
console.log("%c%s", "color:red","testNum: " + this.testNum);//初始化成功
console.log($("#testNum").text()); //输出6,初始化成功
console.groupEnd();
},
//更改data对象中数据后,页面渲染新数据前的状态
beforeUpdate:function(){
console.group('beforeUpdate 更新前的状态===============》');
console.log("%c%s", "color:red","el : " + this.$el); //初始化成功
console.log("%c%s", "color:red","data : " + this.$data); //初始化成功
console.log("%c%s", "color:red","testMsg: " + this.testMsg);//初始化成功
console.log("%c%s", "color:red","testNum: " + this.testNum);//初始化成功
console.log($("#testNum").text()); //初始化成功
console.groupEnd();
},
//数据更改后并重新渲染后,dom也重新更新了
updated:function(){
console.group('updated 更新完成的状态==========');
console.log("%c%s", "color:red","el : " + this.$el); //初始化成功
console.log("%c%s", "color:red","data : " + this.$data); //初始化成功
console.log("%c%s", "color:red","testMsg: " + this.testMsg);//初始化成功
console.log("%c%s", "color:red","testNum: " + this.testNum);//初始化成功
console.log($("#testNum").text()); //初始化成功
console.groupEnd();
},
//销毁前
beforeDestroy:function(){
console.group('beforeDestroy 销毁前的状态');
console.log("%c%s", "color:red","el : " + this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","testMsg: " + this.testMsg);
console.log("%c%s", "color:red","testNum: " + this.testNum);
console.log($("#testNum").text());
console.groupEnd();
},
//销毁后修改data数据无效,生成的dom依旧存在
destroyed(){
console.group('destroyed 销毁完成的状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","testMsg: " + this.testMsg);
console.log("%c%s", "color:red","testNum: " + this.testNum);
console.log($("#testNum").text());
console.groupEnd();
},
}
</script>
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/128650.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...