【一】Vue的生命周期
【1】详解
- Vue.js生命周期是指在Vue实例从创建到销毁的过程中，会经历一系列的钩子函数，这些钩子函数可以让我们在不同的阶段插入自定义的代码。
- Vue的生命周期分为三个主要阶段：
- 创建阶段
- 更新阶段
- 销毁阶段。
（1）创建阶段
- beforeCreate:
- 在实例初始化之后，数据观测和事件配置之前被调用。
- 在这个阶段，Vue实例的属性和方法尚未初始化。
- created:
- 在实例创建完成后被立即调用。
- 在这个阶段，Vue实例已经初始化，并且可以访问到data属性和methods方法。
（2）更新阶段
- beforeMount:
- 在挂载开始之前被调用。在这个阶段，模板编译已完成，但尚未将组件挂载到DOM中。
- mounted:
- 在挂载完成后被调用。
- 在这个阶段，组件已经被挂载到DOM中，可以操作DOM元素。
（3）更新阶段
- beforeUpdate:
- 在组件更新之前被调用。
- 在这个阶段，组件的数据已经被修改，但DOM尚未更新。
- updated:
- 在组件更新完成后被调用。
- 在这个阶段，组件的数据已经更新，并且DOM也已经重新渲染。
（4）销毁阶段
-
beforeDestroy:
- 在实例销毁之前被调用。
- 在这个阶段，实例仍然可以访问data和methods，但已经无法访问到DOM元素。
-
destroyed:
- 在实例销毁后被调用。
- 在这个阶段，实例已经被销毁，所有的事件监听和观察者都已被移除。
-
通过这些生命周期钩子函数，我们可以在不同的阶段执行一些特定的操作，例如初始化数据、发送请求、添加事件监听器等。
-
这样可以更好地控制Vue实例的行为，并与外部环境进行交互。
【2】小结
-
new Vue()- 创建出来
-
页面关闭
- 被销毁掉
-
这整个过程经历了一个周期
-
Vue 提供了一些钩子函数[写了就会执行，不写就不会被执行]
- 到某个阶段，就会触发某个函数的执行
-
8个生命周期钩子函数
beforeCreate- 创建Vue实例之前调用
created- 创建Vue实例成功后调用
beforeMount- 渲染DOM之前调用
mounted- 渲染DOM之后调用
beforeUpdate- 重新渲染之前调用（数据更新等操作时，控制DOM重新渲染）
updated- 重新渲染完成之后调用
beforeDestroy- 销毁之前调用
destroyed- 销毁之后调用
-
8个声明周期钩子，什么情况会用到
- created:
- 用的最多，变量初始化完成了(data中得数据)，在这里，我们发送ajax请求
- beforeDestroy：
- 组件销毁之前会执行
- 组件创建，就执行一个定时任务[每隔1s，打印一个helloworld]
- 组件销毁，定时任务要销毁，如果定时任务不销毁，会一直执行
- 组件销毁之前会执行
- created:
（1）beforeCreate
- 生命周期钩子函数
beforeCreate在创建Vue实例之前调用。 - 这时候Vue实例还没有初始化完成，通常在这个阶段我们可以进行一些初始化工作，比如配置项的处理、全局事件的处理等。
例如：
// Vue实例化之前的代码执行
new Vue({
beforeCreate() {
console.log('beforeCreate钩子函数被调用');
},
//...
});
（2）created
- 生命周期钩子函数
created在创建Vue实例成功后调用。 - 在这个阶段，Vue实例已经完成了数据绑定、计算属性等操作，但是DOM还没有被挂载，可以在这个阶段进行一些初始化操作。
例如：
// Vue实例化之后的代码执行
new Vue({
created() {
console.log('created钩子函数被调用');
// 可以在这里进行数据请求等异步操作
},
//...
});
（3）beforeMount
- 生命周期钩子函数
beforeMount在渲染DOM之前调用。 - 在这个阶段，Vue实例已经完成了数据绑定和编译模板，但还没有将其挂载到真实的DOM上，可以在这个阶段进行一些DOM操作的准备工作。
例如：
new Vue({
beforeMount() {
console.log('beforeMount钩子函数被调用');
// 可以在这里进行DOM操作的准备工作
},
//...
});
（4）mounted
- 生命周期钩子函数
mounted在渲染DOM之后调用。 - 在这个阶段，Vue实例已经将模板编译成了真实的DOM，并挂载到了页面上，可以在这个阶段进行一些需要操作DOM的任务。
例如：
new Vue({
mounted() {
console.log('mounted钩子函数被调用');
// 可以在这里操作DOM
},
//...
});
（5）beforeUpdate
- 生命周期钩子函数
beforeUpdate在重新渲染之前调用。 - 在数据更新时，Vue会比较数据变化，然后重新渲染相应的DOM。在这个阶段，可以进行一些更新前的操作。
例如：
new Vue({
beforeUpdate() {
console.log('beforeUpdate钩子函数被调用');
// 可以在这里进行DOM操作或其他数据更新前的操作
},
//...
});
（6）updated
- 生命周期钩子函数
updated在重新渲染完成之后调用。 - 在这个阶段，DOM已经被更新完毕，并且是同步的。可以进行一些更新后的DOM操作。
例如：
new Vue({
updated() {
console.log('updated钩子函数被调用');
// 可以在这里进行DOM操作或其他数据更新后的操作
},
//...
});
（7）beforeDestroy
- 生命周期钩子函数
beforeDestroy在Vue实例销毁之前调用。 - 在这个阶段，Vue实例还完好无损，可以进行一些销毁前的清理工作，如清除定时器、解绑事件等。
例如：
new Vue({
beforeDestroy() {
console.log('beforeDestroy钩子函数被调用');
// 可以在这里进行清理工作
},
//...
});
（8）destroyed
- 生命周期钩子函数
destroyed在Vue实例销毁之后调用。 - 在这个阶段，Vue实例已经被销毁，此时无法继续访问实例的方法和属性。
例如：
new Vue({
destroyed() {
console.log('destroyed钩子函数被调用');
// 可以在这里进行一些销毁后的清理工作
},
//...
});
【3】案例演示
- 全局组件，生命周期
<body>
<div id="app">
<h1>生命周期钩子</h1>
<input type="text" v-model="username"> ------> {{username}}
<h1>使用全局组件</h1>
<button @click="hideModel">显示全局组件</button>
<child v-if="show"></child>
</div>
</body>
<script>
// 定义一个全局组件，组件有自己的html/css/js/事件....
// `` 模版字符串,es6中的语法
// 在组件中，data必须是函数，返回对象
Vue.component('child', {
template: `
<div>
<button @click="back">后退</button>
<button>{{index_home}}</button>
<button @click="forword">前进</button>
</div>
`,
data() {
return {
index_home: '首页',
}
},
methods: {
back() {
console.log('后退成功')
},
forword() {
console.log('前进成功')
},
},
// 生命周期函数
beforeCreate() {
console.log('beforeCreate钩子函数被调用');
},
created() {
console.log('created钩子函数被调用');
// 可以在这里进行数据请求等异步操作
// 启动一个定时器
this.t = setInterval(() => {
console.log('hello world')
}, 1000)
},
beforeMount() {
console.log('beforeMount钩子函数被调用');
// 可以在这里进行DOM操作的准备工作
},
mounted() {
console.log('mounted钩子函数被调用');
// 可以在这里操作DOM
},
beforeUpdate() {
console.log('beforeUpdate钩子函数被调用');
// 可以在这里进行DOM操作或其他数据更新前的操作
},
updated() {
console.log('updated钩子函数被调用');
// 可以在这里进行DOM操作或其他数据更新后的操作
},
beforeDestroy() {
console.log('beforeDestroy钩子函数被调用');
// 可以在这里进行清理工作
// 销毁定时器
clearInterval(this.t)
this.t = null
},
destroyed() {
console.log('destroyed钩子函数被调用');
// 可以在这里进行一些销毁后的清理工作
},
})
var vm = new Vue({
el: '#app',
data: {
username: '',
show: false,
},
methods: {
hideModel() {
this.show = !this.show
},
},
}
)
</script>