vue进入页面执行的钩子函数_vue-生命周期钩子函数

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。

1.生命周期函数beforeCreate 组件没有创建之前触发

created 组件创建完成没有渲染时触发

beforeMount 组件渲染之前触发

mounted 组件渲染之后触发

beforeUpdate data改变，组件更新前触发

updated data改变，组件更新后触发

beforeDestroy 组件销毁之前触发

destroyed 组件销毁之后触发

2.生命周期图示

3.生命周期函数基本用法

var vm = new Vue({

el: '#app',

data: {

msg:'ok'

},

methods: {

show:function () {

console.log("执行了show方法");

},

//调用钩子函数destroy

destroy(){

//通过this来调用，this表示全局对象

this.$destroy();

}

},

beforeCreate(){

/*

这是一个生命周期函数，表示在实例完全创建出来之前会执行他

在执行beforeCreate时，data和methods中的数据还没有初始化

*/

console.log(this.msg); //undefined

},

created(){

/*

第二个生命周期函数

在created中，data和methods都已经初始化好

如果要调用methods中的方法或者data中的数据，最早只能在created中操作

*/

console.log(this.msg); //ok

this.show(); //执行了show方法

},

beforeMount(){

/*

第三个生命周期函数

已经在内存中编辑完成，但没有渲染到页面中

*/

console.log(document.getElementById("h3").innerText); //{{ msg }}

},

mounted(){

/*

第四个生命周期函数

内存中已经真实的挂载带页面中去了，用户可以看到渲染好的页面

注意：mounted是实例创建期间的最后一个生命周期函数，当执行完mounted后，表示实例别完全创建好了

如果要操作元素的DOM操作，最早在mounted中操作

*/

console.log(document.getElementById("h3").innerText); //ok

},

beforeUpdate(){

/*

第五个生命周期函数

我们的界面还没有更新，但是数据已经更新了

也就是执行beforeUpdate时，页面中显示的数据还是旧的，此时，data中的数据已经更新了

*/

console.log("页面中的值：" + document.getElementById("h3").innerText); //ok

console.log("data中msg的值" + this.msg); //No

},

updated(){

/*

第六个生命周期函数

执行时，页面中的数据与data中的数据已经同步了

*/

console.log("页面中的值：" + document.getElementById("h3").innerText); //No

console.log("data中msg的值" + this.msg); //No

},

beforeDestroy() {

/*

第七个生命周期函数

当执行该函数时，Vue实例已经从执行阶段进入了销毁阶段，

但是实例上所有的data和methods、过滤器、指令都还可用，此时还没有真正的销毁

*/

//注意：当时用了定时器时，需要我们在该函数下手动的销毁定时器，否则会造成内存泄漏

},

destroyed(){

/*

第八个生命周期函数

当执行了该函数时，组件已经完全被销毁，组件中所有的数据、方法、指令、过滤器都已经不可用

*/

}

});