生命周期
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestory
- destoryed
辣子鸡:香辣入口,犹如吃了炫迈一样 - - - 根本停不下来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.6.10.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
},
methods: {
},
beforeCreate() {// 这是我们遇到的第一个周期函数,表示 实例完全被创建出来之前,会执行它
//注意:在 beforeCreate 生命周期函数执行的时候,data和methods中的数据还没有被初始化
},
created() {//这是第二个生命周期函数
//在created中;data和methods 都已经被初始化好啦
//如果调用 methods中的 方法,或者操作data 中的数据 最早 ,只能在created 中操作
},
beforeMount() {//第三个 周期函数 表示模版已经在内存中编辑完成啦;但是尚未吧模版渲染到页面中
//在 beforeMount 执行的时候, 页面中的元素 ,还没有被真正替换过来,只是之前写的(如:data中的属性值)一些模版字符串
},
mounted() {//第四个周期函数 表示 内存中的模版;已经真实的挂载到页面中 ,用户已经可以看到渲染好的页面了
//注意: mounted 是 实例创建期间的最后一个生命周期函数;但执行晚 mounted 就表示:实例已经被完全创建好了;此时 如果没有其他操作的话;这个实例 就静静的躺在我们的内存中
},
beforeUpdate() { // 这个时候;表示 我们的界面还没有被更新(但是数据已经被更新过了)
//得出的结论是:当执行beforeUpdate 的时候,页面中的显示的数据;还是旧的;此时data 数据是最新的;页面尚未和 最新的数据保持同步
},
updated() {// updated事件执行的时候;页面和data 数据已经保持同步了;都是最新的。
},
beforeDestroy() {
//当执行 beforeDestroy 钩子函数的时候;Vue实例就已经从运行阶段;进入到了 销毁阶段;
//当执行beforeDestroy 的时候,实例身上所有的data 和 所有的methods ,以及过滤器、指令...都处于可用状态,还没有真正执行销毁的过程
},
destroyed() {//当执行到 destroyed 函数的时候 ,组件已经被完全销毁了,此时,组件中的所有数据、方法、指令、过滤器... 都已经不可以使用了 。
}
})
</script>
</body>
</html>