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

前景提示:在学习provide和inject是发现一个问题就是顶层组件使用功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的值都是重新包装之后才显示所以是响应式改变的

这里感谢 Jyann博主的文章给予的帮助,在这里贴上链接,里面的内容更加的全面,大家有相关问题可以查阅
http://t.csdn.cn/yeKls