声明周期函数-生命周期钩子函数-生命周期事件
每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤,比如设置好数据侦听,编译模板,挂载实例到 DOM,以及在数据改变时更新 DOM。在此过程中,它也会运行被称为生命周期钩子的函数,让开发者有机会在特定阶段运行自己的代码。
在引入Vue.js插件下运行
一、生命周期函数
示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的。
生命周期
初始化尚未完成,data数据,metheds方法都未挂在在vue实例上
一般用于页面重定向
beforeCreate(){
console.log(111);
console.log(this.msg);
},
也买你初始化完成
第一个能data数据的生命周期,一般用于接口请求+数据初始化
DOM数据已经渲染完了,开始请求
created() {
console.log(456);
}
DOM挂载前
虚拟DOM元素挂载后,如果需要操作DOM,可以再次生命周期执行
beforeMount调用后,我们要开始渲染render函数了,首先我们会先生产一个虚拟dom,进行保存,然后再开始将render渲染成为真实的dom。渲染成真实dom后,会将渲染出来的真实dom替换掉原来的vm. e l ,然后再将替换后的 el,然后再将替换后的 el,然后再将替换后的el append到我们的页面内。
beforeMount() {
console.log(this.$el);
},
DOM挂载完成
再调用mounted,并将标识生命周期的一个属性_isMounted 置为true。所以mounted函数内,我们是可以操作dom的,因为这个时候dom已经渲染完成了。
mounted() {
console.log(this.$el);
}
页面更新前 可以执行0-多次
updated里面也可以操作dom,并拿到最新更新后的dom。不过这里我要插一句话了,mouted和updated的执行,并不会等待所有子组件都被挂载完成后再执行,所以如果你希望所有视图都更新完毕后再做些什么事情,那么你最好在mouted或者updated中加一个 n e x t T i c k (),然后把要做的事情放在 nextTick(),然后把要做的事情放在 nextTick(),然后把要做的事情放在netTick()中去做
beforeUpdate() {
console.log(this.$el);
}
页面更新后
updated(){
console.log(this.$el);
}
总结
提示:这里对文章进行总结:
一些细节都在代码片中,注意看