Vue的生命周期
一、vue的生命周期是什么
讲生命周期,当然首先看到vuejs官网的图片详解啦!
1、beforeCreated()
在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。
2、created()
实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。
3、beforeMount()
在挂载开始之前被调用:相关的 render 函数首次被调用。
4、mounted()
el 被新创建的 vm.$el
替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el
也在文档内。
5、beforeUpdate()
数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。
6、updated()
由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。
当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。
该钩子在服务器端渲染期间不被调用。
7、beforeDestroy()
实例销毁之前调用。在这一步,实例仍然完全可用。
8、destroyed()
Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。
二、vue生命周期的在项目中的执行顺序
...
data () {
return {
rendered: false,
}
}
...
1.beforeCeate(){
console.log(this.rendered); // undefined
}
2.created() {
console.log(this.$el);//undefined
console.log(this.rendered); // false
}
3.beforeMount() {
console.log(this.$el);//undefined
}
4.mounted() {
console.log(this.$el);
}
5.beforeDestroty(){
console.log(this.$el);
console.log(this.rendered);
}
6.destroyed() {
console.log(this.$el);
console.log(this.rendered);
}
三、vue中内置的方法 属性和vue生命周期的运行顺序(methods、computed、data、watch、props)
从第一二点可知道data的初始化是在created时已经完成数据观测(data observer),并且诸如methods、computed属性 props等已经初始化;那问题来了,
data props computed watch methods他们之间的生成顺序是什么呢?
根据翻看vue源码可知:
props => methods =>data => computed => watch; 懂了没
四、自己构造的方法与vue生命周期的运行顺序 如show这些
往往我们在开发项目时都经常用到 $refs 来直接访问子组件的方法,但是这样调用的时候可能会导致数据的延迟滞后的问题,则会出现bug。
解决方法则是推荐采取异步回调的方法,然后传参进去,严格遵守vue的生命周期就可以解决 推荐 es6 的promise。
示例代码:
handleAsync () {
return new Promise(resolve=>{
const res="";
resolve(res)
})
}
async handleShow() {
await this.handleAsync().then(res=>{
this.$refs.child.show(res);
})
}
五、总结
vue 的生命周期,总得来说就是实例的创建和销毁这段时间的一个机制吧。也是vue框架的数据间的交互通信。其实现在看来也没那么难,但是vue的源码实现这一套机制那是难得一逼,涉及到复杂的算法如diff算法,