Vue生命周期

2024-03-25 01:16:01
开发
32

Vue生命周期

生命周期

生命周期函数，钩子函数
生命周期函数命名不能修改
this指向Vue实例(vm)

八大生命周期函数有哪些

beforeCreate 创建前；
此时无法通过vm访问到data中的数据、methods中的方法
created 创建后；
此时可以通过vm访问到data中的数据、methods中的方法
beforeMount 挂载前 | 解析前；
所有针对DOM的操作，终不生效
mounted挂载后 | 解析后 ；
所有针对DOM的操作均生效（尽可能避免），一般在此进行：开启定时器、发送网络请求、绑定自定义事件等
beforeUpdate 更新前；
页面是新的，数据是旧的，即页面未和数据保持一致
updated 更新后；
页面是新的，数据也是新的，即页面已和数据保持一致
beforeDestroy 销毁前 ；
vm中的data、methods、指令等，都处于可用状态，马上执行销毁程序；一般在此进行：关闭定时器、解绑自定义事件等收尾操作
destroyed 销毁后；
对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。

beforeCreate 创建前；

<div id="app">
        <h1 v-show="bool" class="box">{{userName}}</h1>
    </div>

var vm = new Vue({
        el: "#app",
        data() {
            return {
                userName: "张三",
               	bool: true,
            }
        },
        methods: {
            sum() {
                return 100;
            }
        },
        // beforeCreat创建之前,不能获取data中的数据
        beforeCreate() {
            console.log(this.userName);
            console.log(this.sum());
        },
    })

created 创建后

<div id="app">
        <h1 v-show="bool" class="box">{{userName}}</h1>
    </div>

var vm = new Vue({
        el: "#app",
        data() {
            return {
                userName: "张三",
               	bool: true,
            }
        },
        methods: {
            sum() {
                return 100;
            }
        },
        // beforeCreat创建之前,不能获取data中的数据
        beforeCreate() {
            //console.log(this.userName);
           	//console.log(this.sum());
        },
        // created创建之后,获取data中的数据
        created() {
            console.log(this.userName);
            console.log(this.sum());
        },
    })

在这里插入图片描述

beforeMount挂载前 | 解析前

<div id="app">
        <h1 v-show="bool" class="box">{{userName}}</h1>
    </div>

var vm = new Vue({
        el: "#app",
        data() {
            return {
                userName: "张三",
               	bool: true,
            }
        },
        methods: {
            sum() {
                return 100;
            }
        },
        // beforeCreat创建之前,不能获取data中的数据
        beforeCreate() {
            //console.log(this.userName);
           	//console.log(this.sum());
        },
        // created创建之后,获取data中的数据
        created() {
            //console.log(this.userName);
            //console.log(this.sum());
        },
        // beforeMount解析前|挂载前
        beforeMount() {
           document.getElementsByClassName("box")[0].style.color = "red";
        },
    })

在这里插入图片描述

mounted挂载后 | 解析后

<div id="app">
        <h1 v-show="bool" class="box">{{userName}}</h1>
        <h1 :style="{opacity}">我是测试文本</h1>
        <button @click="opacity=1">点击显示</button>
        <button @click="stop()">停止</button>
    </div>

var vm = new Vue({
        el: "#app",
        data() {
            return {
                userName: "张三",
               	bool: true,
               	opacity: 1,
                timeValue: "",
            }
        },
        methods: {
            sum() {
                return 100;
            },
            stop() {
                this.$destroy();
            }
        },
        // beforeCreat创建之前,不能获取data中的数据
        beforeCreate() {
            //console.log(this.userName);
           	//console.log(this.sum());
        },
        // created创建之后,获取data中的数据
        created() {
            //console.log(this.userName);
            //console.log(this.sum());
        },
        // beforeMount解析前|挂载前
        beforeMount() {
           //document.getElementsByClassName("box")[0].style.color = "red";
        },
        // mounted解析后|挂载后
        mounted() {
            this.userName = "王五";
            document.getElementsByClassName("box")[0].style.color = "red";
            this.timeValue = setInterval(() => {
                this.opacity -= 0.01;
                if (this.opacity <= 0) {
                    this.opacity = 1;
                }
            }, 10)
        },
    })

在这里插入图片描述

beforeUpdate 更新前

<div id="app">
        <h1 v-show="bool" class="box">{{userName}}</h1>
        <h1 :style="{opacity}">我是测试文本</h1>
        <button @click="opacity=1">点击显示</button>
        <button @click="stop()">停止</button>
    </div>

