zoukankan      html  css  js  c++  java
  • 谈谈vue生命周期

    以下主要从几个方面来讲:

    1.vue的生命周期是什么

    2.vue生命周期的在项目中的执行顺序

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

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

    5.总结

    一、vue的生命周期是什么

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

        beforeCreate

        created

        beforeMount

        mounted

        (

            beforeUpdate

            updated

        )

        beforeDestroy

        destroyed

        对应的中文就如其字面意思,英文不好的童鞋可以有道翻翻

        好了,这里要上图啦~~~

     
     

    二、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框架的数据间的交互通信。



    作者:CalvinXie
    链接:https://www.jianshu.com/p/410b6099be69
    来源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
  • 相关阅读:
    JS轮播图
    jquery 60秒倒计时
    jQuery 显示加载更多
    jQuery 显示加载更多
    this指针在不同情况下的指代
    web-app1--移动端等比例代码
    无障碍阅读
    javascript+dom 做javascript图片库
    初探html5---Video + DOM(视频播放)
    14个有效提高网站Banner点击率的设计技巧分享
  • 原文地址:https://www.cnblogs.com/loving0606/p/14086358.html
Copyright © 2011-2022 走看看