provide、inject一般用在组件间嵌套过多，而子组件一层层的传递很麻烦，此时通过provide、inject可以跨层传递。但是最近在使用的过程中发现一个问题:

祖组件中data里的响应式数据通过provide return以后，发现孙组件无法接受到最新的值

//祖组件

<template>
    <div> this is grandparent component</div>
</template>
<script>
export {
    name:"grandparent",
    data(){
            return{
              hasMeal:false 
        }
    },
    provide(){
        return{
            hasMeal:this.hasMeal        
        }
    },
    create(){
     
      fetch(xxx).then(res=>{
            this.hasMeal=res.data.hasMeal  //此时是true
        })
    }
}
</script>

///
孙组件

<template>
    <div> this is grandson component</div>
</template>
<script>
export {
    name:"grandparent",
    data(){
            return{
               
        }
    },
    inject:['hasMeal'],
    create(){
        console.log(this.hasMeal)    //false
    }
}
</script>

 hasMeal经过异步请求以后变成了true，原本期待provide最后return的值是最新的值时true，结果在孙组件页面打印this.hasMeal发现。还是false？那是否是provide在return之前的this.hasMeal还是false呢？经过测试发现，果不其然。进一步证明。provide里如果直接return data里的值。是不能被响应式处理的。

如何解决？

//祖组件

<template>
    <div> this is grandparent component</div>
</template>
<script>
export {
    name:"grandparent",
    data(){
            return{
              hasMeal:false 
        }
    },
    provide:()=>{
        return{
            hasMeal:this.hasMeal        
        }
    },
    create(){
     
      fetch(xxx).then(res=>{
            this.hasMeal=res.data.hasMeal  //此时是true
        })
    }
}
</script>

///
孙组件

<template>
    <div> this is grandson component</div>
</template>
<script>
export {
    name:"grandparent",
    data(){
            return{
               
        }
    },
    inject:['hasMeal'],
    create(){
        console.log(this.hasMeal())    //true
    }
}
</script>

把provide变成一个箭头函数。然后在孙页面通过执行这个函数的方式拿到函数返回的结果就可以拿到最新的值。也就间接变成了响应式的了