Vue生命周期-钩子函数(三)
Vue生命周期-钩子函数
官网图
钩子函数
| 钩子函数 | 描述 |
|---|---|
| beforeCreate | 创建Vue实例之前调用 |
| created | 创建Vue实例成功后调用（可以在此处发送异步请求后端数据） |
| beforeMount | 渲染DOM之前调用 |
| mounted | 渲染DOM之后调用 |
| beforeUpdate | 重新渲染之前调用（数据更新等操作时，控制DOM重新渲染） |
| updated | 重新渲染完成之后调用 |
| beforeDestroy | 销毁之前调用 |
| destroyed | 销毁之后调用 |
# new Vue这个对象---》管理一个标签---》把数据，渲染到页面上
# 组件---》对象管理某一个html片段
# 生命周期--》8个声明周期钩子函数---》执行到某个地方，就会执行某个函数
钩子函数 描述
beforeCreate 创建Vue实例之前调用，data空的
created 创建Vue实例成功后调用
beforeMount 渲染DOM之前调用
mounted 渲染DOM之后调用---》看到页面了，插值已经进去了
beforeUpdate 重新渲染之前调用（数据更新等操作时，控制DOM重新渲染）
updated 重新渲染完成之后调用
beforeDestroy 销毁之前调用
destroyed 销毁之后调用
# 有用的：
created：向后端发请求拿数据，发送ajax请求
mounted：定时任务，延迟任务 js中
beforeDestroy：定时任务关闭，销毁一些操作
# 定时器的开启与关闭
this.t = setInterval(() => {
console.log('daada')
}, 3000)
clearInterval(this.t)
this.t = null
使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="app">
<button @click="handleC">点我显示组件</button>
<child v-if="is_show"></child>
<hr>
</div>
</body>
<script>
// 1 定义个组件---》生命周期
Vue.component('child', {
template: `
<div>
<h1>{{name}}</h1>
<button @click="handleC">点我弹窗</button>
</div>`,
data() {
return {
name: "lqz",
t:'',
}
},
methods: {
handleC() {
this.name = "彭于晏"
alert(this.name)
}
},
// 生命周期钩子函数8个
beforeCreate() {
console.log('当前状态：beforeCreate')
console.log('当前el状态：', this.$el)
console.log('当前data状态：', this.$data)
console.log('当前name状态：', this.name)
},
created() {
// 向后端加载数据
console.log('当前状态：created')
console.log('当前el状态：', this.$el)
console.log('当前data状态：', this.$data)
console.log('当前name状态：', this.name)
},
beforeMount() {
console.log('当前状态：beforeMount')
console.log('当前el状态：', this.$el)
console.log('当前data状态：', this.$data)
console.log('当前name状态：', this.name)
},
mounted() {
console.log('当前状态：mounted')
console.log('当前el状态：', this.$el)
console.log('当前data状态：', this.$data)
console.log('当前name状 态：', this.name)
//用的最多，向后端加载数据，创建定时器等
// setTimeout:延迟执行
// setInterval：定时执行,每三秒钟打印一下daada
this.t = setInterval(() => {
console.log('daada')
}, 3000)
},
beforeUpdate() {
console.log('当前状态：beforeUpdate')
console.log('当前el状态：', this.$el)
console.log('当前data状态：', this.$data)
console.log('当前name状态：', this.name)
},
updated() {
console.log('当前状态：updated')
console.log('当前el状态：', this.$el)
console.log('当前data状态：', this.$data)
console.log('当前name状态：', this.name)
},
beforeDestroy() {
console.log('当前状态：beforeDestroy')
console.log('当前el状态：', this.$el)
console.log('当前data状态：', this.$data)
console.log('当前name状态：', this.name)
},
destroyed() {
console.log('当前状态：destroyed')
console.log('当前el状态：', this.$el)
console.log('当前data状态：', this.$data)
console.log('当前name状态：', this.name)
//组件销毁，清理定时器
clearInterval(this.t)
this.t = null
// console.log('destoryed')
},
})
var vm = new Vue({
el: '#app',
data: {
is_show: false
},
methods: {
handleC() {
this.is_show = !this.is_show
}
},
})
</script>
</html>
