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

Vue生命周期的理解

本片文章借鉴于：https://juejin.im/post/5e1eb1dff265da3e354ea2d0?utm_source=gold_browser_extension#heading-4
该文章用于自我理解，侵删

• 什么是 Vue 生命周期？

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

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

• 生命周期阶段与钩子函数
  

• Vue 源码基本流程
  
  简化具体到每个钩子函数的执行
  

• 相关问题

   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('')
   	}