Vue3.0笔记之🙈生命周期

2,104

Vue钩子函数

🌰 setup(): <- beforeCreatecreated

开始创建组件之前,创建data和method,在beforeCreate之后和created之前执行。

1、setup接受两个参数props、context

2、⚠️在setup中没有this,也无法使用 data 和 methods

3、context 是一个 JavaScript 对象,context.attrs, context.slots, context.emit

//setup中的props是响应式的
export default {
  props: {
    name: String
  },
  setup(props,context) {
    console.log(props.name)
  }
}

❌ props不能直接使用解构(如果非要使用,通过setup中的toRefs来使用)

import { toRefs } from 'vue'

setup(props) {
	const { name } = toRefs(props)
        console.log(name.value)
}

官网:因为 props 是响应式的,不能使用 ES6 解构,因为它会消除 prop 的响应性。

setup()使用例子

<template>

 <div>{{age}}</div>
 <p>{{plus10}}</p>
 <button @click="onEdit">点这个按钮上面的数字会变</button>
 
</template>

<script>
import { ref, reactive } from 'vue'

export default {
  setup() {
    const checked = ref(['a', 'b']);
    
    // reactive 声明复杂数据类型
    const currentContact = reactive({
      name: '张三',
      tel: '13000000000',
    });
    
    //定义一个age的响应式数据,并初始化值为1
    const age = ref(1)
  
    //定义一个函数,修改age 
    const onEdit = () => {
       age.value++ //想改变值或获取值 必须.value
    };
    
    //计算属性×10
    const plus10 = computed(() => age.value * 10);

    // 暴露给模板
    return {
      checked,
      currentContact,
      age,
      onEdit
    }
  },
}
</script>

🌰 onBeforeMount(): <- beforeMount

挂载前,组件挂载到节点上之前执行的函数。


🌰 onMounted() : <- mounted

挂载完成,组件挂载完成后执行的函数。


🌰 onBeforeUpdate(): <- beforeUpdate

组件更新前,组件更新之前执行的函数。


🌰 onUpdated(): <- updated

组件更新完成后,组件更新完成之后执行的函数。


🌰 onBeforeUnmount(): <- beforeDestroy

组件销毁前,组件卸载之前执行的函数。


🌰 onUnmounted(): <- destroyed

组件销毁完成后,组件卸载完成后执行的函数


🌰 onActivated(): <- activated

组件被激活时执行。被包含在中的组件,会多出两个生命周期钩子函数。


🌰 onDeactivated(): <- deactivated

组件切换时,比如从 A 组件,切换到 B 组件,A 组件消失时执行。


🌰 onErrorCaptured(): <- errorCaptured

捕获组件异常的函数。


👉新增了onRenderTracked、onRenderTriggered (两个钩子函数都接收一个 DebuggerEvent)(主要用于调试)

import { onRenderTracked,onRenderTriggered } from 'vue'

     setup(){
	//新增两个生命周期函数
	onRenderTracked((e)=>{
		console.log(e);
		console.log("当一个reactive对象属性或一个ref被追踪时触发----onRenderTracked");

		})
	onRenderTriggered((e)=>{
		console.log(e);
		console.log("依赖项变更被触发时-----> onRenderTriggered");	
		})
		
   }
<script>
import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  ref
} from 'vue'

export default {
  setup () {
    // 其他的生命周期
    onBeforeMount (() => {
	console.log("App ===> 相当于 vue2.x 中 beforeMount")
    })
    onMounted (() => {
	console.log("App ===> 相当于 vue2.x 中 mounted")
    })
    
    // 注意,onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate (() => {
	console.log("App ===> 相当于 vue2.x 中 beforeUpdate")
    })
    
    onUpdated (() => {
    	console.log("App ===> 相当于 vue2.x 中 updated")
    })
    
    onBeforeUnmount (() => {
	console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })
    
    onUnmounted (() => {
	console.log("App ===> 相当于 vue2.x 中 destroyed")
    })
   
    return {
    }
    
  }
}
</script>