019 vue3新特性2

在setup中使用生命周期函

你可以通过在生命周期钩子前面加上"on"来访问组件生命周期钩子。

下表包含如何在setup()内部调用生命周期钩子

Options API	Hook inside setup
beforeCreate	Not needed*
created	Not needed*
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeUnmount	onBeforeUnmount
unmounted	onUnmounted

   

 

 

 

 

 

 

 

 

 

export default{

　　setup(){

　　　　//mounted

　　　　onMounted(()=>{

　　　　　　console.log('Component is mounted! ')

　　　　}) 

　　}

}

 

Provide/Inject

provide()和inject()可以实现嵌套组件之间的数据传递。

这两个函数只能在setup()函数中使用。

父级组件中使用provide()函数向下传递数据。

子集组件中使用inject()获取上层传递过来的数据。

不限层级

//父组件

import{ provide } from "vue"

setup(){

　　provide("customVal","我是父组件向子组件传递的值");

}

//子组件

import{ inject } from "vue"

setup(){

　　const customVal = inject ("customVal");

　　return{

　　　　customVal

　　}

}

父级：

 子集：

 

 

Fragment

Fragment翻译为："碎片"

不再限于模板中的单个根节点

<template>

　　<img alt="Vue logo" src="./assets/logo.png">

　　<HelloWorld msg="Welcome to Your Vue.js App " />

</template>