lovecoding
/
VIP24


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
							<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <button @click="fn()">+1</button>
    <button @click="des()">销毁</button>
    <h2 id="myCount">{{count}}</h2>
  </div>
  <script src="vue.js"></script>
  <script>
    new Vue({
      el:'#app',
      data:{
        count: 1
      },
      methods:{
        fn(){
          this.count++
        },
        des(){
          this.$destroy()
        }
      },
      //组件实例刚刚创建的时候  属性计算之前
      beforeCreate(){
        console.log('beforeCreate',this.$data,this.$el)
      },
      //组件实例刚刚创建完成，属性绑定了，dom未生成，el不存在
      created(){
        console.log('created',this.$data,this.$el)
      },
      //挂载之前
      beforeMount(){
        console.log('beforeMount',this.$data,this.$el)
      },
      //挂载之后
      mounted(){
        console.log('mounted',this.$data,this.$el)
        this.timer = setInterval(()=>{
          console.log(Math.random())
          this.count++
        },1000)
      },
      //更新之前
      beforeUpdate(){
        console.log('beforeUpdate',document.getElementById('myCount').innerHTML)
      },
      //更新之后
      updated(){
        console.log('updated',document.getElementById('myCount').innerHTML)
      },
      //销毁前
      beforeDestroy(){
        console.log('beforeDestroy')
        clearInterval(this.timer)
      },
      //销毁后
      destroyed(){
        console.log('destroyed')
      }
      /* 
      beforeCreate: 在实例初始化之后，数据和event/watcher事件配置之前去调用
      created： 在实例创建完成后立即被调用，这个阶段可以访问到实例的数据和方法，但是没有挂载到dom上
      beforeMount：在挂载开始前被调用，在这个阶段，模板的编译已经完成，但是还是没有将组件挂载到Dom上
      mounted：在挂载完成后被调用，此时组件已经被挂载到dom上，可以进行dom操作或者访问组件的Dom元素
      beforeUpdate：在数据更新之前被调用，发生在dom重新渲染之前，可以在这个阶段进行状态的修改
      updated：在数据更新之后被调用，发生在dom重新渲染之后，可以执行一些依赖更新后的dom操作
      beforeDestroy：在实例销毁之前被调用，可以进行一些清理工作，比如清除定时器
      destroyed：在实例销毁后被调用，组件已经完全销毁，所有的事件监听器和子组件被移除。
      */
    })
  </script>
</body>
</html>