【Vue实例生命周期】

其他 2019-08-19 11:41:30 阅读次数: 0

目录

"有时候，我们需要在实例创建过程中进行一些初始化的工作，以帮助我们完成项目中更复杂更丰富的需求开发，针对这样的需求，Vu e提供给我们一系列的钩子函数。

本文将详细介绍Vue实例在创建和销毁的过程中我们可以使用的钩子函数。

这是官方文档提供的Vue实例生命周期图，我们结合这张图来进行钩子函数的解析。
在这里插入图片描述
@
***

实例创建之前执行——beforeCreate

==除标签外，所有的vue需要的数据(data)、事件(methods)、标签(el)都不存在.==

<body>
<div id="app">
    {{ name }}
    <button @click="myClick">点击修改数据</button>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            name: 'zyk',
        },
        methods: {
            init: function () {
                console.log(this.name);
            },
            myClick: function () {
                this.name = 'ZYK';
            }
        },
        // 实例创建之前执行
        beforeCreate() {
            console.group('beforeCreate');
            console.log('el:', this.$el);
            console.log('data:', this.$data);
            console.log('name:', this.name);
            console.log('init:', this.init);
            console.log('innerHTML:', document.getElementById('app').innerHTML);
        },
    });
</script>
</body>

打印结果如下图：
在这里插入图片描述
***

实例创建之后执行——created

==数据和事件被解析到，标签(el)还未被解析.==

<body>
<div id="app">
    {{ name }}
    <button @click="myClick">点击修改数据</button>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            name: 'zyk',
        },
        methods: {
            init: function () {
                console.log(this.name);
            },
            myClick: function () {
                this.name = 'ZYK';
            }
        },
        // 实例创建之后执行
        created() {
            console.group('created');
            console.log('el:', this.$el);
            console.log('data:', this.$data);
            console.log('name:', this.name);
            console.log('init:', this.init);
            console.log('innerHTML:', document.getElementById('app').innerHTML);
        },
    });
</script>
</body>

打印结果如下图：
在这里插入图片描述
***

挂载之前执行——beforeMount

==数据、事件、标签都已被解析，但数据还未被渲染.==

<body>
<div id="app">
    {{ name }}
    <button @click="myClick">点击修改数据</button>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            name: 'zyk',
        },
        methods: {
            init: function () {
                console.log(this.name);
            },
            myClick: function () {
                this.name = 'ZYK';
            }
        },
        // 挂载之前执行
        beforeMount() {
            console.group('beforeMount',);
            console.log('el:', this.$el);
            console.log('data:', this.$data);
            console.log('name:', this.name);
            console.log('init:', this.init);
            console.log('myClick:', this.myClick);
            console.log('innerHTML:', document.getElementById('app').innerHTML);
        },
    });
</script>
</body>

打印结果如下图：
在这里插入图片描述
***

挂载之后执行——mounted

==开始渲染数据，开始监听事件.==

<body>
<div id="app">
    {{ name }}
    <button @click="myClick">点击修改数据</button>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            name: 'zyk',
        },
        methods: {
            init: function () {
                console.log(this.name);
            },
            myClick: function () {
                this.name = 'ZYK';
            }
        },
        // 挂载之后执行
        mounted() {
            console.group('mounted',);
            console.log('el:', this.$el);
            console.log('data:', this.$data);
            console.log('name:', this.name);
            console.log('init:', this.init);
            console.log('myClick:', this.myClick);
            console.log('innerHTML:', document.getElementById('app').innerHTML);
        },
    });
</script>
</body>

打印结果如下图：
在这里插入图片描述
***

数据更新之前执行——beforeUpdate

==数据己被修改在虚拟DOM，但还未被渲染到页面上==

数据更新时(之前)被调用，发生在虚拟DOM打补丁之前.
适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器.

==该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行.==

