vue中使用provide-inject传值注意的问题

父组件使用provide传值：

  data() {
    
    
    return {
    
    
      number: 111
    }
  },
  provide() {
    
    
    return {
    
    
      number: this.number
    }
  }

子组件使用inject接收值：

  inject: ['number']

以上的方式，当父组件的number值发生改变后，子组件中接收的number并不会发生变化，也就是不是响应式的；
想要变成响应式：
number用函数方式导出：

  provide() {
    
    
    return {
    
    
      number: () => this.number
    }
  }

或者把number放在对象里面，然后使用provide传一个对象过去：

  data() {
    
    
    return {
    
    
      obj:{
    
    
        number: 111
      }
    }
  },
  provide() {
    
    
    return {
    
    
      obj: this.obj
    }
  }

以上的方式之所以是响应式，是因为对象和函数都属于引用数据类型，实际上传的是引用地址过去，所以当引用数据类型中的数据发生了改变，子组件接收的数据也会发生改变；