vue生命周期

最新推荐文章于 2023-07-20 19:53:17 发布

z1340954953

最新推荐文章于 2023-07-20 19:53:17 发布

阅读量311

点赞数

分类专栏： vue 文章标签： vue生命周期

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

以介绍vue1.0的生命周期引入

vue的生命周期，就是实例创建->编译->插入到document中->销毁，具体来以钩子函数体现,这样再对应的周期的函数内做些事情。

created: 实例已经创建

beforeCompile: 编译之前

compiled: 编译之后

ready: 插入到document中 //一般都在这里进行调用，比如在页面加载时候调用分页函数

beforeDestroy: 销毁之前

destroyed: 销毁之后

<body>
    <div id="box">
        <input type="text" v-model="t">
        {{t}}

    </div>
</body>
<script>
    var vm =  new Vue({
        el:'#box',
        data:{t:'hello world!'},
        created:function () {
            alert('实例已经创建');
        },
        beforeCompile:function () {
            alert('编译之前');
        },
        compiled:function () {
            alert('编译之后');
        },
        ready:function () {
            alert('插入到文档中');
        },
        beforeDestroy:function () {
            alert('销毁之前');
        },
        destroyed:function () {
            alert('销毁之后');
        }
    });
    /*点击页面销毁vue实例*/
    document.onclick =function () {
        vm.$destroy();
    };
</script>

可以看到，当点击页面，销毁vue对象后，在向input输入数据，{{t}}不会随同变化，因为vue实例销毁了,双向绑定失效.

官网的vue1.0的生命周期的图:

vue2.0生命周期的变化: