生命周期函数(钩子函数)
vue实例(组件)的生命周期: 从生到死的过程
vue实例在从创建到销毁过程,默认会调用一些函数,这个函数叫生命周期函数,也叫钩子函数
vue链接: vue链接
有template,template做模板,没有就有el 定义的做模板
- beforeCreate: 什么也做不了,data和methods以及页面中的DOM结构都没有初始化。
- created: 可以使用data中的数据,调用methods中的方法,但是DOM元素并没有渲染出来。你想在created中,获取DOM元素,根本得不到。一般情况下,我们会在created这个勾子中,发起ajax请求。
- beforeMound: 在挂载(就是把模板渲染成DOM元素)之前, 也没有什么用,可以获取data中的数据,也可以调用methods中的方法,不能获取dom。
- mounted: DOM元素已经被渲染出来的,就可以获取DOM元素了,当然也可以获取data中的数据,调用methods中方法,我喜欢在mounted钩子中,发起ajax请求
- beforeUpdate: 当data中的数据发生改变,数据改变,视图要重新刷新,就会调用此勾子函数,在这个函数中,拿的数据是新数据,但是,页面中的还是老数据
- updated: 数据改变,虚拟DOM重新渲染,并且打补丁,此时页面中的老数据,会被替换成真实的数据。
你能在updated这个勾子函数中,更新数据吗?
答:不能在updated这个勾子中更新数据,会导致死循环。 - beforeDestory: vm实例销毁之前调用
- destroyed: vm实例销毁之后调用 没什么用
<div id="app">
<h1>{{msg}}</h1>
</div>
<script>
let vm = new Vue({
el:"#app",
beforeCreate(){ // 钩子函数 拿不到data中的数据 调用不了methods中的方法
console.log("beforeCreate")
},
created(){
console.log("created")
// console.log(this.msg)
// this.f();
// axios.get();
// 在这里面,不能获取DOM元素
},
beforeMount(){ // 没什么用
console.log("beforeMount")
},
mounted(){ // dom元素已被渲染出来了
console.log("mounted")
},
beforeUpdate(){
console.log("beforeUpdate",this.msg)
},
data:{ msg:"hello vue" },
methods:{ f(){ console.log("f....") } }
})
</script>
总结:上面的写的钩子函数,是vue框架会在合适的时机,自动地帮我们调用。
我们只需要在合适的钩子,写合适功能了。