当像这样的一段代码运行并获得价格的价值时，我们希望价格记住这个匿名函数（目标）。这样，如果价格变化，或者设置为新值，它将触发此函数以重新运行，因为它知道此行依赖于它。所以你可以这样想。
Get =>记住这个匿名函数，当我们的值发生变化时，我们会再次运行它。
Set =>运行保存的匿名函数，我们的值刚改变。
或者就我们的Dep Class而言
Price accessed (get) => 调用dep.depend（）来保存当前目标
Price set => 在价格上调用dep.notify（），重新运行所有目标
让我们结合这两个想法，并完成我们的最终代码。
现在看看会发生什么。
正是我们所希望的！价格和数量都确实是得到了实时的响应的！只要价格或数量的价值得到更新，我们的总代码就会重新运行。
Vue文档中的这个插图现在应该开始有意义了。
你看到那个漂亮的紫色数据圈了吗？看起来应该很眼熟！每个组件实例都有一个从getter(红线)收集依赖项的服务观察器实例(蓝色)。当稍后调用设置程序时，它会通知监视程序，它将导致组件重新呈现。下面是我自己的一些注释的图片。
是的，现在是不是觉得更有意义了。
显然，Vue做的可能更复杂更惊喜，但你现在知道了基础知识。
⏪ 总结：所以我们学了什么？如何创建一个Dep类来收集依赖项（依赖）并重新运行所有依赖项（notify）。如何创建一个观察程序来管理我们正在运行的代码，这些代码可能需要作为依赖项添加（target）。如何使用Object.defineProperty（）创建getter和setter。
总结
以上所述是小编给大家介绍的Vue.js实现数据响应的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: