vue3.0 生命周期函数

从'vue'中引入的生命周期函数,这些生命周期钩子注册函数只能在setup()期间同步使用
	因为它们依赖于内部的全局状态来定位当前组件实例(正在调用setup()的组件实例),不在当前组件下调用这些函数会抛出一个错误。
	即可以从其他文件引入使用了生命周期的函数等,放在setup中执行

和外部的生命周期函数相比,会优先指向setUp内的生命周期函数,再去执行外部的生命周期函数


	
使用
	import { onMounted } from 'vue'

	setup()
	{
		onMounted(()=>{
			...
		})
		
		修改两个生命周期函数
		 onBeforeUnmount	对应beforeDestroy
		 	在卸载组件实例之前调用。在这个阶段，实例仍然是完全正常的。
		 onUnmounted		对应destroyed
			卸载组件实例后调用,调用此钩子时,组件实例的所有指令都被解除绑定,所有事件侦听器都被移除,所有子组件实例被卸载。
			
		新增两个生命周期函数
			追踪的依赖:
				在template中显示的变量
				
			
		    onRenderTracked(({ key, target, type })=>{
				跟踪虚拟DOM重新渲染时调用,钩子接收debugger event作为参数,此事件告诉你哪个操作跟踪了组件以及该操作的目标对象和键。
				type:set/get操作
				key:追踪的键
				target:重新渲染后的键
		    })
   			
   			onRenderTriggered(({ key, target, type })=>{
				当虚拟DOM重新渲染被触发时调用,和renderTracked类似,接收debugger event作为参数,此事件告诉你是什么操作触发了重新渲染,以及该操作的目标对象和键。
			})
			
			例:
			<div id="app">
			  <button v-on:click="addToCart">Add to cart</button>
			  <p>Cart({{ cart }})</p>
			</div>
		
			const app = Vue.createApp({
			  data() {
			    return {
			      cart: 0
			    }
			  },
			  renderTracked({ key, target, type }) {
			    console.log({ key, target, type })
			    /* 当组件第一次渲染时，这将被记录下来:
			    {
			      key: "cart",
			      target: {
			        cart: 0
			      },
			      type: "get"
			    }
			    */
			  },
			  renderTriggered({ key, target, type }) {
			    console.log({ key, target, type })
			  },
			  methods: {
			    addToCart() {
			      this.cart += 1
			       /* 这将导致renderTriggered调用
			        {
			          key: "cart",
			          target: {
			            cart: 1
			          },
			          type: "set"
			        }
			      */
			    }
			  }
			})
			
			app.mount('#app')

代码示例:

<template>
  <div>
      <img src="./logo.png">
    <h1>Hello Vue 3!</h1>
    {{name}}{{obj.sex}}
    <button @click="inc">Clicked {{ count }} times.</button>
  </div>

</template>

<script>
import { ref,reactive,computed,readonly,watchEffect,watch,onMounted, onUpdated, onUnmounted,onRenderTracked,onRenderTriggered } from 'vue'

export default {
  setup() {
    let count = ref(0)
    let count2=ref(2);
    let name = ref('jeff')
    const obj=reactive({sex:'male'})
    const robj=readonly(obj); 
    let timer;

    let r=readonly('aa') //不具有只读的能力

    onMounted(()=>{
      console.log('挂载后');
    })
    onRenderTracked((e)=>{
      console.log(e)
    })
    onRenderTriggered((e)=>{
      console.log(e);
    })

    const inc = () => {

       count.value++;
       name.value='jak'

    }

    return {
      count,
      inc,
      name, //在setup返回对象中自动解套
      obj
    }
  }
}
</script>

<style scoped>
img {
  width: 200px;
}
h1 {
  font-family: Arial, Helvetica, sans-serif;
}
</style>