<body>
<div id="app">
    {{ name }}
    <button @click="myClick">点击修改数据</button>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            name: 'zyk',
        },
        methods: {
            init: function () {
                console.log(this.name);
            },
            myClick: function () {
                this.name = 'ZYK';
            }
        },
        // 数据更新之前执行
        beforeUpdate() {
            console.group('beforeUpdate',);
            console.log('el:', this.$el);
            console.log('data:', this.$data);
            console.log('name:', this.name);
            console.log('init:', this.init);
            console.log('myClick:', this.myClick);
            console.log('innerHTML:', document.getElementById('app').innerHTML);
        },
    });
</script>
</body>

打印结果如下图：
在这里插入图片描述
***

数据更新之后执行——updated

==将虚拟DOM中的数据应用到页面上，此时真实的DOM数据被修改了.==

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子.

当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之.

<body>
<div id="app">
    {{ name }}
    <button @click="myClick">点击修改数据</button>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            name: 'zyk',
        },
        methods: {
            init: function () {
                console.log(this.name);
            },
            myClick: function () {
                this.name = 'ZYK';
            }
        },
        // 数据更新之后执行
        updated() {
            console.group('updated',);
            console.log('el:', this.$el);
            console.log('data:', this.$data);
            console.log('name:', this.name);
            console.log('init:', this.init);
            console.log('myClick:', this.myClick);
            console.log('innerHTML:', document.getElementById('app').innerHTML);
        },
    });
</script>
</body>

打印结果如下图：
在这里插入图片描述
***

实例销毁之前执行——beforeDestroy

==所有的数据都存在.==

实例销毁之前调用，在这一步，实例仍然完全可用.
频繁地创建和销毁组件对性能的影响很大，因此可使用activated和deactivated（将在下面介绍这两个钩子）.

==该钩子在服务端渲染期间不被调用.==

<body>
<div id="app"></div>
<script>
    let Laside = {
        template: `
            <div>
                <h1>{{ mes }}</h1>
            </div>
        `,
        data() {
            return {
                mes: 'Hello Vue!',
            };
        },
        methods: {
            changeData: function () {
                this.mes = 'Pizza is here!';
            },
        },
        // 实例销毁之前执行
        beforeDestroy() {
            console.log("beforeDestroy");
            console.log("el: ", this.$el);
            console.log("data: ", this.$data);
            console.log("mes: ", this.mes);
            console.log("changeData: ", this.changeData);
        },
    };

    let App = {
        template: `
            <div>
                <Laside v-if="isShow"></Laside>
                <button @click="showHide">创建消除组件</button>
            </div>
        `,
        // 判断是否有嵌套的子组件
        components: {
            'Laside': Laside,
        },
        methods: {
            showHide: function () {
                this.isShow = !this.isShow;
            }
        },
        data() {
            return {
                isShow: true,
            };
        },
    };

    new Vue({
        el: '#app',
        template: `<App/>`,
        components: {
            App,
        },
    });
</script>
</body>

打印结果如下图：
在这里插入图片描述
***

实例销毁之后执行——destroyed

==所有的数据都存在（虚拟DOM找的）.==

Vue实例销毁后调用，调用后，Vue实例指示的所有东西都将会解除绑定，所有的事件监听器会被移除，所有的子实例也会被销毁.

<body>
<div id="app"></div>
<script>
    let Laside = {
        template: `
            <div>
                <h1>{{ mes }}</h1>
            </div>
        `,
        data() {
            return {
                mes: 'Hello Vue!',
            };
        },
        methods: {
            changeData: function () {
                this.mes = 'Pizza is here!';
            },
        },
        // 实例销毁之后执行
        destroyed() {
            console.log("destroyed");
            console.log("el: ", this.$el);
            console.log("data: ", this.$data);
            console.log("mes: ", this.mes);
            console.log("changeData: ", this.changeData);
        },
    };

    let App = {
        template: `
            <div>
                <Laside v-if="isShow"></Laside>
                <button @click="showHide">创建消除组件</button>
            </div>
        `,
        // 判断是否有嵌套的子组件
        components: {
            'Laside': Laside,
        },
        methods: {
            showHide: function () {
                this.isShow = !this.isShow;
            }
        },
        data() {
            return {
                isShow: true,
            };
        },
    };

    new Vue({
        el: '#app',
        template: `<App/>`,
        components: {
            App,
        },
    });
