Vue生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。——官方文档
生命周期图示
vue生命周期中有许多钩子函数分别是:
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<my-component>123</my-component>
</div>
<template id="my-component">
<div>
<h1 id="title">hello----{{msg}}</h1>
<p><input type="text" v-model="msg"></p>
<button @click="destroy">destroy</button>
</div>
</template>
<script src="../base/vue.js"></script>
<script>
//初始化阶段
//1.vue中组件的生命周期 通过new初始化开始的
//2.在实例化后会 组件或者实例的内部 会进行一些初始化的事件 并进行生命周期的配置
//页面的真实DOM节点并没有被 挂载出来
Vue.component("my-component",{
template:"#my-component",
data(){
return{
msg:1
}
},
methods:{
destroy(){
this.$destroy()
}
},
//3.beforeCreate 在初始化的时候会自动执行,函数内部获取不到数据(并没有进行数据劫持)
beforeCreate(){
console.log("beforeCreate-----")
console.log(this.msg,document.getElementById("title"))//undefined null
},
//4.created 函数中内部数据 可以被挂载,但真实DOM并没有被渲染出来
//如果 同步更改数据,并不会去影响运行中的 钩子函数执行
//我们可以在created 钩子函数中进行初始事件的绑定 还可以进行ajax操作等
created(){
// this.msg=123456
console.log("created-------------")
console.log(this.msg,document.getElementById("title"))//1 null
},
//5.首先会判断对象是否有el选项。如果有的话就继续向下编译,如果没有el选项,则停止编译,也就意味着停止了生命周期,直到在该vue实例上调用vm.$mount(el)。
//6.如果vue实例中 具有template ,将其作为模板编译成render函数。如果没有template,就使用外部Html作为模板编译。
//template优先级大于 外部Html
//7.beforeMount 函数中此时真实DOM将被渲染 但还没被渲染
//也可以 ajax操作和初始化事件绑定
beforeMount(){
console.log("beforeMount------")
console.log(this.msg,document.getElementById("title"))//1 null
},
//8.生成了 虚拟DOM ,之后再rander里编译替换对应的el,渲染真实DOM
//相当于rander内部进行了初始化渲染操作
//9.mounted 函数是初始化阶段 的最后一个 钩子函数 。数据挂载 并且,真实DOM渲染出来了
//此时是给vue实例对象添加$el成员,并且替换掉挂载的DOM元素。
mounted(){
console.log("mounted------")
console.log(this.msg,document.getElementById("title"))//1 <h1 id="title">hello----1</h1>
},
//10.运行时钩子函数初始化阶段不会主动执行。当真实DOM挂载完之后,改变数据beforeUpdate函数才会执行.
//函数里获取的DOM数据 是更新前的内容
beforeUpdate(){
console.log("beforeUpdate-----------")
console.log(document.getElementById("title").innerHTML)
},
//11.updated函数 获取的数据 是更新后的数据
//生成新的虚拟DOM,与之前的虚拟DOM进行对比,使用diff算法对比后进行真实DOM的渲染
updated(){
console.log("updated---------")
console.log(document.getElementById("title").innerHTML)
},
//12.beforeDestroy钩子函数在实例销毁之前调用。在这一步,实例仍然完全可用。
beforeDestroy(){
console.log("beforeDestroy------------")
},
//13.destroyed钩子函数在Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
destroyed(){
console.log("destroyed------------")
}
})
new Vue({}).$mount("#app")
</script>
</body>
</html>
一个完整的vue生命周期如下:
初始化阶段
vue中组件的生命周期 通过new初始化开始的
在实例化后会 组件或者实例的内部 会进行一些初始化的事件 并进行生命周期的配置。
此时页面的真实DOM节点并没有被 挂载出来。
1.beforeCreate
钩子函数在初始化的时候会自动执行,函数内部获取不到数据(并没有进行数据劫持)。
2.created
钩子函数内部的数据已经被挂载了,但真实DOM并没有被渲染出来。
如果 同步更改数据,并不会去影响运行中的 钩子函数执行。
我们可以在created 钩子函数中进行初始事件的绑定 还可以进行ajax操作等。
实例打印出的结果:
3.created
钩子函数和beforeMount
间的生命周期
(1).首先会判断对象是否有el
选项。如果有的话就继续向下编译,如果没有el选项,则停止编译,也就意味着停止了生命周期,直到在该vue实例上调用vm.$mount(el)
。
(2).如果vue实例中 具有template ,将其作为模板编译成render
函数。如果没有template
,就使用外部Html
作为模板编译。
(3). template
优先级大于 外部Html
4. beforeMount和mounted 钩子函数间的生命周期
(1).beforeMount
函数中此时真实DOM将被渲染 但还没被渲染 。也可以 ajax操作和初始化事件绑定。
(2). 在生成了 虚拟DOM ,之后再rander
里编译替换对应的el,渲染真实DOM。相当于rander内部进行了初始化渲染操作。
(3).mounted
函数是初始化阶段 的最后一个 钩子函数 。数据挂载 并且,真实DOM渲染出来了。此时是给vue实例对象添加$el成员
,并且替换掉挂载的DOM元素。
实例打印出的结果:
5.beforeUpdate
钩子函数和updated
钩子函数间的生命周期
(1).运行时钩子函数初始化阶段不会主动执行。当真实DOM挂载完之后,改变数据,beforeUpdate
函数才会执行。函数里获取的DOM数据 是更新前的内容。
(2).updated
函数 获取的数据 是更新后的数据。生成新的虚拟DOM,与之前的虚拟DOM进行对比,使用diff算法对比后进行真实DOM的渲染。
实例改变数据打印出的结果:
6.beforeDestroy
和destroyed
钩子函数间的生命周期
(1).beforeDestroy钩子函数在实例销毁之前调用。在这一步,实例仍然完全可用。
(2).destroyed钩子函数在Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
当我们在实例中点击 destory按钮时 也就是调用了 vm.$destory()函数。此时打印结果如下:
此时实例已经被销毁了。