8、钩子函数

beforeCreate()		-> 使用	steup()	//	入口函数
created()			-> 使用	steup() //	入口函数
beforeMount()		 ->使用	onBeforeMount()
mounted()			 ->使用	onMounted()
beforeUpdate()		 ->使用	onBeforeUpdate()
updated()			 ->使用	onUpdated()
beforeDestroy()		 ->使用	onBeforeUnmount()
destroyed()			 ->使用	onUnmounted()
errorCaptured()		 ->使用	onErrorCaptured()

<template>
  <div class="app">
    <h1>钩子函数</h1>
  </div>
</template>

<script>
import { onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,onErrorCaptured } from 'vue'
export default {
  setup() {
    onBeforeMount(() => {
      // 载入前（完成了data和el数据初始化），但是页面中的内容还是vue中的占位符，
	  // data中的message信息没有被挂在到Bom节点中，在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取
    })
	onMounted(() => {
	  // 载入后html已经渲染(ajax请求可以放在这个函数中)
	})
	onBeforeUpdate(() => {
	  // 更新前状态（view层的数据变化前，不是data中的数据改变前），重新渲染之前触发，
	  // 然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染
	})
	onUpdated(() => {
	  // 数据已经更改完成，dom也重新render完成
	})
	onBeforeUnmount(() => {
	  // 销毁前执行,一般在这里善后:清除计时器、清除非指令绑定的事件等等…’)
	})
	onUnmounted(() => {
	  // 销毁后 （Dom元素存在，只是不再受vue控制）,卸载watcher，事件监听，子组件
	})
	onErrorCaptured(() => {
	  // 错误捕获
	})
  }
}
</script>

<style></style>