一.生命周期函数
函数名 | 说明 | 平台差异 |
---|
beforeCreate | 在实例初始化之前被调用,数据没有初始化完成,页面没有开始渲染 | |
created | 实例创建完成立即调用,可以拿到数据和方法,进行数据初始化 | |
beforeMount | 在挂载开始之前被调用,未挂载 | |
mounted | 挂载到实例上被调用,已经渲染到页面 | |
beforeUpdate | 数据更新时调用,更新到页面之前,数据还未更新到页面 | H5 |
updated | 数据更改导致虚拟DOM重新渲染,数据更新到页面了 | H5 |
beforeDestroy | 实例销毁前调用 | |
destroyed | 实例销毁后调用 | |
二.实例代码
<template>
<view id="myView">
<view v-text="title"></view>
</view>
</template>
<script>
export default {
data() {
return {
intId: null,
num: 3,
title: "Hello!"
};
},
beforeCreate() {
console.log("实例开始初始化")
console.log(this.num)
//打印出undefined,说明数据未加载
},
created() {
console.log(this.num)
//打印出3,说明数据已经加载,一般在created;里面进行数据初始化
this.intId = setInterval(() => {
console.log("定时器!")
}, 1000)
},
beforeMount() {
console.log(document.getElementById('myView'))
//打印出undefined,数据已经加载,但是未挂载到页面
},
mounted() {
console.log(document.getElementById('myView'))
//打印出DOM元素,说明数据已经加载,并且挂载到页面
},
destroyed() {
console.log("组件销毁")
clearInterval(this.intId)
}
}
</script>
<style>
</style>