Vue3新特性2

在setup中使生命周期函

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

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

xxxxxxxxxx
export default {
  setup() {
    // mounted
    onMounted(() => {
      console.log('Component is mounted!')
    })
  }
}

Provide / Inject

• provide() 和 inject() 可以实现嵌套组件之间的数据传递。
• 这两个函数只能在 setup() 函数中使用。
• 父级组件中使用 provide() 函数向下传递数据。
• 子级组件中使用 inject() 获取上层传递过来的数据。
• 不限层级

xxxxxxxxxx
// 父组件
import { provide } from "vue"

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

xxxxxxxxxx
// 子组件
import { inject } from "vue"

setup() {
    const customVal = inject("customVal");
    return {
      customVal
    }
}

Fragment

Fragment翻译为：“碎片”

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

xxxxxxxxxx
<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App" />
</template>