【Vue实例生命周期】 -- 2019-08-11 18:47:26

目录

  • 实例创建之前执行——beforeCreate
  • 实例创建之后执行——created
  • 挂载之前执行——beforeMount
  • 挂载之后执行——mounted
  • 数据更新之前执行——beforeUpdate
  • 数据更新之后执行——updated
  • 实例销毁之前执行——beforeDestroy
  • 实例销毁之后执行——destroyed
  • keep-alive组件激活时执行——activated
  • keep-alive组件停用时执行——deactivated

原文: http://106.13.73.98/__/53/

有时候,我们需要在实例创建过程中进行一些初始化的工作,以帮助我们完成项目中更复杂更丰富的需求开发,针对这样的需求,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>

打印结果如下图:


原文: http://106.13.73.98/__/53/

原文地址:https://www.cnblogs.com/gqy02/p/11336073.html

时间: 2024-11-08 16:37:15

【Vue实例生命周期】 -- 2019-08-11 18:47:26的相关文章

Vue实例生命周期

前面的话 Vue实例在创建时有一系列的初始化步骤,例如建立数据观察,编译模板,创建数据绑定等.在此过程中,我们可以通过一些定义好的生命周期钩子函数来运行业务逻辑.本文将详细介绍Vue实例的生命周期 图示 下图是Vue实例生命周期的图示 解释 接下来,根据提供的生命周期钩子,对Vue实例各个阶段的情况进行详细说明 [beforeCreate] 在实例开始初始化时同步调用.此时数据观测.事件等都尚未初始化 [created] 在实例创建之后调用.此时已完成数据观测.事件方法,但尚未开始DOM编译,即

Vue实例生命周期+vueRoter

Vue实例生命周期 vue生命周期之beforeCreate 实例创建之前除标签外,所有的vue需要的数据,事件都不存在 vue生命周期之created 实例创建之后,data和事件已经被解析到,el还没有找到 vue生命周期之beforeMount 开始找标签,数据还没有被渲染,事件也没有被监听 vue生命周期之mounted 开始渲染数据,开始监听事件 vue生命周期之beforeUpdata 数据已经被修改在虚拟DOM,但没有被渲染到页面上 vue生命周期之updata 开始使用Diff算

【Vue实例生命周期】 -- 2019-08-08 18:01:29

目录 实例创建之前执行--beforeCreate 实例创建之后执行--created 挂载之前执行--beforeMount 挂载之后执行--mounted 数据更新之前执行--beforeUpdate 数据更新之后执行--updated 实例销毁之前执行--beforeDestroy 实例销毁之后执行--destroyed keep-alive组件激活时执行--activated keep-alive组件停用时执行--deactivated 原文: http://106.13.73.98/_

vue实例生命周期详解

每个 Vue 实例在被创建之前都要经过一系列的初始化过程. 例如,实例需要配置数据观测(data observer).编译模版.挂载实例到 DOM ,然后在数据变化时更新 DOM . 在这个过程中,实例也会调用一些 生命周期钩子 ,这就给我们提供了执行自定义逻辑的机会.例如,created 这个钩子在实例被创建之后被调用 var vm = new Vue({ data: { a: 1 }, created: function () { // `this` 指向 vm 实例 console.log

【Vue实例生命周期】 -- 2019-08-09 12:10:28

目录 实例创建之前执行--beforeCreate 实例创建之后执行--created 挂载之前执行--beforeMount 挂载之后执行--mounted 数据更新之前执行--beforeUpdate 数据更新之后执行--updated 实例销毁之前执行--beforeDestroy 实例销毁之后执行--destroyed keep-alive组件激活时执行--activated keep-alive组件停用时执行--deactivated 原文: http://106.13.73.98/_

【Vue实例生命周期】 &#591699;

目录 实例创建之前执行--beforeCreate 实例创建之后执行--created 挂载之前执行--beforeMount 挂载之后执行--mounted 数据更新之前执行--beforeUpdate 数据更新之后执行--updated 实例销毁之前执行--beforeDestroy 实例销毁之后执行--destroyed keep-alive组件激活时执行--activated keep-alive组件停用时执行--deactivated 原文: http://blog.gqylpy.co

vue入门:(底层渲染实现render函数、实例生命周期)

vue实例渲染的底层实现 vue实例生命周期 一.vue实例渲染的底层实现 1.1实例挂载 在vue中实例挂载有两种方法:第一种在实例化vue时以el属性实现,第二种是通过vue.$mount()方法实现挂载.不管是哪种挂载都不影响vue实例化组件的执行流程和模式,只是通过vue.$mount()方法实现挂载可以更灵活的实现组件复用和挂载. 1 var vm = new Vue({ 2 el:'挂载元素id',//实例化el属性实现挂载 3 ... 4 }) 5 var vm1 = new Vu

浅谈Vue的生命周期模型

Vue实例从创建到销毁的过程,就是生命周期.Vue的生命周期包括:开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程. 在Vue的整个生命周期中,提供了一系列的事件,可以注册JavaScript方法,达到控制整个过程的目的,在这些javascript方法中的this直接指向的是vue的实例. 在Vue的整个生命周期中,实例可以调用一些生命周期钩子,这提供了执行自定义逻辑的机会. Vue提供的生命周期钩子如下:① beforeCreate在实例初始化之后,数据观测(da

vue的生命周期

这是Vue文档里关于实例生命周期的解释图 那么下面我们来进行测试一下 <section id="app-8"> {{data}} </section> var myVue=new Vue({ el:"#app-8", data:{ data:"aaaaa", info:"nono" }, beforeCreate:function(){ console.log("创建前========&quo