Vue_Vue的生命周期

最新推荐文章于 2023-10-25 15:49:14 发布

LRight-T

最新推荐文章于 2023-10-25 15:49:14 发布

阅读量335

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_44604924/article/details/108785858

版权

Vue的生命周期：Vue实例的创建、运行、到销毁称为vue的生命周期
8个阶段：
beforeCreate():创建之前，获取不到数据和methods;初始化中，初始化事件和生命周期，生命周期函数会自动执行。
created():创建，获取到数据和methods,但页面没有元素，是假的HTML，初始化data,methods和props及所有的选项，并给数据对象添加劫持。
beforeMount():挂载之前，获取data数据和方法，但页面仍没有元素，会编译el选项，对应的结构作为数据，通过complie函数结合为虚拟DOM对象。
mounted():挂载，获取到data数据和方法，HTML是可以操作的结构，会根据虚拟的DOM创建vm.$el,可真正操作HTML结构，并把el选项的模板代替。
beforeUpdate():更新之前，数据更新完成，能得到最新数据，页面还没更新。
updated():更新后，数据更新完成，可以得到最新数据，页面更新完成。
beforeDestory():销毁之前，可以获取data数据、方法、HTML是真正的HTML,还没真正销毁。
destoryed():销毁后，可以获取data数据，vm提供的DOM操作失效。
这些阶段可以给用户在不同阶段添加1自己代码的机会。
生命周期钩子 = 生命周期函数 = 生命周期事件，三个说法一个意思。
以上解释均来自官网的生命周期图。

每个vue实例都要经过一系列的初始化过程，如设置数据监听，编译模板，将实例
挂载到DOM并在数据变化时更新DOM等，同时在这个过程中也会运行一些叫做生命
钩子的函数，给了用户在不同阶段添加自己代码的机会

    1.初始化显示
    beforeCreate()
    created()
    beforMount()
    mounted()：说明页面准备好了
    2.更新显示
    beforeUpdate()
    updated()
    3.死亡
    beforeDestory()
    destoryed()
    常用的生命周期方法
    created()/mounted():发送ajax请求，启动定时器等异步任务
    bedoreDestory():做收尾工作：如：清除定时器

实例：

 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        window.onload = function(){
            var app = new Vue({
                el:"#app",
                data() {
                    return {
                        isShow:true,
                    }
                },
             beforeCreate() {
                 console.log("beforeCreate()");
             },
             created() {
                console.log("created()");
             },
             beforeMount() {
                 console.log("beforeMount()");
             },
                mounted() {//初始化显示之后立即调用，调用一次
                    console.log("mounted()");
                   this.timer = setInterval(() => {
                    this.isShow = !this.isShow;
                    //现在的this指向Vue,因为setInterval里面有箭头函数，this指向父元素的this
                    //因为mounted的this是Vue对象,所以现在的this仍然指向Vue
                    // alert(this.isShow);
                    // console.log(this);
                   }, 1000);
                },
                beforeUpdate() {
                    console.log("beforeUpdate()");
                },
                updated() {
                    console.log("updated()");
                },
                //清除定时器，如果不清除定时器，则标签内容不再变化，但计时器不会停止
                beforeDestroy() {//死亡之前调用，调用一次
                console.log("beforeDestroy()");
                    clearInterval(this.timer);
                },
                destroyed() {
                    console.log("destroyed()");
                },
                methods: {
                    destoryVue:function(){
                        this.$destroy();
                    }
                },
            });
            
        };
    </script>
</head>
<body>
    <div id="app">
        <button @click="destoryVue">destory</button>
        <p v-show="isShow">热爱可抵岁月漫长</p>
        <p>{{isShow}}</p>
    </div>
</body>

LRight-T

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue_Vue的生命周期

Vue的生命周期：Vue实例的创建、运行、到销毁称为vue的生命周期8个阶段：beforeCreate():创建之前，获取不到数据和methods;初始化中，初始化事件和生命周期，生命周期函数会自动执行。created():创建，获取到数据和methods,但页面没有元素，是假的HTML，初始化data,methods和props及所有的选项，并给数据对象添加劫持。beforeMount():挂载之前，获取data数据和方法，但页面仍没有元素，会编译el选项，对应的结构作为数据，通过complie函
复制链接

扫一扫