关于前端: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