Vue生命周期
每天学一点,自己总结一下。记录一个萌新的爬坑之路,如果有错欢迎各位大佬指正O(∩_∩)O
生命周期
在vue中一共有10个生命周期,直接上代码,比较直观
{{count}}
<p><button @click="add">add</button></p>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
count: 1
},
methods: {
add: function() {
this.count++
}
},
beforeCreate: function() {
console.log('1-beforeCreate 初始化之前');
},
created: function() {
console.log('2-created 创建完成');
},
beforeMount: function() {
console.log('3-beforeMount 挂载之前');
},
mounted: function() {
console.log('4-mounted 被创建');
},
beforeUpdate: function() {
console.log('5-beforeUpdate 数据更新前');
},
updated: function() {
console.log('6-updated 被更新后');
},
activated: function() {
console.log('7-activated');
},
deactivated: function() {
console.log('8-deactivated');
},
beforeDestroy: function() {
console.log('9-beforeDestroy 销毁之前');
},
destroyed: function() {
console.log('10-destroyed 销毁之后')
}
})
</script>
其中activated,deactivated,主要用于组件,以后补充。
实际效果如图:
生命周期等以后遇到相关问题,继续回来补课。先记录到这里。
结语
每天记录一下学了什么,希望有所进步。萌新有说不清楚或者说错的地方欢迎大佬们吊打。??