vue 生命周期

生命周期

1、分类

vue 生命周期_第1张图片
vue 生命周期_第2张图片

2、4个事件8个钩子

主要Vue生命周期事件被分为两个钩子,分别在事件之前和之后调用,vue应用程序中有4个主要事件(8个钩子):

  • 创建 create---- 在组建创建时执行
  • 挂载 mount---- DOM被挂载时执行
  • 更新 update---- 当响应数据被修改时执行
  • 销毁 destory---- 在元素被销毁之前立即执行
3、调用方式

options API 和composition API的区别
例子:点击按钮使 h1 标签的值加1

  • options API
    <template>
        <h1>{{ counter }}</h1>
        <button @click="incrCounter">Click Me</button>
    </template>
    <script>
    export default {
        data() {
            return {
                counter: 0
            }
        },
        methods: {
            incrCounter: function() {
                this.counter += 1;
            }
        }
    }
    </script>
    
    
  • composition API
    <template>
        <h1>{{ counter }}</h1>
        <button @click="incrCounter">Click Me</button>
    </template>
    <script setup>
        import { ref } from 'vue'
    
        let counter = ref(0);
    
        const incrCounter = function() {
            counter.value += 1;
        }
    </script>
    

你会注意到一些不同之处。

  • 我们导入了一个叫做ref 的东西–这让我们可以创建反应式变量
  • 当我们增加计数器时,我们实际上增加了counter.value ,因为ref 返回一个对象。
  • 我们避免使用整个原型,而只是有一个单一的incrCounter 函数 ```
(1)在【options API】中,生命周期钩子是被暴露在vue实例上的选项,我们只需要调用使用即可。

使用 选项API,生命周期钩子是被暴露 Vue实例上的选项。我们不需要导入任何东西,只需要调用这个方法并为这个生命周期钩子编写代码。

// 选项 API
<script>     
   export default {         
      mounted() {             
         console.log('mounted!')         
      },         
      updated() {             
         console.log('updated!')         
      }     
   }
</script> 
(2) 在【composition API】中,我们需要将生命周期钩子导入项目,然后才能使用。
// 组合 API
<script>
import { onMounted } from 'vue'

export default {
   setup () {
     onMounted(() => {
       console.log('mounted in the composition api!')
     })
   }
}
</script>

在这里,beforecreate和created被setup方法本身所替代,我们在在setup中将会访问到9个生命周期:

  • onBeforeMount:在挂载之前被调用,渲染函数render首次被调用
  • onMounted:组件挂载时调用
  • onBeforeUpdate:数据更新时调用,发生在虚拟DOM打补丁之前。
  • onUpdated:因数据更改导致的虚拟DOM重新渲染和打补丁时调用
  • onBeforeUnmount:在卸载组件实例之前调用,此阶段的实例依旧是正常的。
  • onActivated:被keep-alive缓存的组件激活时调用
  • onDeactivated:被keep-alive缓存的组件停用时调用
  • onErrorCaptured:当捕获一个来自子孙组件的错误时被调用,有三个参数:错误对象、发生错误的组件实例、一个包含错误来源信息的字符串;此钩子会返回false来阻止改错误继续向上传播。

在组合API中,使用setup()方法替换了beforeCreate和created,那么在这两个生命周期中的方法将放在setup中执行

4、使用例子
【1】beforeMount()和onBeforeMount()

在组件DOM实际渲染之前调用,此时根元素还不存在,在选项API中,可使用this.$el来 访问;在组合API中,想访问的话就必须在根元素上使用ref。

//选项API
beforeMount(){
	console.log('beforeMount',this.$el)
}

//组合API
<template>
	<div ref="root">
		Hello~
	</div>
</template>
 import {ref,onBeforeMount} from 'vue'
 export default{
 	setup(){
 		const root = ref(null)
 		onBeforeMount(()=>{
 			console.log('onBeforeMount',root.value)
 		})
 		return {
 		root
 		}
 	},
 	  beforeMount() {
      console.log('beforeMount',this.$el)
    }
 }

【2】mounted()和onMounted()

在组件的第一次渲染后调用,此时元素可用,允许直接DOM访问。

import { ref, onMounted } from 'vue'
 

 export default {
   // 组合 API
   setup() {    
 
     const root = ref(null)
     
     onMounted(() => {
       console.log(root.value)
     })

     return {
       root
     }
   },
   // 选项 API 
   mounted() {
     console.log(this.$el)
   }
 } 

【3】beforeUpdate()和onBeforeUpdate()

数据更新时调用,发生在虚拟DOM打补丁之前。

beforeUpdate对于跟踪对组件的编辑次数,甚至跟踪创建撤销功能的操作很有用。

【4】updated()和onUpdated()

DOM更新后,updated的方法就会调用

【5】beforeUnmount()和onBeforeUnmounted()

在卸载组件实例之前调用

//选项API
export default{
mounted(){
	console.log('mounted')
},
beforeUnmount(){
	console.log('unmount')
}
}

//组合API
import { onMounted,onBeforeUnmount } from 'vue'
export default {
	setup(){
		onMounted(()=>{
			console.log('mount')
		})
		onBeforeUnmount(()=>{
			console.log('unmount')
		})
	}
}

【6】unmounted()和onUnmounted()

卸载组件实例后调用,调用此钩子时,组件实例的所有指令都被解除绑定,所有事件侦听器都被移除,所有子组件实例被卸载。

import { onUnmouted } from 'vue'

export default {
	//组合API
	setup(){
		onUnmounted(()=>{
			console.log('unmounted')
		})
	},
	//选项API
	unmounted(){
		console.log('unmounted')
	}
}

【7】actived()和onActivated()

被keep-alive缓存的组件激活时调用

【8】deactivated()和onDeactivated()

被keep-alive缓存的组件停用时调用。

【9】vue3还提供了两个可用于调试目的的钩子

onRenderTracked
onRenderTriggered
这两个事件都带有一个debugger event,该事件会告诉你哪个操作跟踪了组件以及该操作的目标对象和键。

export default {
    onRenderTriggered(e) {
       debugger
       // 检测什么依赖造成了组件的重新渲染
    }
}

你可能感兴趣的:(#,vue教程,vue.js,javascript)