生命周期函数又叫钩子函数,钩子函数到了某一个时间点会自动触发
这个过程是从vue实例创建到实例销毁的过程中 到了一定的时间节点就会触发
我们先来看张图 能更清楚是怎么执行下去的
首先我们说说创建阶段:
创建阶段有四个钩子函数,分别是:befortCreate,craeted,beforeMount,mounted
- beforeCreare:实例创建之前,这个时候什么都没有 data methods 都不能用 也没有 this
- created :创建之后 也是最早的可以使用 data 和 methods 的钩子函数 这个时候有 this 了
- beforeMount:组件挂载之前
- mounted:组件挂载之后 这个时候能拿到 dom 节点使用
运行阶段
运行阶段只要修改 data 就会触发
运行阶段有两个个钩子函数
- beforeUpdate :数据变了 视图还没变
- updated:数据变了 视图也变了
销毁阶段
- beforeDestory:组件销毁之前 是最后一个能使用 data 和 methods 的钩子函数
- destoryed:组件销毁之后
除了这八个之外还有三个
- errorCaptured :子组件出错的时候会触发这个钩子函数
还有就是如果用 keep-alive 缓存了组件 就会有 actived deactived 这两个钩子函数
- activated 组件激活
- deactivated 组件停用
上边就是生命周期的基本介绍
接下来就说说用的时候有哪些需要注意的呢?以及应用场景
页面第一次加载时父子组件的生命周期执行的顺序是怎么样的呢?
- 页面—beforeCreate
- 页面—created
- 页面—beforeMount
- 页面—mounted
- 组件—beforeCreate
- 组件—created
- 组件—beforeMount
- 组件—mounted
项目开发中 在生命周期里都做过什么功能?
- 我在写效果的过程中 会在 created 或者 mounted 中发送 http 请求
- 还会用 created 钩子函数 获取 本地存储的数据
- mounted 的特点是可以操作 dom 节点
注意事项
1.created 和 mounted 的区别?
就是 created 比 mounted 执行的时间更早所以会更多的在 created 中请求
2.想要在created里获取最新dom怎么获取?
这个时候我们可以使用nextTick
nextTick就是在 dom 更新之后执行的延迟回调
放在nextTick中的代码可以在dom更新之后再执行,这样就能在created里获取最新dom了
接下来写个案例来看看
<body>
<div id="app">
<p>{{message}}</p>
<button @click="changeMsg">改变</button>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'hello world'
},
methods: {
changeMsg () {
this.message = 'goodbye world'
}
},
beforeCreate() {
console.log('------初始化前------')
console.log(this.message)
console.log(this.$el)
},
created () {
console.log('------初始化完成------')
console.log(this.message)
console.log(this.$el)
},
beforeMount () {
console.log('------挂载前---------')
console.log(this.message)
console.log(this.$el)
},
mounted () {
console.log('------挂载完成---------')
console.log(this.message)
console.log(this.$el)
},
beforeUpdate () {
console.log('------更新前---------')
console.log(this.message)
console.log(this.$el)
},
updated() {
console.log('------更新后---------')
console.log(this.message)
console.log(this.$el)
}
})
</script>
来看看执行结果
从上面我们可以看出几点,
- 首次,只执行了4个生命周期,beforeCreate,created, beforeMount, mounted
- 同时,我们可以看出,第一个生命周期中,我们拿不到data中的数据,因为这个时候数据还未初始化
- created中,我们可以拿到data中的message数据了,因为初始化已经完成
- beforeMount中,我们可以看出,我们拿到了$el,而mounted中,我们也拿到了$el, 不过好像有点不一样是吧。一个好像是渲染前的,一个是渲染后的。对的。看过MVVM响应式原来或者Vue源码你们就会发现,最初其实我们是会去让this.$el = new Vue时传入的那个el的dom。所以在beforMount中,其实我们拿到的就是页面中的#app。而再继续往后,首先我们是不是没有找到render函数啊,也没有找到template啊,所以他会怎么做啊,是不是会把我们的这个el(#app)编译成template模板啊,再转换为render函数,最后将render函数渲染成为真实dom,渲染成真实dom后,我们是不是会用这个渲染出来的dom去替换原来的vm.$el啊 这也就是我们前面所说到的替换$el是什么意思了
- 所以, 在mounted中,我们所得到的渲染完成后的$el