vue生命周期

来源：互联网发布：淘宝企业店铺需要资料编辑：程序博客网时间：2024/06/06 20:50

以介绍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生命周期的变化:

* 推荐vue生命周期的文章 : https://segmentfault.com/a/1190000008010666

阅读全文

0 0