VUE 生命周期函数

629 阅读2分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第17天,点击查看活动详情

生命周期函数指,在某一时刻会自动执行的函数。(生命周期函数也叫钩子函数)

一、vue的生命周期是什么

vue每个组件都是独立的,每个组件都有一个属于它的生命周期,从一个组件创建、数据初始化、挂载、更新、销毁,这就是一个组件所谓的生命周期。在组件中具体的方法有:

beforeCreate:在初始化/实例创建 之前执行的函数

created:在初始化/实例创建之后执行的函数

beforeMount:在组建内容被渲染到页面之前自动执行的函数;                                  此时无法找到任何的DOM节点

mounted:在组件内容被渲染到页面之后自动执行的函数

(

beforeUpdate:在数据将要变化之前自动执行的函数

updated:在数据发生变化之后自动执行的函数

)

beforeDestroy:在VUE实例销毁之前自动执行的函数

destroyed:在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.beforeDestroy(){
    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框架的数据间的交互通信。