vue3 provide inject 添加响应性

众所周知：vue 在提供provide 和 inject。无论组件层次结构有多深，父组件都可以作为其所有子组件的依赖提供者。这个特性有两个部分：父组件有一个 provide 选项来提供数据，子组件有一个 inject 选项来开始使用这些数据。

处理响应性

vue2中可以使用computed来实现响应式

app.component('todo-list', {
  // ...
  provide() {
    return {
      todoLength: Vue.computed(() => this.todos.length)
    }
  }
})

app.component('todo-list-statistics', {
  inject: ['todoLength'],
  created() {
    console.log(`Injected property: ${this.todoLength.value}`) // > 注入的 property: 5
  }
})

vue3组合式api中为了增加 provide 值和 inject 值之间的响应性，我们可以在 provide 值时使用 ref 或 reactive

<!-- src/components/MyMap.vue -->
<template>
  <MyMarker />
</template>

<script>
import { provide, reactive, ref } from 'vue'
import MyMarker from './MyMarker.vue'

export default {
  components: {
    MyMarker
  },
  setup() {
    const location = ref('North Pole')
    const geolocation = reactive({
      longitude: 90,
      latitude: 135
    })

    provide('location', location)
    provide('geolocation', geolocation)
  }
}
</script>

这里需要注意下！！！！

// 父组件
const state = reactive({
  listData: []
})
// 提供列表数据
provide('listData', state.listData)//这样传给子组件不是响应式（因为state.listData不是proxy类型）

解决方案： provide传过去的值一定要是proxy进行过代理的或者计算属性

//可以采用计算属性实现响应式
provide('listData', computed(() => {
  return state.listData
}))
//可以toRef实现响应式
provide('selectAllFlag', toRef(state, '_selectAll'));

GameOver