Vue中的Provide/Inject 实现响应式数据

一时失言乱红尘 2022-11-07 13:12 243阅读 0赞

Vue中， Provide/Inject实现了跨组件的通信。但可惜数据并不是响应式的（设计如此）。

> 提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的

以上引用自[官网][Link 1]

可能之所以这样设计，是为了避免数据的混乱。就如同`props`不能被子组件直接修改一样。

从代码角度讲

data() { 
        return { 
    		foo: 'foo',
    		bar: 'bar'
    		baz: { hello: 'world'}
    	}
      },
      provide() { 
        return { 
          foo: this.foo,
          bar: this.bar,
        }
      },

当我们以如上的形式书写代码的时候，其实相当于对`this.foo`和`this.baz`做了一层浅拷贝，固当子组件inject的时候已经丢失了响应式功能了。但由于仅仅是浅拷贝，所以响应式对象的属性仍旧是响应式的。

// 父组件
      provide() { 
        return { 
          baz: this.baz,
        }
      },
      // 子组件baz.hello仍旧是响应式的。
      inject: ['baz']

依照这个思路，如果我们希望整个数据都是响应式的。那么可以通过一下的方法实现：

// 父组件:
    { 
      provide() { 
        return { 
          reactiveMsg: () => this.msg
        }
      },
    }
    
    // 子组件:
    { 
      inject: ['reactiveMsg'],
    
      computed: { 
        computedProperty() { 
          return this.reactiveMsg()
        }
      },
      watch: { 
    	computedProperty() { 
    		console.log('数据改变')
    	}
      }
    }

如上provide提供一个函数。函数内部返回一个响应式的数据。此时整条数据的响应式的状态并不会丢失。

而且这样做有一个好处，即无法直接修改`computedProperty`的值，因为他是一个计算属性。这样就可以避免数据的混乱。

[Link 1]: https://cn.vuejs.org/v2/api/#provide-inject