Vue基础--生命周期

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue--生命周期</title>
</head>
<body>
<!--
1. vue对象的生命周期
  1). 初始化显示
    * beforeCreate()
    * created()
    * beforeMount()
    * mounted()  //挂载，初始化显示之后立即调用，常用
  2). 更新状态
    * beforeUpdate()
    * updated()
  3). 销毁vue实例: 调用vm.$destory()后（vm表示当前Vue实例），就会执行beforeDestory()和destoryed()
    * beforeDestory() //vm死亡之前调用（调用一次），常用
    * destoryed()    //销毁vm
2. 常用的生命周期方法
  created()/mounted(): 发送ajax请求, 启动定时器等异步任务
  beforeDestory(): 做收尾工作, 如: 清除定时器
-->

<div id="test">
  <button @click="destroyVue">destory vue</button>
  <p v-if="isShow">尚硅谷IT教育</p>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#test',
    data: {
      isShow: true
    },

    mounted () {//初始化显示之后立即调用
      //使用this.intervalId是保证在beforeDestroy()中可以看到intervalId，故将intervalId绑到this上
      this.intervalId = setInterval(() => {//补充知识点1
        console.log('-----')
        this.isShow = !this.isShow
      }, 1000)
	  
	  /*
       补充知识点1
	  setInterval里面的回调函数这样写的话，this不指向当前Vue对象。
	  （当函数作为参数时，就写成箭头函数），该回调函数写成上面的箭头函数的话，定义了一个匿名函数，
	  此匿名函数内部没有自己的this,故this指向外部即当前Vue对象
	  setInterval(function(){
        console.log('-----')
        this.isShow = !this.isShow
      }, 1000)
	  */
	  
    },

    beforeDestroy() {
      console.log('beforeDestroy()')
      // 执行收尾的工作
      //清除定时器
      clearInterval(this.intervalId)
    },

    methods: {
      destroyVue () {
        this.$destroy()
      }
    }
  })
</script>
</body>
</html>
Vue基础--生命周期

猜你喜欢
