Vue 每个生命周期的具体介绍:
beforeCreate(){}:Vue 创立前,此阶段为实例初始化之后,this 指向创立的实例,数据察看, 数据监听事件机制都未造成,不能取得 DOM 节点。data,computed,watch,methods 上的办法和数据均不能拜访,注:date 和 methods 的数据都还未初始化。
Created(){}:Vue 创立后,此阶段为实例初始化之后,data、props、computed 的初始化导入实现,注:要调用 methods 中的办法,或者操作 data 中的数据,最早只能在 Created 中操作
能拜访 data computed watch methods 上的办法和数据,初始化实现时的事件写这个外面,
此阶段还未挂载 DOM。
beforeMount(){}: Vue 载入前,阶段执行时,模板曾经在内存中编译好了,然而未挂载到页面中,(页面还是旧的)
注:这个阶段是过渡性的,个别一个我的项目只能用到一两次。
Mounted(){}:Vue 载入后,( 实现创立 vm.$el,和双向绑定);只有执行完 mounted, 就示意整个 Vue 实例曾经初始化实现了,此时组件曾经脱离里了创立阶段,进入到了运行阶段。
beforeUpdate(){}:Vue 更新前,当执行 beforeUpdate 的时候,页面中显示的数据还是旧的,此时 date 数据是最新的,页面尚未和最新数据数据放弃同步。然而 DOM 中的数据会扭转,这是 vue 双向数据绑定的作用,可在更新前拜访现有的 DOM,如手动移出增加的事件监听器。
Updated(){}:Vue 更新后,Updated 执行时数据曾经放弃同步了,都是最新的,
实现虚构 DOM 的从新渲染和打补丁。
组件 DOM 已实现更新,可执行依赖的 DOM 操作。
留神:不要在此函数中操作数据(批改属性),否则就会陷入死循环。
beforeUnmount(){}:(Vue 销毁前,可做一些删除提醒,比方:您确定删除 ** 吗?)
当执行 beforeDestroy 的时候,Vue 实例就曾经从运行阶段进入到销毁阶段了。实例上的所有 date 和 methods 以及过滤器和指令都是处于可用状态,此时还没有真正的执行销毁过程。
unmounted(){}:Vue 销毁后, 当执行到 destroted 函数的时候,组件曾经齐全销毁(渣都不剩),此时组件中的所有的数据,办法,指令,过滤器 … 都曾经销毁(不可用了)。
create
- App.vue
<script>
import Hello from "./components/Hello.vue";
export default {data() {
return {message: '',};
},
methods:{getChildMsg:function (value){console.log(value);
this.message=value
}
},
components:{Hello}
}
</script>
<template>
<div>
<Hello/>
</div>
</template>
- Hello.vue
<template>
<div>Hellokugou</div>
</template>
<script>
export default {data(){
return{counter: 0,};
},
beforeCreate() {console.log('beforeCreate');
},
created() {console.log('created');
},
beforeMount() {console.log('beforeMount');
},
mounted() {console.log('mounted');
},
beforeUpdate() {console.log('beforeUpdate');
},
updated() {console.log('updated');
},
beforeUnmount() {console.log('beforeUnmount');
},
unmounted() {console.log('unmounted');
},
name: "Hello"
}
</script>
<style scoped>
</style>
update
- App.vue
<script>
import Hello from "./components/Hello.vue";
export default {data() {
return {message: '',};
},
methods:{getChildMsg:function (value){console.log(value);
this.message=value
}
},
components:{Hello}
}
</script>
<template>
<div>
<Hello/>
</div>
</template>
- Hello.vue
<template>
<div>
<div>Hellokugou</div>
<h2>{{counter}}</h2>
<button @click="counter++">change counter</button>
</div>
</template>
<script>
export default {data(){
return{counter: 0,};
},
beforeCreate() {console.log('beforeCreate');
},
created() {console.log('created');
},
beforeMount() {console.log('beforeMount');
},
mounted() {console.log('mounted');
},
beforeUpdate() {console.log('beforeUpdate');
},
updated() {console.log('updated');
},
beforeUnmount() {console.log('beforeUnmount');
},
unmounted() {console.log('unmounted');
},
name: "Hello"
}
</script>
<style scoped>
</style>
销毁
- App.vue
<script>
import Hello from "./components/Hello.vue";
export default {data() {
return {
message: '',
isShow: true
};
},
methods:{getChildMsg:function (value){console.log(value);
this.message=value
}
},
components:{Hello}
}
</script>
<template>
<div>
<Hello v-if="isShow"/>
<button @click="isShow=!isShow"> 销毁 Hello 组件 </button>
</div>
</template>
- Hello.vue
<template>
<div>
<div>Hellokugou</div>
<h2>{{counter}}</h2>
<button @click="counter++">change counter</button>
</div>
</template>
<script>
export default {data(){
return{counter: 0,};
},
beforeCreate() {console.log('beforeCreate');
},
created() {console.log('created');
},
beforeMount() {console.log('beforeMount');
},
mounted() {console.log('mounted');
},
beforeUpdate() {console.log('beforeUpdate');
},
updated() {console.log('updated');
},
beforeUnmount() {console.log('beforeUnmount');
},
unmounted() {console.log('unmounted');
},
name: "Hello"
}
</script>
<style scoped>
</style>