持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第29天，点击查看活动详情
前情提要
上一篇文章中我们通过实践可以发现provide/inject并不是响应式的。虽然引用数据类型在表现上实现了响应式，但是实际上那并不是响应式，而是js中变量在栈和堆中存储的特性导致的。那么如果我们非要实现provide和inject的响应式，那么我们该怎么做呢？
实现provide/inject响应式的核心技术点是什么？
不知道大家还记不记得在模拟实现vue-router时，在声明data.current变量时为了保证该属性为响应式数据，我们使用了Vue中提供的一个api：observable。没错，这就是实现provide/inject为响应式数据的核心技术点。那么接下来就让我们上手试一下吧
实践
- 首先我们沿用上一次的例子，然后在声明变量的时候做个小小的改动。
- app.vue做如下更改：
- helloworld.vue做如下更改：
- 其中我们将test改造成了响应式数据。而obj依然采用普通的方式。以此刚好做一个对比，来对比下使用响应式和不使用响应式的区别。
结果
之后我们到浏览器中运行看一下结果：
- 从结果中我们可以看到普通对象obj，虽然值被改变了。
- 但是作为响应式数据：test。初始值为1234，后期在子组件中被改为了字符型10086，最后在控制台中的打印结果可以看出在该数据改变前的打印结果中该值也被改变了。
再次验证
这次我又引入了第三个组件Home组件，来协助验证：
- 接下来是组件中的改动截图：
-
home组件
-
helloworld组件
-
app容器组件
-
运行结果：
-
总结
虽然引用数据类型可以达到和响应式数据一样的效果，但是他们具有本质区别呦 ~
