面试题合集-Vue-01生命周期

「爱情、让人受尽委屈。」 2023-07-13 15:22 11阅读 0赞

## Vue生命周期的理解 ##

**本片文章借鉴于：[https://juejin.im/post/5e1eb1dff265da3e354ea2d0?utm\_source=gold\_browser\_extension\#heading-4][https_juejin.im_post_5e1eb1dff265da3e354ea2d0_utm_source_gold_browser_extension_heading-4]  
该文章用于自我理解，侵删**

*  什么是 Vue 生命周期？

> Vue生命周期大概就是：一个Vue实例的创建到组件销毁的一个过程。具体的过程有创建，挂载，更新，销毁几个核心阶段，并且每个阶段都有一套钩子函数来执行。

**相关图片来自于网络，侵删**

*  生命周期阶段与钩子函数  
    ![图片来自于掘金某文章，侵删][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70]
 *  Vue 源码基本流程  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 1]  
    简化具体到每个钩子函数的执行  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 2]
 *  **相关问题**
    
        1.什么时期创建 el ？
         	在mouted阶段可以访问到el了
         2.什么时期挂载 data ？
         	created 时期 el 无法访问到，但是可以访问到 data 了
         3.什么时期可以访问 dom ？
         	mouted阶段
         4.什么情况下组件会更新？更新是同步更新还是异步更新？
         	update阶段
         5.什么情况下组件会被销毁？
         	destoryed阶段
         6.销毁组件后，还可以访问哪些内容？
 *  生命周期钩子常见使用场景
    
        1.beforeCreate 谨慎操作 this
          	 beforeCreate 无法访问到 this 中的 data、method
          2.请求应放在 created 钩子中
          	created 可以访问 this，但无法访问 dom，dom 未挂载
          	实例：
          	created() {    
          		// 允许并推荐   
         	 	 this.$http.get(xxx).then(res => {        this.data = res.data    })    
         	 	 // 不允许   
         	 	  this.$el    			
         	 	  this.$ref.demo    
         	 	  const a = document.getElementById('demo')
         	 }
          3.操作 DOM 代码应放在 mounted 钩子中
          	mounted 已经挂载 dom，可以访问 this
          	实例：
          	mounted() {
         	    // 允许
         	    this.$el
         	    this.$ref.demo
         	    let a = document.getElementById('')
         	}

[https_juejin.im_post_5e1eb1dff265da3e354ea2d0_utm_source_gold_browser_extension_heading-4]: https://juejin.im/post/5e1eb1dff265da3e354ea2d0?utm_source=gold_browser_extension#heading-4
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70]: /images/20230529/2b11463201a64655a8c3d7a1ebe2401b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 1]: /images/20230529/ce077471c2ca44fba5a999832ac386d7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 2]: /images/20230529/e32cd0b322a44a589c83358c1554fbc3.png