VUE 生命周期函数【生命钩子函数】
来 先掰扯一下：嘛是生命周期函数？ 嘛又叫生命周期钩子？容我大白话翻译一下： 生命周期说白了，粗暴的理解方式就是一个组件 从 开始创建， 到最后销毁的全过程。
先贴上VUE所有的 生命周期【胖爷写了一大一小两个组件做测试 home 内包含组件 head 】
Home.vue
<template>
<div id="home">
<button @click="chan"> 点击切换触发生命周期 </button>
<!-- 头部组件引入 -->
这是home组件 <span class="lmtest">测试值是否变色</span>
<v-headv-if="b" ></v-head>
</div>
</template>
<script>
// 1.引入头部组件【组件文件尽量放在 components/ 目录中，大写首字母的.vue文件 】
// 2.注册组件 【 注意如果下面components内容为ES6 语法 则html 则写成对应的标签】
// 3.引入组件 【在页面中写入<v-head></v-head> 】
import Head from "./Head.vue";
export default {
data() {
return {
b:true
};
},
methods: {
chan(){
if(this.b){
this.b = false
}else{
this.b = true
}
}
},
name: "app",
components: { //这用于组件的注册，
'v-head':Head
}
,beforeCreate(){
alert('创建vue实例前')
console.log('创建vue实例前',this)
}
,created() {
alert('创建vue实例后')
console.log(this)
}
,beforeMount(){
alert('home挂载到demo前')
}
,mounted(){
alert('home挂载到demo后')
}
,beforeUpdate(){
alert('数据变化更新前')
}
,updated(){
alert('数据变化更新后')
}
,beforeDestroy(){
alert('Vue实例销毁前')
}
,destroyed(){
alert('VUE实例销毁后')
}
};
</script>
<style scoped>
.lmtest {
background: #000;
color: #fff;
}
h2 {
font: 10px;
}
</style>
Head.vue
<template>
<div id="head">
<h2>这是头部组件</h2>
</div>
</template>
<script>
export default {
beforeCreate(){
alert('head----创建vue实例前')
console.log('创建vue实例前',this)
}
,created() {
alert('head----创建vue实例后')
console.log(this)
}
,beforeMount() {
alert("head----挂载到demo前");
},
mounted() {
alert("head----挂载到demo后");
}
,beforeDestroy(){
alert('head----Vue实例销毁前')
}
,destroyed(){
alert('head----VUE实例销毁后')
}
};
</script>
<style>
</style>
在 每个阶段打印 this 都会得到不同的值：
vue对象初始化过程中，会执行到beforeCreate,created,beforeMount,mounted 这几个钩子的内容;
beforeCreate ：数据还没有监听，没有绑定到vue对象实例，同时也没有挂载对象;
created ：数据已经绑定到了对象实例，但是还没有挂载对象;
beforeMount: 模板已经编译好了，根据数据和模板已经生成了对应的元素对象，将数据对象关联到了对象的 $el属性，
$el属性是一个HTMLElement对象，也就是这个阶段，vue实例通过原生的createElement等方法来创建这个html片段，准备
注入到我们vue实例指明的el属性所对应的挂载点;
mounted:将$el的内容挂载到了el，相当于我们在jquery执行了$(el).html($el),生成页面上真正的dom，上面我们
就会发现dom的元素和我们$el的元素是一致的。在此之后，我们能够用方法来获取到el元素下的dom对象，并进
行各种操作. [这个最重要]
当我们的data发生改变时，会调用beforeUpdate和updated方法
beforeUpdate ：数据更新到dom之前，我们可以看到$el对象已经修改，但是我们页面上dom的数据还没有发生改变
updated: dom结构会通过虚拟dom的原则，找到需要更新页面dom结构的最小路径，将改变更新到dom上面，完成更新
实例的销毁
beforeDestroy,destroed :实例的销毁，vue实例还是存在的，只是解绑了事件的监听还有watcher对象数
据与view的绑定，即数据驱动
参考文献：https://www.cnblogs.com/caizhenbo/p/6418291.html
页:
[1]