生命周期【Vue】
文章目录
- 引出生命周期
-
- 实现方式一：通过外部的定时器实现
- 实现方式二：methods
- 实现方式三：生命周期mounted
- 分析生命周期
- 总结生命周期
引出生命周期
实现一个透明度来回变化的效果。
实现方式一：通过外部的定时器实现
缺点：代码有点割裂，代码尽量写在Vue实例里面，全局配置可以写在外面。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>引出生命周期title>
<script src="../js/vue.js">script>
head>
<body>
<div id="root">
<h2 :style="{opacity}">欢迎学习Vueh2>
div>
body>
<script>
Vue.config.productionTip = false
const vm = new Vue({
el:'#root',
data:{
opacity:1,
},
})
// 通过外部的定时器实现
setInterval(()=>{
vm.opacity -= 0.01
if(vm.opacity <= 0) vm.opacity=1
},16)
script>
html>
实现方式二：methods
methods中使用事件回调不可取，不符合需求。
此时，data中数据变化，重新解析模板，每个重新解析，又会再次调用开启定时器，如此一来，会极大消耗资源，并且屏幕出现鬼畜效果。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7uakwmN2-1659269367736)(2022-07-31-18-15-12.png)]
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>引出生命周期title>
<script src="../js/vue.js">script>
head>
<body>
<div id="root">
<h2 :style="{opacity}">欢迎学习Vueh2>
{{change()}}
div>
body>
<script>
Vue.config.productionTip = false
const vm = new Vue({
el:'#root',
data:{
opacity:1,
},
methods:{
change(){
setInterval(()=>{
console.log("change")
this.opacity -= 0.01
if(this.opacity <= 0) vm.opacity=1
},16)
}
}
})
script>
html>
实现方式三：生命周期mounted
Vue完成模板的解析并把初始的真实DOM元素放入雅页面后（挂在完毕）调用 mounted，只调用了一次，开启了一个定时器。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YSD7FoWV-1659269367739)(2022-07-31-18-20-12.png)]
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>引出生命周期title>
<script src="../js/vue.js">script>
head>
<body>
<div id="root">
<h2 :style="{opacity}">欢迎学习Vueh2>
div>
body>
<script>
Vue.config.productionTip = false
const vm = new Vue({
el:'#root',
data:{
opacity:1,
},
// Vue完成模板的解析并把初始的真实DOM元素放入雅页面后（挂在完毕）调用 mounted
mounted(){
console.log("mounted")
setInterval(()=>{
this.opacity -= 0.01
if(this.opacity <= 0) vm.opacity=1
},16)
},
})
script>
html>
总结：
生命周期：
- 又名：生命周期回调函数、生命周期函数、生命周期钩子。
- 是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。
- 生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
- 生命周期函数中的this执行是vm 或 组件实例对象。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ETs206ms-1659269367740)(./lifecycle.png)]
分析生命周期
vm销毁后 原生回调好使
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MUUDH71A-1659269367742)(2022-07-31-18-30-09.png)]
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分析生命周期title>
<script src="../js/vue.js">script>
head>
<body>
<div id="root">
<h2>当前的n值是{{n}}h2>
<button @click="add">点我n+1button>
<button @click="bye">点我销毁vmbutton>
div>
body>
<script>
Vue.config.productionTip = false
const vm = new Vue({
el:'#root',
// // template全部替换el指向元素，的有一个根元素
// template:`
//
// 当前的n值是{{n}}
//
//
// `,
data:{
n:1
},
methods:{
add(){
this.n++
},
bye(){ // vm销毁后 原生回调好使
console.log("bye")
this.$destroy()
}
},
beforeCreate() {
// 此时vue中没有数据，还没绑定，vm实例中没有_data和n
console.log("beforeCreate")
// console.log(this) // Vue
// debugger
},
created() {
// 此时vue实例上有了_data和n及其getset
console.log("created")
// console.log(this)
// debugger
},
beforeMount() {
// 这里边操作DOM无效
console.log("beforeMount")
// console.log(this)
// // debugger
// document.querySelector('h2').innerText = '哈哈'
},
mounted() {
console.log("mounted")
// console.log(this)
// // 对DOM操作有效
// document.querySelector('h2').innerText = '哈哈'
// debugger
},
beforeUpdate() { //页面和数据未同步
console.log("beforeUpdate")
// console.log(this.n)
// debugger
},
updated() { //页面和数据同步
console.log("updated")
// console.log(this.n)
// debugger
},
beforeDestroy() { // 到了这个阶段 设计数据更新不会再起到效果
console.log("beforeDestroy")
},
destroyed() {
console.log("destroyed")
},
})
script>
html>
beforeUpdate//页面和数据未同步
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RlAKU0vZ-1659269367744)(2022-07-28-11-20-30.png)]
updated//页面和数据同步
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9xAhfevZ-1659269367747)(2022-07-28-11-24-41.png)]
总结生命周期
vm的一生（vm的生命周期）:
- 将要创建 ===> 调用beforeCreate函数。
- 创建完毕 ===> 调用created函数。
- 将要挂载 ===> 调用beforeMount函数。
- （重要）挂载完毕 ===> 调用mounted函数。 ======> 【重要的钩子】
- 将要更新 ===> 调用beforeUpdate函数。
- 更新完毕 ===> 调用updated函数。
- （重要）将要销毁 ===> 调用beforeDestory函数。 ======> 【重要的钩子】
- 销毁完毕 ===> 调用destoryed函数。
常用的生命周期钩子及常用功能：
- mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】
- beforeDestroy: 清楚定时器、解绑自定义事件、取消订阅消息等【收尾工作】
关于销毁Vue实例 - 销毁后借助Vue开发者工具看不到任何信息
- 销毁后自定义事件会失效，但原生DOM事件依然有效
ory函数。 ======> 【重要的钩子】 - 销毁完毕 ===> 调用destoryed函数。
常用的生命周期钩子及常用功能：
- mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】
- beforeDestroy: 清楚定时器、解绑自定义事件、取消订阅消息等【收尾工作】
关于销毁Vue实例 - 销毁后借助Vue开发者工具看不到任何信息
- 销毁后自定义事件会失效，但原生DOM事件依然有效
- 一般不会再beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了