vue的生命周期

时间：2020-02-23 20:05:08 阅读：52 评论：0 收藏：0 [点我收藏+]

标签：update input content 组件 his width text element 使用

　　生命周期函数代表的是`vue`实例、`vue`组件，在网页中各个生命阶段所执行的函数。生命周期函数可以分为创建阶段、运行阶段及销毁阶段的函数。这些阶段的函数都是和methods同级的，不是写在methods中。

创建期间的函数：

　　1）beforeCreate：在创建实例前所执行的函数；Vue已经创建，但是data和methods都还没有创建好；

　　 2）created：创建实例后所执行的函数；data和methods已经创建好，可以进行操作了。

　　3）beforeMount：模版经过编译，还没有加载到网页中。

　　 4）mounted：模版经过编译，且加载到网页中。

运行阶段的函数：

　　1）beforeUpdate：在数据更新但是页面还有更新前所执行的函数；

　　2）update：在数据更新且页面的数据也更新后执行的函数。

销毁阶段的函数：

　　1）beforeDestroy：Vue实例或者是组件在被销毁之前执行的函数，在这个函数中Vue或者组件中的所有属性都是可以使用的。

　　2）destroyed：Vue实例或者组件被销毁后执行的。此时，Vue实例或者是组件上的所有东西都会解绑，所有事件都会移除，所有子元素都会被销毁。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <title>vue生命周期</title>
</head>

<body>
    <div id="app">
        <p id="user">{{user}}</p>
        <input type="text" v-model=user>
        学习销毁阶段
        <hr>{{message}}
        <error-view :message="message" v-if="message"></error-view>
        <button @click="message=‘‘">清除message</button>
    </div>
    <script>
        // 用于学习销毁阶段的函数
        Vue.component("error-view", {
            props: ["message"],
            template: `
            <p style="color:red">{{message}}ces</p>
            `,
            data() {
                return {
                    hello: "你好"
                }
            },
            beforeDestroy() {
                console.log("==========");
                console.log("beforeDestory");
                console.log(this.hello);
            },
            destroyed() {
                console.log("==========");
                console.log("destroyed");
                console.log(this.hello);
            }
        })
        new Vue({
            el: "#app",
            data: {
                user: "知了",
                message: "错误信息"
            },
            methods: {
                greet() {
                    alert("hello word")
                },
            },
            beforeCreate() {
                console.log("-----------");
                console.log("beforeCreate");
                console.log(this.user);
                console.log(this.greet);
            },
            created() {
                console.log("-----------")
                console.log("created")
                console.log(this.user)
                console.log(this.greet)
            },
            beforeMount() {
                console.log("------------")
                console.log("beforeMount")
                console.log(document.getElementById("user").innerText);
            },
            mounted() {
                console.log("-----------")
                console.log("mounted")
                console.log(document.getElementById("user").innerText);
            },
            beforeUpdate() {
                console.log("============")
                console.log("beforeUpdate")
                console.log(this.user)
                console.log(document.getElementById("user").innerText);
            },
            updated() {
                console.log("==============")
                console.log("update")
                console.log(this.user)
                console.log(document.getElementById("user").innerText)
            }
        })
    </script>
</body>

</html>

vue的生命周期

标签：update input content 组件 his width text element 使用

原文地址：https://www.cnblogs.com/xshan/p/12353266.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行