【Vue】生命周期
文章目录
- 生命周期概念
- 一、生命周期图示
- 二、生命周期
-
- 1.beforeCreate（）{}
- 2.created（）{}
- 3.beforeMount（）{}
- 4.mounted（）{}
- 5.beforeUpdate（）{}
- 6.updated（）{}
- 7.beforeDestroy（）{}
- 8.destroyed（）{}
- 三、vm.$mount(el)
-
- 1.未加vm.$mount(el)
- 2.加上vm.$mount(el)
生命周期概念
从Vue实例创建、运行、到销毁期间，伴随着各种各样的事件，这些事件，统称为生命周期。
一、生命周期图示
二、生命周期
1.beforeCreate（）{}
初始化之前，data中的数据和methods中的方法不能拿到，还没有初始化
应用：页面重定向
<body>
<div id='app'>
{{msg}}
<input type="text" v-model="value">
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
msg: 10,
value: ''
},
methods: {
},
beforeCreate() {
console.log(this); // Vue$3 {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy(Vue$3), _self: Vue$3, …}
console.log(this.msg); // undefined
console.log('11111'); // 11111
}
})
</script>
</body>
2.created（）{}
初始化完成，data和methods已经初始化完成，第一个可以调用data和methods的生命周期
应用：数据请求，数据初始化
<body>
<div id='app'>
{{msg}}
<input type="text" v-model="value">
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
msg: 10,
value: ''
},
methods: {
},
created() {
this.msg = 20
console.log(this); // Vue$3 {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy(Vue$3), _self: Vue$3, …}
console.log(this.msg); // 20
console.log('22222'); // 22222
}
})
</script>
</body>
3.beforeMount（）{}
虚拟的DOM挂载，页面中数据还没有挂载，内存已编译完成，页面中还未渲染新的数据
<body>
<div id='app'>
{{msg}}
<input type="text" v-model="value">
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
msg: 10,
value: ''
},
methods: {
},
beforeMount() {
console.log('333333'); // 333333
}
})
</script>
</body>
4.mounted（）{}
真实的DOM，内存中编译好的模板渲染到浏览器页面中，第一个可以操作DOM元素的生命周期，如果要通过某些插件操作页面上的DOM节点，最早要在mounted中进行
<body>
<div id='app'>
{{msg}}
<input type="text" v-model="value">
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
msg: 10,
value: ''
},
methods: {
},
mounted() {
console.log('44444'); // 44444
}
})
</script>
</body>
5.beforeUpdate（）{}
更新之前，data中数据是最新的，页面中数据还是旧的，未同步，可以执行0次或多次
<body>
<div id='app'>
{{msg}}
<input type="text" v-model="value">
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
msg: 10,
value: ''
},
methods: {
},
beforeUpdate() {
console.log('55555'); // 55555
}
})
</script>
</body>
6.updated（）{}
更新之后，页面中和data中数据保持同步，都是最新的，可以执行0次或多次
<body>
<div id='app'>
{{msg}}
<input type="text" v-model="value">
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
msg: 10,
value: ''
},
methods: {
},
updated() {
console.log('66666'); // 66666
}
})
</script>
</body>
7.beforeDestroy（）{}
销毁之前
应用：清空定时器，页面监听
<body>
<div id='app'>
{{msg}}
<input type="text" v-model="value">
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
msg: 10,
value: ''
},
methods: {
},
beforeDestroy() {
console.log('beforeDestroy');
}
})
</script>
</body>
8.destroyed（）{}
销毁之后
<body>
<div id='app'>
{{msg}}
<input type="text" v-model="value">
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
msg: 10,
value: ''
},
methods: {
}
destroy() {
console.log('destroy');
}
})
</script>
</body>
三、vm.$mount(el)
没有定义控制区域el时，需要在实例化Vue后加vm.$mount(‘需要操作的DOM控制区域’)
1.未加vm.$mount(el)
<body>
<div id='app'>
{{msg}}
<!-- {{msg}} -->
</div>
<script>
const vm = new Vue({
// el: '#app',
data: {
msg: 10,
value: ''
},
methods: {
}
})
</script>
</body>
2.加上vm.$mount(el)
<body>
<div id='app'>
{{msg}}
<!-- 10 -->
</div>
<script>
const vm = new Vue({
// el: '#app',
data: {
msg: 10,
value: ''
},
methods: {
}
})
vm.$mount('#app')
</script>
</body>