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

Zomboy

已于 2022-07-05 14:03:13 修改

阅读量700

点赞数 1

文章标签： vue

于 2020-08-31 13:05:14 首次发布

本文链接：https://blog.csdn.net/mhblog/article/details/108319175

版权

在这里插入图片描述

<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>

<template>
  <div></div>
</template>

<script>
  // 这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json 文件，图片文件等等）
  export default {
    // import 引入的组件需要注入到对象中才能使用
    components: {},
    props: {},
    name: "userPay",
    data: function () {
      return {}
    },
    // 计算属性 类似于 data 概念
    computed: {},
    // 监控 data 中的数据变化
    watch: {},
    // 方法集合
    methods: {},
    // 生命周期 - 创建完成（可以访问当前this 实例）
    created() {
    },
    // 生命周期 - 挂载完成（可以访问 DOM 元素）
    mounted() {
    },
    beforeCreate() {
    },
    beforeMount() {
    }, // 生命周期 - 挂载之前
    beforeUpdate() {
    }, // 生命周期 - 更新之前
    updated() {
    }, // 生命周期 - 更新之后
    beforeDestroy() {
    }, // 生命周期 - 销毁之前
    destroyed() {
    }, // 生命周期 - 销毁完成
    activated() {
    } // 如果页面有 keep-alive 缓存功能,这个函数会触发
  }
</script>

<style scoped lang="scss">

</style>