</script>
</body>

打印结果如下图：
在这里插入图片描述
***

keep-alive组件激活时执行——activated

Vue提供的用来缓存被消除的标签，keep-alive组件激活时调用.

==使用activated和deactivated可分别取代取代beforeDestroy和destroyed的执行.==

==< keep-alive >包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们.==

<body>
<div id="app"></div>
<script>
    let Laside = {
        template: `
            <div>
                <h1>{{ mes }}</h1>
            </div>
        `,
        data() {
            return {
                mes: 'Hello Vue!',
            };
        },
        methods: {
            changeData: function () {
                this.mes = 'Pizza is here!';
            },
        },
        // keep-alive组件激活后不会被调用
        beforeDestroy() {
            console.log("destroyed");
            console.log("el: ", this.$el);
            console.log("data: ", this.$data);
            console.log("mes: ", this.mes);
            console.log("changeData: ", this.changeData);
        },
        // keep-alive组件激活时执行
        activated() {
            console.log("destroyed");
            console.log("el: ", this.$el);
            console.log("data: ", this.$data);
            console.log("mes: ", this.mes);
            console.log("changeData: ", this.changeData);
        },
    };

    let App = {
        // 激活keep-alive组件
        template: `
            <div>
                <keep-alive>
                    <Laside v-if="isShow"></Laside>
                </keep-alive>
                <button @click="showHide">创建消除组件</button>
            </div>
        `,
        // 判断有没有嵌套的子组件
        components: {
            'Laside': Laside,
        },
        methods: {
            showHide: function () {
                this.isShow = !this.isShow;
            },
        },
        data() {
            return {
                isShow: true,
            };
        },
    };

    new Vue({
        el: '#app',
        template: `<App/>`,
        components: {
            App,
        },
    });
</script>
</body>

打印结果如下图：
在这里插入图片描述
***

keep-alive组件停用时执行——deactivated

<body>
<div id="app"></div>
<script>
    let Laside = {
        template: `
            <div>
                <h1>{{ mes }}</h1>
            </div>
        `,
        data() {
            return {
                mes: 'Hello Vue!',
            };
        },
        methods: {
            changeData: function () {
                this.mes = 'Pizza is here!';
            },
        },
        // keep-alive组件停用时执行
        deactivated() {
            console.log("destroyed");
            console.log("el: ", this.$el);
            console.log("data: ", this.$data);
            console.log("mes: ", this.mes);
            console.log("changeData: ", this.changeData);
        },
    };

    let App = {
        // 激活keep-alive组件
        template: `
            <div>
                <keep-alive>
                    <Laside v-if="isShow"></Laside>
                </keep-alive>
                <button @click="showHide">创建消除组件</button>
            </div>
        `,
        // 判断有没有嵌套的子组件
        components: {
            'Laside': Laside,
        },
        methods: {
            showHide: function () {
                this.isShow = !this.isShow;
            },
        },
        data() {
            return {
                isShow: true,
            };
        },
    };

    new Vue({
        el: '#app',
        template: `<App/>`,
        components: {
            App,
        },
    });
</script>
</body>

打印结果如下图：
在这里插入图片描述


"

猜你喜欢

转载自www.cnblogs.com/zyk01/p/11376133.html
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
循环神经网络（rnn）讲解
Tigao教程四：单独的关节运动
金蝶K3WISE15.0-注册套打教程
如何在Mac上配置Kubernetes
Android应用结束自身进程的方法
SpringMVC学习 十三 拦截器栈
中国驻洛杉矶总领馆举行新春招待会
HttpClient get post 发送
11 - three.js 笔记 - 绘制三维字体模型
Mysql递归获取某个父节点下面的所有子节点和子节点上的所有父节点
每日归档
更多
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022