当前位置: 首页 > 未分类>阅读正文

vue生命周期函数

2022.7.22 朱丰华 35 次 留下评论 2507字

生命周期方法详解

钩子函数详情场景备注
beforeCreate实例初始化之后,组件被创建时期,这个时候的 el,data,message 都是 underfined可以加入 loading 事件;在服务器端的应用场景中,这个时候发送数据请求比较多一些
created实例创建完成后,data、methods 被初始化结束 loading 事件;推荐这个时候发送请求数据,尤其是返回的数据与绑定事件有关时
beforeMount挂载初始之前,完成 el 初始化,render 被初次调用也可以发送数据请求在服务器端渲染期间不会被调用
mounted完成挂载获取 el 中 DOM 元素,进行 DOM 操作;如果返回的数据操作依赖 DOM 完成,推荐这个时候发送数据请求在服务器端渲染期间不会被调用
beofreUpdate挂载开始之前调用挂载完成之前访问现有 DOM ,比如手动移除已添加的事件监听器;也可以进一步修改数据在服务器渲染期间不会被调用,只有初次渲染会在服务端调用
updated由于数据更改,重新渲染界面时调用可执行依赖于 DOM 的操作服务器端渲染期间不会被调用
activatedkeep-alive 组件激活时调用服务器端渲染期间不会被调用
deactivated组件停用时调用服务器端渲染期间不会被调用
beforeDestroy实例销毁之前调用删除钱发出确认信息;清理定时器服务器端渲染期间不会被调用
destroyed实例销毁后调有。调用后,所有东西都会被解绑,所有的事件监听器会被移动,子实例也会被销毁提示已删除服务器端渲染期间不会被调用
errorCaptured当捕获一个来自子孙组件的错误时被调用。收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。可返回 false 以阻止该错误继续向上传播。修改组件状态2.5.0新增

示例:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="https://www.52dixiaowo.com/tools/npm/vue@2.6.0/dist/vue.min.js"></script>
</head>
<body>

<div id="app">
    <p>{{ message }}</p>
    <button v-on:click="change()">change</button>
    <button v-on:click="destr()">destroy</button>
</div>

<script type="text/javascript">

    var app = new Vue({
        el: '#app',
        data: {
            message: 66
        },
        beforeCreate: function () {
            console.group('beforeCreate 创建前');
            console.log("el: " + this.$el);
            console.log("data: " + this.$data);
            console.log("message: " + this.message)
        },
        created: function () {
            console.group('created 创建完毕');
            console.log("el: " + this.$el);
            console.log("data: " + this.$data + JSON.stringify(this.$data));
            console.log("message: " + this.message)
        },
        beforeMount: function () {
            console.group('beforeMount 挂载前');
            console.log("el: " + this.$el);
            console.log("data: " + this.$data);
            console.log("message: " + this.message)
        },
        mounted: function () {
            console.group('mounted 挂载结束');
            console.log("el: " + this.$el);
            console.log("data: " + this.$data);
            console.log("message: " + this.message)
        },
        beforeUpdate: function () {
            console.group('beforeUpdate 更新前');
            console.log("el: " + this.$el);
            console.log("data: " + this.$data);
            console.log("message: " + this.message)
        },
        updated: function () {
            console.group('updated 更新完成');
            console.log("el: " + this.$el);
            console.log("data: " + this.$data);
            console.log("message: " + this.message)
        },
        beforeDestroy: function () {
            console.group('beforeDestroy 销毁前');
            console.log("el: " + this.$el);
            console.log("data: " + this.$data);
            console.log("message: " + this.message)
        },
        destroyed: function () {
            console.group('destroyed 销毁完成');
            console.log("el: " + this.$el);
            console.log("data: " + this.$data);
            console.log("message: " + this.message)
        },
        methods: {
            change() {
                app.message++;
            },
            destr() {
                app.$destroy();
            }
        }
    })
</script>
</body>
</html>

通常来说,window.onload 常使用 mounted 函数,在 mounted 中完成 data 数据的初始化。

本篇完,还有疑问?留下评论吧

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注