Vue实例的生命周期钩子

最新推荐文章于 2025-09-09 16:55:30 发布

weixin_30419799

最新推荐文章于 2025-09-09 16:55:30 发布

阅读量68

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xuyxbiubiu/p/9956551.html

本文深入解析Vue.js实例的生命周期，从beforeCreate到destoryed共八个阶段的详细过程及每个阶段的特点。通过具体代码示例，展示各生命周期函数的执行时机，帮助读者理解Vue组件的运行机制。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue实例生命周期函数</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app"></div>
    <script>
        //生命周期函数就是vue实例在某一个时间点会自动执行的函数
        var vm = new Vue({
            el:'#app',
            template:'<div>{{test}}</div>',
            data:{
                test:'hello world'
            },
            beforeCreate:function () {
                console.log("beforeCreate");
            },
            created:function () {
                console.log('created');
            },
            beforeMount:function () {
                console.log(this.$el);
                console.log('beforeMount'); //此时hello world并没有渲染在页面上
            },
            mounted:function () {
                console.log(this.$el);
                console.log("mounted");   //此时hello worlf已经渲染在页面上了
            },
            beforeDestory:function () {
                console.log("beforeDestory")  //实例没有销毁之前
            },
            destoryed:function () {
                console.log("destoryed")      //实例已经被销毁
            },
            beforeUpdate:function () {
                console.log("beforeUpdate")     //数据更新渲染前
            },
            updated:function () {
                console.log("updated")       //数据更新渲染后
            }
        })
    </script>
</body>
</html>

<!--
在vue中一共有十一个生命周期函数  这里只列举了8个  后三个 会在项目中体现 
-->