黑马程序员技术交流社区

标题: 【面试题】组件的生命周期 [打印本页]

---

作者: 爱编码的J    时间: 2021-3-13 14:55
标题: 【面试题】组件的生命周期


Vue实例有一个完整的生命周期，也就是说从开始创建、初始化数据、编译模板、挂载DOM、渲染-更新-渲染、卸载等一系列过程，我们称为Vue实例的生命周期。钩子就是在某个阶段给你一个做某些处理的机会
Vue实例生命周期示例

[JavaScript] 纯文本查看 复制代码

<script type="text/javascript">

    

  var app = new Vue({

      el: '#app',

      data: {

          message : "xuxiao is boy" 

      },

       beforeCreate: function () {

                console.group('beforeCreate 创建前状态===============》');

               console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined

               console.log("%c%s", "color:red","data   : " + this.$data); //undefined 

               console.log("%c%s", "color:red","message: " + this.message)  

        },

        created: function () {

            console.group('created 创建完毕状态===============》');

            console.log("%c%s", "color:red","el     : " + this.$el); //undefined

               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化 

               console.log("%c%s", "color:red","message: " + this.message); //已被初始化

        },

        beforeMount: function () {

            console.group('beforeMount 挂载前状态===============》');

            console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化

            console.log(this.$el);

               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化  

               console.log("%c%s", "color:red","message: " + this.message); //已被初始化  

        },

        mounted: function () {

            console.group('mounted 挂载结束状态===============》');

            console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化

            console.log(this.$el);    

               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化

               console.log("%c%s", "color:red","message: " + this.message); //已被初始化 

        },

        beforeUpdate: function () {

            console.group('beforeUpdate 更新前状态===============》');

            console.log("%c%s", "color:red","el     : " + this.$el);

            console.log(this.$el);   

               console.log("%c%s", "color:red","data   : " + this.$data); 

               console.log("%c%s", "color:red","message: " + this.message); 

        },

        updated: function () {

            console.group('updated 更新完成状态===============》');

            console.log("%c%s", "color:red","el     : " + this.$el);

            console.log(this.$el); 

               console.log("%c%s", "color:red","data   : " + this.$data); 

               console.log("%c%s", "color:red","message: " + this.message); 

        },

        beforeDestroy: function () {

            console.group('beforeDestroy 销毁前状态===============》');

            console.log("%c%s", "color:red","el     : " + this.$el);

            console.log(this.$el);    

               console.log("%c%s", "color:red","data   : " + this.$data); 

               console.log("%c%s", "color:red","message: " + this.message); 

        },

        destroyed: function () {

            console.group('destroyed 销毁完成状态===============》');

            console.log("%c%s", "color:red","el     : " + this.$el);

            console.log(this.$el);  

               console.log("%c%s", "color:red","data   : " + this.$data); 

               console.log("%c%s", "color:red","message: " + this.message)

        }

    })

</script>

Vue实例生命周期示例讲解：

• beforeCreate（创建前）：
  

在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对象还未创建，因此无法访问methods，data，computed等上的方法和数据。

• created（创建后）：
  

实例已经创建完成之后被调用，在这一步，实例已完成了以下配置：数据观测、属性和方法的运算，watch/event事件回调。然而，挂载阶段还没有开始，$el属性目前不可见。这是一个常用的生命周期，因为你可以调用methods中的方法、改变data中的数据，并且修改可以通过vue的响应式绑定体现在页面上、获取computed中的计算属性等等。通常我们可以在这里对实例进行预处理。也有一些童鞋喜欢在这里发ajax请求，值得注意的是，这个周期中是没有什么方法来对实例化过程进行拦截的。因此假如有某些数据必须获取才允许进入页面的话，并不适合在这个页面发请求。 建议在组件路由勾子beforeRouteEnter中来完成。

• beforeMonut：挂载开始之前被调用：相关的 render 函数首次被调用（虚拟DOM），实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。
  

• mounted[ˈmaʊntɪd]：挂载完成，也就是模板中的HTML渲染到了HTML页面中，此时一般可以做一些ajax操作，mounted只会执行一次。
  

• beforeUpdate（更新前）：在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。
  

• updated[ʌp'deɪtɪd]（更新后）：在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
  

• beforeDestroy[dɪˈstrɔɪ]（销毁前）：在实例销毁之前调用。实例仍然完全可用。1.这一步还可以用this来获取实例。2.一般在这一步做一些重置的操作。比如清除掉组件中的 定时器 和 监听的dom事件。
  

• destroyed[dɪs'trɔɪd]（销毁后）：在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
  

这么多钩子函数，我们怎么用呢？
beforeCreate：可以在这里加一个loading
created：loading结束做一些初始化操作
mounted：ajax请求，配合路由钩子做一些事情，可以获取真实DOM
beforeDestory：你确认删除吗？
destoryed：当前组件已被删除，清空相关内容

最常见面试题mounted和created区别
created完成了data数据的初始化，el没有未完成挂载
mounted完成了挂载，可以获取真实DOM

clipboard.png (355.44 KB, 下载次数: 8)

下载附件

2021-3-13 14:55 上传

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2