一、生命周期图示
二、常见的生命周期函数
| 常见的生命周期函数 | 执行的时间 |
|---|---|
| beforeCreate | Vue初始化 |
| created | Vue初始化 |
| beforeMount | 模板未渲染到页面上 |
| mounted | 模板已经渲染到页面上 |
| beforeDestroy | 只有Vue实例销毁的时候或者调用vm.$destroy()这个方法 |
| destroyed | 只有Vue实例销毁的时候或者调用vm.$destroy()这个方法 |
| beforeUpdate | 数据发生变化时，先触发beforeUpdate |
| updated | 数据发生变化时，再触发updated |
| 温馨提示 | 生命周期函数，直接卸载Vue实例中，不写在methods中 |
三、生命周期函数执行场景
刷新页面，会依次触发以下函数
Vue销毁时，会依次触发以下函数
当数据发生改变时，会依次触发以下函数
四、测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue实例生命周期函数</title>
<!--引入vue.js库-->
<script src="../vue.js"></script>
</head>
<body>
<div id="root"></div>
<script>
/*生命周期函数就是vue实例在某一个是点会自动执行的函数*/
var vm = new Vue({
el: '#root',
template: "<div>{{content}}</div>",
data: {
content: 'hello world'
},
beforeCreate: function () {
console.log("beforeCreate");
},
created: function () {
console.log("created");
},
beforeMount: function () {
console.log("beforeMount");
/*模板未渲染到页面上*/
console.log(this.$el);
},
mounted: function () {
console.log("mounted");
/*模板已经渲染到页面上*/
console.log(this.$el);
},
beforeDestroy: function () {
console.log("beforeDestroy");
},
destroyed: function () {
console.log("destroyed");
},
beforeUpdate: function () {
console.log(this.$data);
console.log("beforeUpdate");
},
updated: function () {
console.log(this.$data);
console.log("updated");
}
});
</script>
</body>
</html>
五、项目开源地址
xxx
