Vue生命周期

最新推荐文章于 2024-09-16 06:30:00 发布

意Ω外

最新推荐文章于 2024-09-16 06:30:00 发布

阅读量115

点赞数 1

分类专栏：前端文章标签：前端 javascript html

本文链接：https://blog.csdn.net/zailalaniubi/article/details/126926847

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Vue生命周期图

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="root">
    <!--    <h2>当前n的值是：<span v-text="n"></span></h2>-->
    <!--    <button @click="add">点我n++</button>-->
    <!--    <button @click="bye">点击销毁vm</button>-->
</div>

<script src="./js/vue.js"></script>
<script>
    Vue.config.productionTip = false;
    let vm = new Vue({
        el: '#root',
        template: `
          <div>
          <h2>当前n的值是：<span v-text="n"></span></h2>
          <button @click="add">点我n++</button>
          <button @click="bye">点击销毁vm</button>
          </div>`,
        data() {
            return {
                n: 1
            }
        }, methods: {
            add() {
                console.log("执行了Add函数");
                this.n++;
            },
            bye() {
                console.log("执行了销毁函数");
                this.$destroy();
            }
        }, watch: {
            n() {
                console.log("n变了");
            }
        },
        beforeCreate() {
            console.log("beforeCreate");
            console.log(this.n);
        },
        created() {
            console.log("created");
            console.log(this.n);
        }, beforeMount() {
            console.log("beforeMount");
        },mounted(){
            console.log("mounted");
        },beforeUpdate(){
            console.log("beforeUpdate");
        },
        updated(){
            console.log("updated");
        },
        beforeDestroy(){
            console.log("beforeDestroy");
        },
        destroyed(){
            console.log("destroyed");
        }
    });
</script>
</body>
</html>

我们可以很清楚的看到每一个生命周期点是什么时候执行得