背景
当我们需要从父组件向子组件传递数据时，会使用props.如果有一些多层级嵌套的组件，形成了复杂的组件树，而某个深层的子组件需要一个较远的祖先组件中的部分数据。此时，如果仅使用props 较麻烦 需逐级传递下去 较麻烦
官方提供了 两个API 分别是 provide 和 inject 解决这一问题。父组件相对于其所有的后代组件，会作为依赖提供者。任何后代的组件树，无论层级有多深，都可以注入 由父组件提供给整条链路的依赖
Provide（提供）
既然是提供 数据，需要使用到 provide()函数:
<script>
import { provide } from 'vue'
provide('注入名',/*可以是一个字符串或Symbol*/'值'/*可以是任意类型包括响应式数据*/)
</script>
如果不是使用
import { provide } from 'vue'
export default{
setup(){
provide('注入名',值)
}
}
应用层 Provide
在整个应用层面提供依赖，意味着在该应用内的所有组件中都可以注入。编写插件时会特别有用。
Inject(注入)
要注入上层组件提供的数据，使用 inject() 函数注入:
<script setup>
import { inject } from 'vue'
const message = inject('message')
</script>
注意:如果提供的值是一个 ref，注入进来的会是 ref对象，而不会自动解包为其内部的值。这可以使注入方组件能够通过ref对象保持和供给方的响应性链接。
注入默认值
声明一个默认值 和props 类似
// 如果没有祖先组件提供 "message"
// `value` 会是 "这是默认值"
const value = inject('message', '这是默认值')
和响应式数据配合使用
建议尽可能将任何对响应式状态的变更都保持在供给方组件中。易维护
有的场景 可能需要在注入方组件中更改数据。此时，推荐在供给方组件内声明并提供一个更改数据的方法函数如下：
<script setup>
import { provide,ref } from 'vue'
const location = ref('LLLL')
function updateLocation(){
location.value = 'SSSS'
}
provide('location',{
location,
updateLocation
}
</script>
<!-- 在注入方组件 -->
<script>
import {inject}from 'vue'
const {location,updateLocation} = inject('location')
</script>
<template>
<button @click='updateLocation'>{{location}}</button>
</template>
如果想确保提供的数据不能被注入方的组件更改，可以使用 readonly() 来包装提供的值。
<script setup>
import { ref, provide, readonly } from 'vue'
const count = ref(0)
provide('read-only-count', readonly(count))
</script>
onBeforeMount() 在组件被挂载之前被调用
onMounted() 在组件挂载完成后执行
onBeforeUpdate() 在组件即将因为响应式状态变更而更新其 DOM 树之前调用
onUpdated() 组件因为响应式状态变更而更新其 DOM 树之后调用;需要在某个特定的状态(数据)更改后访问更新后的 DOM 请使用 $nextTick() 替代
onBeforeUnmount() 在组件实例被卸载之前调用
onUnmounted() 在组件实例被卸载之后调用
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/163329.html
