共计 3368 个字符，预计需要花费 9 分钟才能阅读完成。
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>
