目录
生命周期
一、Vue实例的生命周期
从Vue实例创建、运行、到销毁期间,总是伴随着各种各样的事件,这些事件,就是Vue实例的生命周期。
二、生命周期钩子
生命周期钩子:就是生命周期事件的别名。生命周期钩子又叫生命周期函数 也叫生命周期事件。
创建期间的生命周期函数:
三 钩子函数
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- update
- beforeDestroy
- destroyed
create
let vm = new Vue()
mount
挂载,把div挂载到组件中
update
let vm = new Vue({
el: '#box',
data: {
isShow: true // 修改这个内容
},
methods: {
handleClick() {
console.log('我是根组件')
}
}
})
1.bedoreCreate
2.created
3.beforeMount
4.mounted(用得最多)
这时候可以向后端发送数据了
5.beforeUpdate
6.updated
7.beforeDestroy
8.destroyed
组件销毁 - 给组件写一个定时器
setTimeout() // 延迟3s干什么事
setInterval() // 延迟3s干什么事
定时任务
setInterval(
function () {
alert(444)
},3000
)//每隔3s钟干什么事
12345
延迟任务
setTimeout(
function () {
alert(33333)
},3000) //延迟3s钟干什么事
测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="box">
<child v-if="isShow"></child>
{{name}}
</div>
</body>
<script>
Vue.component('child', {
template: `
<div>我是组件的div</div>`,
data(){
return {
t:null,
}
},
beforeCreate() {
console.log('beforeCreate')
},
created() {
console.log('created')
},
beforeMount() {
console.log('beforeMount')
},
mounted() {
//用的最多,向后端加载数据,创建定时器等
console.log("页面已被vue实例渲染, data, methods已更新");
console.log('mounted')
//起一个定时器,每隔三秒,打印一行
this.t = setInterval(function () {
console.log('daada')
}, 3000)
},
beforeUpdate() {
console.log('beforeUpdate')
},
updated() {
console.log('updated')
},
beforeDestroy() {
console.log('beforeDestroy')
},
destroyed() {
//组件销毁,清理定时器
clearInterval(this.t)
this.t = null
console.log('destroyed')
},
})
var vm = new Vue({
el: '#box',
data: {
name:'lqz',
isShow:true
},
beforeUpdate() {
console.log('根的---beforeUpdate')
},
updated() {
console.log('根的---updated')
},
})
</script>
</html>