VUE-----生命周期

1.  
   beforeCreate() {
2.  
   // 创建前,有this,没有data,methods,dom节点
3.  
   console.log("beforeCreate",this.num ,this)
4.  
   },

1.  
   created() {
2.  
   // 创建完毕,有data,没有el
3.  
   console.log("created",this.num ,this.$el)
4.  
   // 作用发起ajax请求,开启定时器,监听事件(window)
5.  
    
6.  
   // 开启定时器
7.  
   this.stopId = setInterval(() => {
8.  
   this.num ;
9.  
   console.log("滴答")
10.  
    }, 1000)
11.  
     
12.  
    // 监听事件
13.  
    window.addEventListener("resize",this.showWin)
14.  
     
15.  
    },

1.  
   beforeMount() {
2.  
   // dom挂载前,有el,没有渲染数据
3.  
   // beforeMount 访问&el 为什么是 undefined
4.  
   // 因为使用的脚手架,动态更新造成的(在非脚手架状态下可以)
5.  
   console.log("beforeMount", this, document.querySelector("#btn"))
6.  
   },

1.  
   mounted() {
2.  
   // 挂载完毕
3.  
   console.log("*mounted", this, document.querySelector("#btn"))
4.  
   // this 当前组件的实例
5.  
   // this.$el 当前组件的dom节点
6.  
   // this.num当前组件的 属性
7.  
   // console.log(this,this.$el,"组件的实例this",this.num)
8.  
   // 作用:作用发起ajax请求,开启定时器,监听事件,操作dom节点
9.  
   },

1.  
   // 更新前后
2.  
   beforeUpdate() {
3.  
   // 组件的更新前,数据更新,视图没有更新
4.  
   console.log("beforeUpdate", this.num, document.querySelector("#btn").innerText)
5.  
   },

1.  
   updated() {
2.  
   // 组件更新后,数据更新,视图已经更新
3.  
   console.log("updated", this.num, document.querySelector("#btn").innerText)
4.  
   },

1.  
   // 卸载前后
2.  
   beforeDestroy() {
3.  
   // 结束定时器
4.  
   clearInterval(this.stopId);
5.  
   //移除事件监听
6.  
   window.removeEventListener("resize", this.showWin)
7.  
    
8.  
   // 数据可以更新,视图已经不响应
9.  
   // this.num ;
10.  
    // console.log( "卸载前","beforeDestroy")
11.  
    // alert("卸载前")
12.  
    },

🍓第一次加载页面会触发哪几个钩子函数？