vue3 provide和inject底层组件的值不是响应式的处理详解

//顶层组件代码
 const count = ref(100);
 provide('count-key',count);
 const setCount = ()=>{
     count.value = 99;
 }
 <template>
     <div>{{count}}</div>//99
 </template>
 //底层组件
 const count = inject('count-key');
 const setCount = inject('set-count);
 onMounted(()=>{
     setCount();
 })
 /*子组件的onMounted执行完成之后父组件的onMounted函数才执行完成,所以在子组件中显示的100,但是父组件中显示时已经修改了count的值,所以父组件中显示的99,子组件中显示的100*/
 <template>
     <div>{{count}}</div>//100
 </template>

//顶层组件代码
 const count = ref(100);
 provide('count-key',count);
 const setCount = ()=>{
     count.value = 99;
     return {
         countNum:count.value
     }
 }
 provide('set-count',setcount)
 <template>
     <div>{{count}}</div>//99
 </template>
 //底层组件
 const count = inject('count-key');
 const setCount = inject('set-count');
 const countNum = setCount().countNum
 <template>
     <div>{{count}}--{{countNum}}</div>//100--99
 </template>
 在子组件中使用的count的值还是和上面一段代码的解释一样,但是父组件的count和子组件的countNum的值都是重新包装之后才显示所以是响应式改变的