vue.js基础学习（生命周期钩子函数）

基础入门：vue.js 生命周期钩子函数

1、生命周期图示 

每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数。

2、生命周期钩子函数（最常用的是 mounted、updated 和 unmounted）

• beforeCreate：在组件实例初始化完成之后立即调用。

• Created：在组件实例处理完所有与状态相关的选项后调用。

• beforeMount：在组件被挂载之前调用。

• Mounted：在组件被挂载之后调用。

• beforeUpdate：在组件即将因为一个响应式状态变更而更新其 DOM 树之前调用。

• Updated：在组件因为一个响应式状态变更而更新其 DOM 树之后调用。

• beforeUnmount：在一个组件实例被卸载之前调用。

• Unmounted：在一个组件实例被卸载之后调用。

• errorCaptured：在捕获了后代组件传递的错误时调用。

• renderTracked：在一个响应式依赖被组件的渲染作用追踪后调用。

• renderTriggered：在一个响应式依赖被组件触发了重新渲染之后调用。

• Activated：若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。

  这个钩子在服务端渲染时不会被调用。

• Deactivated：若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。这个钩子在服务端渲染时不会被调用。

• serverPrefetch：当组件实例在服务器上被渲染之前要完成的异步函数。

• onMounted()：注册一个回调函数，在组件挂载完成后执行。

• onUpdated()：注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用。

• onUnmounted()：注册一个回调函数，在组件实例被卸载之后调用。

• onBeforeMount()：注册一个钩子，在组件被挂载之前被调用。

• onBeforeUpdate()：注册一个钩子，在组件即将因为响应式状态变更而更新其 DOM 树之前调用。

• onBeforeUnmount()：注册一个钩子，在组件实例被卸载之前调用。

• onErrorCaptured()：注册一个钩子，在捕获了后代组件传递的错误时调用。

• onRenderTracked()注册一个调试钩子，当组件渲染过程中追踪到响应式依赖时调用。这个钩子仅在开发模式下可用，且在服务器端渲染期间不会被调用。

• onRenderTriggered()：注册一个调试钩子，当响应式依赖的变更触发了组件渲染时调用。这个钩子仅在开发模式下可用，且在服务器端渲染期间不会被调用。

• onActivated()：注册一个回调函数，若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。这个钩子在服务器端渲染期间不会被调用。

• onDeactivated()：注册一个回调函数，若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。这个钩子在服务器端渲染期间不会被调用。

• onServerPrefetch()：注册一个异步函数，在组件实例在服务器上被渲染之前调用。

部分内容转载自：https://cn.vuejs.org/guide/essentials/lifecycle.html 

 源代码：

App.vue:

<script>
  import Hello from './components/Hello.vue'
  export default{
    data(){
      return{
        isShow:true
      }
    },
    components:{
      Hello
    }
  }

</script>

<template>
  <Hello v-if="isShow"></Hello>
  <button @click="isShow=!isShow">控制</button>
</template>

<style>

</style>

Hello.vue:

<script>
  export default{
    data(){
      return{
        counter:0
      }
    },
    methods:{
      changeCon:function(){
        this.counter=this.counter+1
      }
    },
    beforeCreate(){
      console.log('beforeCreate')
    },
    created(){
      console.log('created')
    },
    beforeMount(){
      console.log('beforeMount')
    },
    mounted(){
      console.log('mounted')
    },
    beforeUpdate(){
      console.log('beforeUpdate')
    },
    updated(){
      console.log('updated')
    },
    beforeUnmount(){
      console.log('beforeUnmount')
    },
    unmounted(){
      console.log('unmounted')
    }
  }
</script>

<template>
  <div>
    <h2>{{counter}}</h2>
    <button @click="changeCon">更改</button>
  </div>
</template>

<style>

</style>

 源代码运行情况：