美文网首页
VUE-5.Vue的生命周期

VUE-5.Vue的生命周期

作者: 笨灬蛋_a210 | 来源:发表于2020-11-12 10:50 被阅读0次

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

    vue对象核心的四个阶段八个钩子函数:
    • 1)、数据挂载阶段 :把传入的data属性的内容,赋给vue对象。
      前后分别的钩子函数是:beforeCreate、created
    • 2)、模板渲染阶段:把vue对象中data渲染到dom对象上。
      前后分别的钩子函数是:beforeMount、mounted
    • 3)、组件更新阶段:当数据发生变化时,会触发组件的更新。
      前后分别的钩子函数是:beforeUpdate、updated
    • 4)、组件销毁阶段:
      前后分别的钩子函数是:beforeDestroy、destroyed
    - 如果组件在<keep-alive></keep-alive>缓存的话,那么,组件切换时,会调用的钩子函数是:
    • activated 和 deactivated


      image.png
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                msg: 'aaaa'
            },
            beforeCreate() {
                console.log('===beforeCreate===');
                console.log(this.msg);
            },
            created() {
                console.log('===created===');
                console.log(this.msg);
            },
            beforeMount() {
                console.log('===beforeMount===');
                console.log(this.msg);
            },
            mounted() {
                console.log('===mounted===');
                console.log(this.msg);
            },
            beforeUpdate() {
                console.log('===mounted===');
                console.log(this.msg);
            },
            updated() {
                console.log('===mounted===');
                console.log(this.msg);
            }
        })
    </script>
    

    相关文章

      网友评论

          本文标题:VUE-5.Vue的生命周期

          本文链接:https://www.haomeiwen.com/subject/ewudbktx.html