vue 生命周期函数

lh15766518127

已于 2024-07-11 22:11:02 修改

阅读量85

点赞数 1

文章标签： vue.js javascript 前端

于 2024-07-11 20:29:18 首次发布

本文链接：https://blog.csdn.net/lh15766518127/article/details/140361391

版权

八个生命周期函数都有讲解，可能内容有些粗劣

#具体如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生命周期</title>
</head>

<body>
    <div id="app">
        {{msg}}
    </div>

    <button>点击销毁页面</button>

    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    msg: "hello word"
                }
            },
            //vue2的生命周期函数，8个函数，和data同级
            beforeCreate() {
                //vue实例挂载data之前
                console.log("beforeCreate--------------------msy", this.msg);
            },
            created() {
                //vue实例挂载data之后
                //页面渲染在此
                console.log("created--------------------msy", this.msg);

                //为验证beforeUpdate()与updated()
                setTimeout(() => {
                    this.msg = "你好";
                }, 1000)
            },
            beforeMount() {
                //数据渲染到页面之前
                console.log("beforeMount--------------------", document.getElementById("app").innerHTML);
            },
            mounted() {
                //数据渲染到页面之后
                //页面渲染也能在此
                console.log("mounted--------------------", document.getElementById("app").innerHTML);
            },
            beforeUpdate() {
                //数据对应的页面展示更新之前
                console.log("beforeUpdate--------------------");
            },
            updated() {
                //数据对应的页面展示更新之后
                console.log("updated--------------------");

            },
            beforeDestroy() {
                //页面销毁之前
                console.log("beforeDestroy--------------------");
            },
            destroyed() {
                //页面销毁之后 vue实例方法失效了
                console.log("destroyed--------------------");
            },
        })
        document.querySelector("button").onclick = function () {
            app.$destroy()
        }
    </script>
</body>

</html>

下面是后台的输出