vue3爷孙传值也发生了变化

vue3:

//爷爷
<template>
  <div class="page pageIndex">
    <Son></Son>    //儿子
  </div>
</template>
<script setup>
    import { reactive } from 'vue';
    const gran_son = ref(100)
    function gran() {
      gran_son.value++
    }
    provide('gran_son',{gran_son,gran})  
    //provide传key值和，值响应式的方法过去，如果只传一个值不需要对象包裹，如下：
    //provide('gran_son',gran_son) 
    //如果想传过去的值，不受影响变化就如下：
    //provide('gran_son', readonly(gran_son))
</script> 

//爸爸
<template>
    <div>
        <GranSonVue></GranSonVue>    //孙子
    </div>
</template>

//孙子
<template>
    <div>
        <div class="" @click="gran">{{gran_son}}孙子</div>
    </div>
</template>

<script setup>
import { inject } from "vue"
const {gran_son, gran} = inject('gran_son')   //inject接收key值,解构响应式的方法和爷爷传过来的值

</script>

vue2

// 爷爷组件
data() {
    return {
        name: '张三'
    }
},
provide() {
    return {
        name: this.name
    }
}

//孙组件
inject: ['name']