var vm = new Vue({
        el: "#app",
        data() {
            return {
                userName: "张三",
               	bool: true,
               	opacity: 1,
                timeValue: "",
            }
        },
        methods: {
            sum() {
                return 100;
            },
            stop() {
                this.$destroy();
            }
        },
        // beforeCreat创建之前,不能获取data中的数据
        beforeCreate() {
            //console.log(this.userName);
           	//console.log(this.sum());
        },
        // created创建之后,获取data中的数据
        created() {
            //console.log(this.userName);
            //console.log(this.sum());
        },
        // beforeMount解析前|挂载前
        beforeMount() {
           //document.getElementsByClassName("box")[0].style.color = "red";
        },
        // mounted解析后|挂载后
        mounted() {
            this.userName = "王五";
            document.getElementsByClassName("box")[0].style.color = "red";
            this.timeValue = setInterval(() => {
                this.opacity -= 0.01;
                if (this.opacity <= 0) {
                    this.opacity = 1;
                }
            }, 10)
        },
        // beforeUpdate更新前
        beforeUpdate() {
            setTimeout(() => {
                this.userName = "李四";
            }, 2000)
        },
    })

在这里插入图片描述

updated 更新后

<div id="app">
        <h1 v-show="bool" class="box">{{userName}}</h1>
        <h1 :style="{opacity}">我是测试文本</h1>
        <button @click="opacity=1">点击显示</button>
        <button @click="stop()">停止</button>
    </div>

var vm = new Vue({
        el: "#app",
        data() {
            return {
                userName: "张三",
               	bool: true,
               	opacity: 1,
                timeValue: "",
            }
        },
        methods: {
            sum() {
                return 100;
            },
            stop() {
                this.$destroy();
            }
        },
        // beforeCreat创建之前,不能获取data中的数据
        beforeCreate() {
            //console.log(this.userName);
           	//console.log(this.sum());
        },
        // created创建之后,获取data中的数据
        created() {
            //console.log(this.userName);
            //console.log(this.sum());
        },
        // beforeMount解析前|挂载前
        beforeMount() {
           //document.getElementsByClassName("box")[0].style.color = "red";
        },
        // mounted解析后|挂载后
        mounted() {
            this.userName = "王五";
            document.getElementsByClassName("box")[0].style.color = "red";
            this.timeValue = setInterval(() => {
                this.opacity -= 0.01;
                if (this.opacity <= 0) {
                    this.opacity = 1;
                }
            }, 10)
        },
        // beforeUpdate更新前
        beforeUpdate() {
            setTimeout(() => {
                this.userName = "李四";
            }, 2000)
        },
        // updated更新后  
        updated() {
            // this.userName = "王五";
        },
    })

beforeDestroy 销毁前和 destroyed销毁后

在这里插入图片描述

<div id="app">
        <h1 v-show="bool" class="box">{{userName}}</h1>
        <h1 :style="{opacity}">我是测试文本</h1>
        <button @click="opacity=1">点击显示</button>
        <button @click="stop()">停止</button>
    </div>

var vm = new Vue({
        el: "#app",
        data() {
            return {
                userName: "张三",
               	bool: true,
               	opacity: 1,
                timeValue: "",
            }
        },
        methods: {
            sum() {
                return 100;
            },
            stop() {
                this.$destroy();
            }
        },
        // beforeCreat创建之前,不能获取data中的数据
        beforeCreate() {
            //console.log(this.userName);
           	//console.log(this.sum());
        },
        // created创建之后,获取data中的数据
        created() {
            //console.log(this.userName);
            //console.log(this.sum());
        },
        // beforeMount解析前|挂载前
        beforeMount() {
           //document.getElementsByClassName("box")[0].style.color = "red";
        },
        // mounted解析后|挂载后
        mounted() {
            this.userName = "王五";
            document.getElementsByClassName("box")[0].style.color = "red";
            this.timeValue = setInterval(() => {
                this.opacity -= 0.01;
                if (this.opacity <= 0) {
                    this.opacity = 1;
                }
            }, 10)
        },
        // beforeUpdate更新前
        beforeUpdate() {
            setTimeout(() => {
                this.userName = "李四";
            }, 2000)
        },
        // updated更新后  
        updated() {
            // this.userName = "王五";
        },
        // beforeDestroy销毁前
        beforeDestroy() {
            clearInterval(this.timeValue);
            console.log("触发了销毁前");
        },
        // destroyed销毁后
        destroyed() {
            console.log("触发了销毁后");
        },
    })

在这里插入图片描述

总结生命周期

常用的生命周期

mounted 发送Ajax请求、启动定时器、绑定自定义事件、订阅消息等初始化操作
beforeDestroy 清除定时器、解绑自定义事件、取消订阅消息等收尾操作
update 页面和数据都是新的

关于销毁Vue实例

销毁后借助Vue开发者工具看不到任何信息
销毁后自定义事件会失效，但原生DOM事件依然有效
一般不会再beforeDestroy操作数据,因为即便操作数据，也不会触发更新流程了

在这里插入图片描述

失联

~~最后编辑时间 2024，03，21；17：27~~

原文地址:https://blog.csdn.net/2302_76607708/article/details/136912076 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：https://www.suanlizi.com/kf/1771949099009052672.html 如若内容造成侵权/违法违规/事实不符，请联系《酸梨子》网邮箱：1419361763@qq.com进行投诉反馈，一经查实，立即删除！

阅读全部