vue的生命周期

vue的生命周期

前言

1、什么是生命周期

  • vue中的生命周期指的是 组件 从创建到销毁一个过程,在这个过程中,我们在每一个特定的阶段会触发一些方法( 这些方法具备一些功能),我们给这些方法起了个名字叫做( 生命周期钩子函数/ 组件钩子 )

2、为什么要学习生命周期?

  • 因为我们想在生命周期钩子中实现项目功能,那么我们必须知道每一个钩子函数的具体用途

3、这个生命周期是谁的生命周期?

  • 组件

一、vue生命周期的阶段

初始化、运行中、销毁三个阶段

注意:生命周期钩子函数不允许写成箭头函数,会造成this丢失

1、初始化阶段

  • beforeCreate

    • 1、组件创建前触发,目的是为了组件的生命周期 和 组件中的事件做准备
    • 2、数据没有获得,真实dom也没有渲染出来
    • 3、可以进行数据请求,提供了一次数据修改的机会
    • 4、 执行一次
  • created

    • 1、组件创建结束
    • 2、数据得到了,真实dom没有渲染出来
    • 3、可以进行数据请求,提供了一次数据修改的机会
    • 4、执行了一次
  • beforeMount

    • 1、组件挂载前
    • 2、 判断el 判断 template
      • 如果el没有,那么我们需要手动挂载,如果有,那么判断template
      • 如果template有,那么进行render函数
      • 如果template没有,那么通过 outerHTML 手动书写模板
    • 3、数据可以获得,但是真实dom还没有渲染
    • 4、可以进行数据请求,也提供了一次数据修改的机会
    • 5、执行一次
  • mounted

    • 1、组件挂载结束
    • 2、数据获得了,真实dom也获得了
    • 3、可以进行数据请求,也就可以修改数据
    • 4、执行了一次
    • 5、可以进行真实dom的操作了( 可以进行第三方库的实例化了 )

总结:

1、数据请求一般写在created里面

2、第三方库实例化一般会往mounted中写

代码示例

<div id="app">
    <Hello></Hello>
</div>
<template id="hello">
    <div>
      <p> {{ msg }} </p>
    </div>
</template>
<script>
Vue.component('Hello',{
    template: '#hello',
    data () {
      return {
        msg: 'hello'
      }
    },
    beforeCreate () {
      console.log('1-beforeCreate')
      console.log('data',this.msg)
      console.log('真实dom',document.querySelector('p'))

      // fetch('./data.json')   这里可以进行数据请求
      //   .then( res => res.json())
      //   .then( data => this.msg = data )
      //   .catch( error => console.log( error ))

    },

    created () {
      console.log('2-created')
      console.log('data',this.msg)
      console.log('真实dom',document.querySelector('p'))
      // fetch('./data.json')  这里可以进行数据请求
      // .then( res => res.json())
      // .then( data => this.msg = data )
      // .catch( error => console.log( error ))
    },
    beforeMount () {
      console.log('3-beforeMount')
      console.log('data',this.msg)
      console.log('真实dom',document.querySelector('p'))
      // fetch('./data.json')  这里可以进行数据请求
      // .then( res => res.json())
      // .then( data => this.msg = data )
      // .catch( error => console.log( error ))
    },
    // render() render函数作用是将  jsx 转换成 vdom 对象模型 

    mounted () {
      console.log('4-mounted')
      console.log('data',this.msg)
      console.log('真实dom',document.querySelector('p'))
      fetch('./data.json')  //这里可以进行数据请求
      .then( res => res.json())
      .then( data => this.msg = data )
      .catch( error => console.log( error ))
    }

  })

  new Vue({
    el: '#app'
  })
</script>

2、运行中阶段(触发条件:数据更新)

  • beforeUpdate

    • 1、更新前
    • 2、重新渲染 VDOM , 然后通过diff算法比较两次vdom,生成patch 补丁对象
    • 3、这个钩子函数更多的是内部进行一些操作,我们知道一下就可以
    • 4、可以触发多次
  • updated

    • 1、更新结束
    • 2、真实dom得到了,数据也得到了( 更新后的 )
    • 3、动态数据获取( 第三方库实例化 )

