vue组件生命周期
什么是组件生命周期
一个组件从 创建 到 销毁 的整个过程就是生命周期
生命周期函数(钩子函数)
vue 框架内置函数，随着组件的生命周期，自动 按次序 执行
作用：特定的时间点，执行某些特定的操作
场景: 组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据
四个阶段:
- 初始化 => 创建组件 => beforeCreate created
- 挂载 => 渲染显示组件 => beforeMount mouted
- 更新 => 修改了变量 => 触发视图刷新 => beforeUpdate updated
- 销毁 => 切换页面 => 会把组件对象从内存删除 => beforeDestory destoryed
生命周期函数执行过程
components/MyCom.vue - 创建一个文件（复制代码，演示执行过程）
<template>
<div>
<ul id="myUl">
<li v-for="(item, ind) in arr" :key="ind">{{ item }}</li>
</ul>
<button
@click="arr.push(Math.random() * 10)"
>
增加一个元素
</button>
</div>
</template>
<script>
export default {
data () {
return {
msg: "我是变量",
arr: [1, 2, 3, 4]
}
},
beforeCreate () {
// 1. 创建前
console.log("beforeCreate --- 实例初始化前")
console.log(this.msg) // undefined
},
created () {
// 2. 创建后=> 发送ajax请求
console.log("created --- 实例初始化后")
console.log(this.msg) // "我是变量"
// 给对象添加属性
this.timer = setInterval(()=>{
console.log(Date.now())
}, 1000)
this.fn = ()=>{ console.log(Date.now())}
document.addEventListener('mousemove', this.fn)
},
beforeMount () {
// 3. 挂载前
console.log("beforeMount --- vue的虚拟DOM, 挂载到真实的网页之前")
console.log(document.getElementById("myUl")) // null
// console.log(document.getElementById("myUl").children[1].innerHTML) // 报错
},
mounted () {
// 4. 挂载后=> 操作dom
console.log("mounted --- vue的虚拟DOM, 挂载到真实的网页上 ")
// console.log(document.getElementById("myUl").children[1].innerHTML)
console.log(document.querySelector('#myUl').children[1].innerText)
},
beforeUpdate () {
// 5. 更新前
console.log("beforeUpdate --- 数据更新, 页面更新前")
// 比如点击新增数组元素, vue会触发此生命周期函数, 但是此时页面并未更新, 所以获取不到新增的li标签
// console.log(document.getElementById("myUl").children[4].innerHTML) // 报错
},
updated () {
// 6. 更新后
console.log("updated --- 数据更新, 页面更新后")
console.log(document.getElementById("myUl").children[4].innerHTML)
},
beforeDestroy () {
// 7. 销毁前
// (清除定时器 / 解绑js定义的事件)
console.log("beforeDestroy --- 实例销毁之前调用")
},
destroyed () {
// document.removeEventListener('mousemove', 回调函数的名字)
document.removeEventListener('mousemove', this.fn)
// clearInterval(this.timer)
// 8. 销毁后
// (清除定时器 / 解绑js定义的事件)
console.log("destroyed --- 销毁完成")
}
};
</script>
App.vue - 引入使用
通过v-if的切换，可以触发子组件的destory
<template>
<div>
<MyCom v-if="isShow"/>
<hr>
<button @click="isShow = !isShow">销毁Life组件</button>
</div>
</template>
<script>
import MyCom from './MyCom'
export default {
data(){
return {
isShow: true
}
},
components: {
MyCom
}
};
</script>
$refs使用
获取到原生dom标签
<template>
<div>
<h1 ref="hehe">1. ref获取原生dom</h1>
<button @click="fn">点击修改上面内容</button>
</div>
</template>
<script>
export default {
methods: {
fn() {
console.log(this.$refs.hehe); // <h1></h1> 原生DOM标签
this.$refs.myH1.innerHTML = "改内容了";
}
}
}
</script>
获取组件对象
<template>
<div>
<p :style="{ color: ind == 0 ? 'red' : '' }">首页</p>
<p :style="{ color: ind == 1 ? 'red' : '' }">分类</p>
<p :style="{ color: ind == 2 ? 'red' : '' }">爱好</p>
</div>
</template>
<script>
export default {
data() {
return {
ind: 0,
};
},
methods: {
changeIndex(index) {
this.ind = index;
},
},
};
</script>
App.vue - 获取组件对象 - 调用组件方法
<h1>2. 调用demo组件方法</h1>
<button @click="fn2">点击demo组件里最后一个高亮</button>
<Demo ref="de"></Demo>
<script>
import Demo from "./components/Demo";
export default {
components: {
Demo,
},
methods: {
// ...省略
fn2() {
this.$refs.de.changeIndex(2);
},
},
};
</script>
nextTick使用
<template>
<div>
<input ref="fou" type="text" v-if="this.pd">
<button v-else @click="fn">搜索</button>
</div>
</template>
<script>
export default {
data(){
return{
pd:false
}
},
methods:{
async fn(){
this.pd=true
await this.$nextTick()
this.$refs.fou.focus()
}
}
};
</script>
