Vue3 关于 reactive 函数嵌套 computed / inject / props 的情况

前言

本文假设你已对 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 学习指南总结，有兴趣的话可以去瞧一瞧。