Vue 生命周期

此文章面向Vue2.0

什么是生命周期

  • 生命周期是一种拟人化的说法,每个Vue的实例或组件从创建到废除要经历多个流程,这个周期就是Vue的生命周期。我们有时想在特定的流程中对实例进行一些操作,于是生命周期钩子函数就出现了——生命周期钩子允许我们在实例的不同的生命周期阶段对其进行操作,以便于我们更好地控制代码。

生命周期都有哪些

  1. beforeCreate:创建前
    • 当前生命周期是Vue初始化的时候执行的钩子函数,在其执行的时候组件还未进行创建。
    • 在这个函数里,data和methods都还没有将自身的属性和方法代理到Vue的实例身上。因此在当前生命周期中是访问不到data中的属性和methods中的方法的。

    使用场景:可以在当前周期中进行loading的显示。

  2. created:创建后*
    • 因为当前生命周期函数是组件创建后执行的,因此可以在当前生命周期中进行前后端交互
    • 当前生命周期在执行时会将data身上所有属性进行数据劫持,给每一个属性都添加getter方法和setter方法。
    • 当前生命周期在执行的时候,将data身上的所有属性和methods身上所有的方法代理添加到Vue的实例身上

    使用场景:在这里可以做初始数据的获取,进行前后端交互。

  3. beforeMount:挂载前
    • 当前生命周期是组件挂载到页面之前执行的钩子函数。
    • 当前生命周期中,数据和模板还未结合,因此访问不到真实的DOM。(访问到的DOM类似于:<h2>{{msg}}</h2>)

    使用场景:可以在当前生命周期函数中对数据进行最后的更改。

  4. mounted:挂载后*
    • 当前生命周期在组件被挂载到页面的时候执行生命周期函数,可以访问到真实的DOM结构。
    • 当前生命周期函数中,数据和模板已经结合,即DOM已经渲染完毕。

    使用场景:可以访问到真实的DOM结构,并进行相应的DOM操作。

  5. beforeUpdate:更新前*
    • 此函数在数据更新的时候才会执行。
    • 当前生命周期函数中,可以访问到真实的DOM结构。
    • 当前生命周期函数中,更新的数据还未和模板进行结合。

    使用场景:对更新的数据做最后的处理,切记不可进行数据修改否则会出现死循环。

  6. updated:更新后*
    • 当前生命周期中,数据和模板已经相结合。
    • 可以在当前生命周期函数中获取到数据更新后最新的DOM结构。
    • 如果在当前生命周期进行实例化操作,一定要进行边界条件处理,否则会造成性能消耗。

    使用场景:获取数据更新后最新的DOM结构。

  7. beforeDestroy:销毁前*
    • 当前生命周期函数会在组件被销毁之前执行。
    • 在当前的声明周期中仍然可以访问到真实的DOM结构。

    使用场景:在当前生命周期中进行事件解绑、定时器的清楚等(性能的优化)。

  8. destroyed:销毁后
    • 在当前生命周期中,访问不到真的DOM结构。
    • 当前生命周期会断开与Vue的关联。

    使用场景:还是善后。

代码演示
<body>
    <div id="app">
        <span>{{msg}}</span>
        <button @click="changeHandler">改变文字</button>
    </div>
</body>
let vm = new Vue({
    el:"#app",
    data:{
        msg:"你好"
    },
    methods:{
        changeHandler(){
            this.msg = "你坏坏";
        }
    },
    beforeCreate(){
        console.log("beforeCreate执行了");
        console.log(this.msg);  // undefined ——此时data和methods还没有将属性和方法代理到实例身上
    },
    created(){
        console.log("created执行了");
        console.log(this.msg);  // 你好
    },
    beforeMount(){
        console.log("beforeMount执行了");
        console.log(document.getElementsByTagName("span")[0]);  // <span>{{msg}}</span>
    },
    mounted(){
        console.log("mounted执行了");
        console.log(document.getElementsByTagName("span")[0]);  // <span>你好</span>
    },
    beforeUpdate(){
        console.log("beforeUpdate执行了");
        console.log(this.msg);  // 你坏坏
        console.log(document.getElementsByTagName("span")[0]); // <span>你坏坏</span>
        console.log(document.getElementsByTagName("span")[0].offsetWidth); // 32
    },
    updated(){
        console.log("updated执行了");
        console.log(this.msg);  // 你坏坏
        console.log(document.getElementsByTagName("span")[0]); // <span>你坏坏</span>
        console.log(document.getElementsByTagName("span")[0].offsetWidth); // 48
    },
    beforeDestroy(){
        console.log("beforeDestroy执行了"); // 待更新
    },
    destroyed(){
        console.log("destroyed执行了"); // 待更新
    }
})

Vue 生命周期来自官网的图示:

Vue生命周期
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一般说的 Vue 生命周期指的是打包完成后的 js 代码去执行的过程,区别于开发环境和 HTML 嵌入 Vue.j...
    Wermdany阅读 4,765评论 1 2
  • - vue生命周期 从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程 before...
    糕糕AA阅读 5,221评论 0 0
  • react和vue都是比较热门的前端框架,对于一些初始数据的加载,应该放在那个生命周期中调用比较合适?给出结论前,...
    lemonzoey阅读 9,160评论 0 0
  • 1.vue基本生命周期 vue源码中最终执行生命周期函数都是调用callHook方法,callHook函数的逻辑很...
    WHU_GIS_LJ阅读 19,675评论 0 13
  • Vue实例有一个完整的生命周期,也就是说从开始创建、初始化数据、编译模板、挂在DOM、渲染-更新-渲染、卸载等一系...
    Sanyekui阅读 6,333评论 1 2