Vue生命周期 (图解+代码解析)

<body>
<!--
    1.什么是生命周期方法?
    和wbpack生命周期方法一样,都是在从生到死的特定阶段调用的方法
    ps:生命周期钩子 = 生命周期函数 = 生命周期事件
    2.vue生命周期方法分类
    2.1创建期间的生命周期方法
        beforeCreate:
        created:
        beforeMount:
        mounted:
    2.2运行期间的生命周期方法
        beforeUpdate:
        updated:
    2.3销毁期间的生命周期方法
       beforeDestroy:
       destroyed:
-->
<div id="app">
    <button @click="change">切换</button>
    <!--通过v-if来切换,会直接删除和重新创建-->
  <one v-if="isShow"></one>
</div>
<!--Vue实例对象可以看作一个大的组件,自定义组件可以看作一个小组件
    那么大的组件可以使用的属性和方法,在小的组件中也可也使用
    例如:在vue实例中外面可以添加data,methods,那么在自定义的组件中也可以添加data,methods
    所以Vue实例中可以使用生命周期方法,组件中也可也使用生命周期方法-->
<template id="one">
    <div>
        <p>我是组件</p>
    </div>
</template>
<script>
    Vue.component("one",{
        template:"#one",
        data:function(){
            return{
                msg:"小猪熊"
            }
        },
        methods:{
          say(){
              console.log("say");
          }
        },
        /*
        在调用beforeDestroy的时候表示当前组件即将被销毁了
        注意点:只要组件不被销毁,那么beforeDestroy就不会被调用
                beforeDestroy函数是外面最后能够访问到组件数据和方法的函数
        */
        beforeDestroy:function(){
            // console.log("beforeDestroy");
            // console.log(this.msg);
            // console.log(this.say);
        },
        destroyed:function () {
            /*.
           在调用destroyed的时候,表示当前组件已经被销毁了
           注意点:只要组件不被销毁,那么destroyed就不会被调用
                   不要在这个生命周期方法中再去操作组件中的数据和方法
            */
            console.log("destroyed");
        }
    });
    //1.创建一个Vue的实例对象
    let vue = new Vue({
        beforeCreate:function(){
            /*
            在调用beforeCreate的时候,仅仅表示Vue实例刚刚被创建出来
            此时此刻还没有初始化好Vue实例中的数据和方法,所以此时此刻还不能访问Vue实例中保存的数据和方法
             */
            // console.log(this.msg);
            // console.log(this.say);
        },
        created:function(){
            //在调用created的时候,是我们最早能够访问Vue实例中保存的数据和方法的地方
            // console.log(this.msg);
            // console.log(this.say);
        },
        beforeMount:function(){
            //在调用beforeMount的时候,表示Vue已经编译好了最终模板,但是还没有将最终的模板渲染到界面上
            // console.log(document.querySelector("p").innerHTML);
            // console.log(document.querySelector("p").innerText);
        },
        mounted:function(){
            /*
            在调用mounted的时候,表示Vue已经完成了模板的渲染
             */
            // console.log(document.querySelector("p").innerHTML);
            // console.log(document.querySelector("p").innerText);
        },
        beforeUpdate:function(){
            /*
            在调用beforeUpdate的时候,表示Vue实例中保存的数据被修改了
            注意点:只有保存的数据被修改了才会调用beforeUpdate,否则不会
                    在调用beforeUpdate的时候,数据已经更新了,但是界面还没有更新
             */
            // console.log("beforeUpdate");
            // console.log(document.querySelector("p").innerHTML);
            // console.log(document.querySelector("p").innerText);
        },
        updated:function(){
            /*
            在调用updated的时候表示Vue实例中保存的数据被修改了,并且界面也同步了修改的数据了
            也就是说数据和界面都同步更新之后会调用updated
             */
            // console.log("beforeUpdate");
            // console.log(document.querySelector("p").innerHTML);
            // console.log(document.querySelector("p").innerText);
        },
        //2.告诉Vue的实例对象,将来需要控制界面上的哪个区域
        el:'#app',
        //3.告诉Vue的实例对象,被控制区域的数据是什么
        //专门监听数据变化的
        watch:{

        },
        //这里就是MVVM中的Model
        data:{
            msg:"小猪熊",
            isShow:true
        },
        //专门用于存储监听事件回调函数
        methods:{
            say(){
                console.log("say");
            },
            change(){
                this.isShow = !this.isShow
            }
        },
        //专门用于定义计算属性的
        computed:{

        },
         //专门用于定义局部组件
        components:{

        }
    });
</script>
</body>
版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/mhblog/article/details/108319175
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。
发表于 2021-05-30 09:17:06
阅读 ( 581 )
分类：前端
Vue生命周期 (图解+代码解析)

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看
