life cycle
<template>
<div>
<h2>当前n值是: {
{ n }}</h2>
<button @click="n++;">点我+1</button>
</div>
</template>
<script>
export default {
name:'App',
data() {
return {
n: 1,
}
},
// 在"数据监测、数据代理创建"之前:此时 vue 实例对象还没有绑定 data、方法、、、
beforeCreate() {
console.log('beforeCreate');
},
// 在"数据监测、数据代理创建"之后:此时 vue 实例对象已经绑定 data、方法、、、
created() {
console.log('created');
},
// 挂载之前,此时已经有了虚拟 DOM,但是还没有挂载到页面
// 此时页面呈现的是未经编译的 DOM
// 此时对 DOM 的操作,仅是临时有效果,最终会失效,因为最终会有 虚拟DOM 挂载到页面,重新渲染
beforeMount() {
console.log('beforeMount');
},
// 【重要的钩子1:】
// 挂载成功之后,此时初始的真实 DOM 放入(挂载)到页面后调用
// 至此,初始化过程结束了,一般在此时可以:开启定时器、发生网络请求、、、异步操作
mounted() {
console.log('mounted');
},
// vue数据更新之前,此时数据是新的,但是页面是旧的
beforeUpdate() {
console.log('beforeUpdate');
},
// vue数据更新之后,此时数据和页面都是新的
updated() {
console.log('updated');
},
// 【重要的钩子2:】
// 销毁之前,一般在此:关闭定时器、停止网络请求、、、异步操作,做一些收尾操作
// 销毁之后:
beforeDestroy() {
console.log('beforeDestroy');
},
// 销毁成功之后:【一般无用】
// 可以访问数据,但是对数据的修改不会影响页面
destroyed() {
console.log('destoryed');
},
}
</script>
![Insert image description here](https://img-blog.csdnimg.cn/19a34489e79e48769522509ef81721b4.png#pic_center)