代码示例

<div id="app">
    <Hello></Hello>
  </div>
  <template id="hello">
    <div>
      <p> {{ msg }} </p>
    </div>
  </template>
<script>
Vue.component('Hello',{
    template: '#hello',
    data () {
      return {
        msg: 'hello '
      }
    },
    beforeCreate () {
      console.log('1-beforeCreate')
      console.log('data',this.msg)
      console.log('真实dom',document.querySelector('p'))

      // fetch('./data.json')
      //   .then( res => res.json())
      //   .then( data => this.msg = data )
      //   .catch( error => console.log( error ))

    },

    created () {
      console.log('2-created')
      console.log('data',this.msg)
      console.log('真实dom',document.querySelector('p'))
      // fetch('./data.json')
      // .then( res => res.json())
      // .then( data => this.msg = data )
      // .catch( error => console.log( error ))
    },
    beforeMount () {
      console.log('3-beforeMount')
      console.log('data',this.msg)
      console.log('真实dom',document.querySelector('p'))
      // fetch('./data.json')
      // .then( res => res.json())
      // .then( data => this.msg = data )
      // .catch( error => console.log( error ))
    },
    // render() render函数作用是将  jsx 转换成 vdom 对象模型 

    mounted () {
      console.log('4-mounted')
      console.log('data',this.msg)
      console.log('真实dom',document.querySelector('p'))
      fetch('./data.json')
      .then( res => res.json())
      .then( data => this.msg = data )
      .catch( error => console.log( error ))
    },
    // ----------------------- 运行中-----------------------
    beforeUpdate () {
      console.log('beforeUpdate')
      console.log('data',this.msg)
      console.log('真实dom',document.querySelector('p'))
    },
    updated () {
      console.log('updated')
      console.log('data',this.msg)
      console.log('真实dom',document.querySelector('p'))
    }


  })

  new Vue({
    el: '#app'
  })
</script>

3、销毁阶段(触发条件:当组件销毁时)

  • Vue的销毁有两种形式

    • 通过开关的形式——外部销毁
    • 通过调用 $destroy 方法——内部销毁
  • 内部销毁 vs 外部销毁

    • 外部销毁不仅能销毁组件,也能销毁该组件的dom结构
    • 内部销毁只能销毁组件,不能销毁组件的dom结构
  • beforeDestroy

  • destroyed

    总结:这两个钩子功能一致的,没有太大的区别

    作用:用来做善后的,比如计时器的关闭 第三方实例的删除

代码示例:外部销毁

<div id="app">
    <button @click = "flag = !flag"> 切换 </button>
    <Hello v-if = "flag"></Hello>
  </div>
  <template id="hello">
    <div>
      hello
    </div>
  </template>
<scritp>
Vue.component('Hello',{
    template: '#hello',
    mounted () {
      this.time = setInterval ( () => {
        console.log( 'HELLO' )
      },1000)
    },
    beforeDestroy () {
      console.log('beforeDestroy')
      clearInterval( this.time )
    },
    destroyed () {
      console.log('destroyed')
    }
  })
  new Vue({
    el: '#app',
    data: {
      flag: true
    }
  })
</script>

代码示例:内部销毁

<body>
  <div id="app">
    <Hello></Hello>
  </div>
  <template id="hello">
    <div class="hello-box">
      <button @click = "clear"> 销毁 </button>
      hello
    </div>
  </template>
</body>

<script>
  Vue.component('Hello',{
    template: '#hello',
    methods: {
      clear () {
        this.$destroy()   //调用$destroy()实现
      }
    },
    mounted () {
      this.time = setInterval ( () => {
        console.log( 'hello' )
      },1000)
    },
    beforeDestroy () {
      console.log('beforeDestroy')
      clearInterval( this.time )
      document.querySelector('.hello-box').remove()
    },
    destroyed () {
      console.log('destroyed')
    }
  })
  new Vue({
    el: '#app',
    data: {
      flag: true
    }
  })
</script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值