图片中文字过小,请用放大镜查看
vue实例
vue生命周期函数
函数名称 | 阶段 | 说明 |
beforeCreate | 创建阶段:创建之前 | 在beforeCreate执行的时候 data和methods中的数据尚未被初始化 |
created | 创建阶段:创建 | 在created执行的时候 data和methods已经被初始化好了。如果要调用methods中的方法,或者操作data中的数据 最早只能在created中操作 |
beforeMount | 创建阶段:挂载之前 | beforeMount执行的时候 模板已经在内存中编译好了但是尚未挂载到页面中去 此时页面还是旧的 |
mounted | 创建阶段:挂载 | mounted时实例创建期间最后一个生命周期函数,当执行完mounted就表示,实例已经被完全创建好了,此时,如果没有其他草错的话,这个实例就静静的躺在内存中,一动不动 |
beforeUpdate | 运行阶段:数据更新之前 | 当执行beforUpdate的时候 页面中显示的数据还是旧的 此时data中的数据是最新的 此时页面尚未和最新的数据同步 |
updated | 运行阶段:数据更新之后 | 当update执行的时候 页面和data中的数据已经同步,都是最新的数据 |
beforeDestroy | 销毁阶段:销毁之前 | 当执行beforeDestroy的时候,vue实例身上的数据尚未被销毁 |
destroyed | 销毁阶段:销毁之后 | 当执行destroyed的视乎,vue实例身上的数据被完全销毁 |
测试
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<input type="button" value="修改msg" @click="msg='no'">
<h3 id="h3">{{msg}}</h3>
</div>
<script src="js/vue.js"></script>
<script>
const vm = new Vue({
el : '#app',
data : {
msg : 'ok'
},
methods : {
show () {
console.log('执行了show方法!!')
}
},
beforeCreate () { //第一个生命周期函数 表示实例被完全创建出来之前会执行它
//console.log(this.msg) //返回undefined 找不到msg 表示 data没有被加载
//console.log(this.show()) //找不到此方法 表示methods 尚未加载
// 结论: 在beforeCreate执行的时候 data和methods中的数据尚未被初始化
},
created () { // 第二个生命周期函数
//console.log(this.msg);//返回ok 表示可以data中的数据已经被加载
//this.show(); //返回 执行了show方法!! 表示methods中的数据已经被加载
// 结论: 在created执行的时候 data和methods已经被初始化好了
//如果要调用methods中的方法,或者操作data中的数据 最早只能在created中操作
},
beforeMount (){ // 第三个生命周期行数 表示模板已经在内存中完成了 但是并没有渲染到真正的页面中去
//console.log(document.getElementById('h3').innerText);//返回{{msg}} 表示尚未渲染到页面上去
//beforeMount执行的时候 模板已经在内存中编译好了但是尚未挂载到页面中去 此时页面还是旧的
},
mounted () { //第四个生命周期函数 表示内存中的模板,已经真是的挂载到了页面中 用户已经可以看到渲染好的页面了
//console.log(document.getElementById('h3').innerText); 返回ok 表示可以得到页面中的内容
//结论: mounted时实例创建期间最后一个生命周期函数,当执行完mounted就表示,实例已经被完全创建好了,此时,如果没有其他草错的话,这个实例就静静的躺在内存中,一动不动
},
//运行中的两个事件
beforeUpdate () { //表示页面中的数据还没有被更行 数据被更新了
//console.log("页面中的数据是:"+document.getElementById('h3').innerText); 返回ok
//console.log("data中msg的数据是:"+this.msg); 返回no
//结论: 当执行beforUpdate的时候 页面中显示的数据还是旧的 此时data中的数据是最新的 此时页面尚未和最新的数据同步
},
updated (){ //表示页面中的数据和data中的数据保持同步
//console.log("页面中的数据是:"+document.getElementById('h3').innerText); 返回no
//console.log("data中msg的数据是:"+this.msg); 返回no
//结论:当update执行的时候 页面和data中的数据已经同步,都是最新的数据
}
})
</script>
</body>
</html>