vue里的生命周期

1.vue每个组件都是独立的,每个组件都有一个属于它的生命周期。在组件中具体的方法有:

    beforeCreate()  创建

    created()   据初始化

    beforeMount()  

    mounted()  挂载

    (

        beforeUpdate() 

        updated()  更新

    )

    beforeDestroy()

    destroyed()   销毁

2.vue中内置的方法 属性和vue生命周期的运行顺序(methods、computed、data、watch、props)

props => methods =>data => computed => watch

3.自己构造的方法与vue生命周期的运行顺序 如show这些

4.常用到 $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);

})

}

...


5.生命周期执行顺序:

1、不使用keep-alive的情况:beforeRouteEnter --> created --> mounted --> destroyed

2、使用keep-alive的情况:beforeRouteEnter --> created --> mounted --> activated --> deactivated

3、使用keep-alive,并且再次进入了缓存页面的情况:beforeRouteEnter -->activated --> deactivated


6.$nextTick使用场景:

1、数据更新后想要马上操作新的DOM,需要把操作写在nextTick的回调里

2、在created钩子函数里需要操作DOM,也可以把操作写在nextTick的回调里,(created钩子函数里还没有挂载dom,所以直接操作会有问题)

7.当在data里没有显示的声明一个对象的属性,而是之后给该对象添加属性,这种情况vue是检测不到数据变化的,可以使用$forceUpdate()。但是这种做法并不推荐,官方说如果你现在的场景需要用forceUpdate方法 ,那么99%是你的操作有问题,如上data里不显示声明对象的属性,之后添加属性时正确的做法时用 vm.$set() 方法,所以forceUpdate请慎用


参考链接:https://www.jianshu.com/p/410b6099be69

参考链接:https://www.jianshu.com/p/236cd7fb7b40

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容