前言
本文假设你已对 reactive / inject 相关函数有了解并使用过。
正文
下面是笔者对 reactive 传递各种数据类型所整理的情况
reactive -> computed 包含 inject 的情况
const info = reactive(computed(() => inject('info')))
reactive -> computed 包含 vuex 的情况
const info = reactive(computed(() => store.state.info))
reactive -> computed 包含 props 的情况
const info = reactive(computed(() => props.info))
reactive -> inject 的情况
const info = reactive(inject('info'))
reactive -> props.info 的情况
const info = reactive(props.info)
这么多种情况看起来很混乱的样子？搞什么嘛这是，别急，看到最后你就会发现其实也就那么回事。
使用
因涉及到 inject 函数，所以笔者会采用 father.vue / child.vue 两个文件来配合完成本次案例，所以咋们来先看看代码吧（后面会有效果图，看完你就懂了）
父组件 father.vue 代码
<template>
<div>
父组件：
{
{
info.name }}
</div>
<div>
子组件：
<child :info="info"/>
</div>
</template>
<script>
import child from './child.vue'
import {
reactive, provide } from 'vue'
import {
useStore } from 'vuex'
export default {
components: {
child
},
setup() {
const store = useStore()
const info = reactive(store.state.info)
provide('info', info)
return {
info
}
}
}
</script>
子组件 child.vue 代码
<template>
<div>
reactive -> computed 包含 inject 的情况 {
{
reactiveComputedInjectInfo.name }}
</div>
<div>
reactive -> computed 包含 vuex 的情况 {
{
reactiveComputedVuexInfo.name }}
</div>
<div>
reactive -> computed 包含 props 的情况 {
{
reactiveComputedPropsInfo.name }}
</div>
<div>
reactive -> inject 的情况 {
{
reactiveInjectInfo.name }}
</div>
<div>
reactive -> props.info 的情况 {
{
reactivePropsInfo.name }}
</div>
<div>
<button @click="changeName">更改名字</button>
</div>
</template>
<script>
import {
reactive, computed, inject } from 'vue'
import {
useStore } from 'vuex'
export default {
props: {
info: {
type: Object,
default: {
}
}
},
setup(props) {
const store = useStore()
const reactiveComputedInjectInfo = reactive(computed(() => inject('info')))
const reactiveComputedVuexInfo = reactive(computed(() => store.state.info))
const reactiveComputedPropsInfo = reactive(computed(() => props.info))
const reactiveInjectInfo = reactive(inject('info'))
const reactivePropsInfo = reactive(props.info)
const changeName = () => {
reactiveComputedInjectInfo.value.name = '李四'
// 以下更改均是等价的，这里笔者简单拿第一个来做案例。
// reactiveComputedPropsInfo.value.name = '李四'
// reactiveComputedVuexInfo.value.name = '李四'
// reactiveInjectInfo.name = '李四'
// reactivePropsInfo.name = '李四'
}
return {
changeName,
reactiveComputedInjectInfo,
reactiveComputedVuexInfo,
reactiveComputedPropsInfo,
reactiveInjectInfo,
reactivePropsInfo
}
}
}
</script>
最后我们在 vuex 里面定义一些数据
const store = new Vuex.Store({
state: () => {
return {
info: {
name: '张三'
}
}
}
})
我们来看看效果图
瞬间秒懂了有木有，原来这么多种情况都是一起同步更新的，所以我们只要记住
无论 reactive 传递什么数据进去，一旦数据发生变化，所有关联的都会同步更新
只要你对 引用 类型有一定了解，那么这种同步也就不足以稀奇了，说白了就是 浅拷贝
Note
可能你也注意到了child.vue里面的changeName函数有些带了.value，这是因为凡是reactive放入computed的都要加上.value才能更改数据，忘记看的同学可以再去瞧一眼。
好了内容就到这里，喜欢就点个赞，欢迎有问题的小伙伴留言。
另外笔者还整理了 Vue3 学习指南总结，有兴趣的话可以去瞧一瞧。