<template> <div> {{a+b}} </div> <div> {{a-c}} </div> </template> <script> let app = new Vue( { data :{ a: 1, b: 2, c: 3 } })
我们编译到{{a+b}},会去实例化一个对应的Watcher对象，Watcher的构造函数中有这么一句
this.cb.call(this.vm);this.cb指的是function(){return a+b};this.vm指的是这个vue对象，这样就会触发vue.a和vue.b的getter方法，a，b都有自己的dep对象，我们通过Dep.target将这个Watcher对象就加到dep的subs数组中去了，当我们变更a或者b是就会触发setter，进而触发subs数组中的update方法，视图中的a+b就会更新
有个小知识点：我们新建一个属性对象时必须通过Vue.set的方法去实现，而不能直接通过=实现，这样会检测不到，因为我们在初始化时就通过defineProperty重构了这个对象属性的getter和setter方法，新建的属性则没有所以不会被检测到
下图为Vue框架在数据初始化中使用观察者模式的示意图：
以上所述是小编给大家介绍的vue双向绑定及观察者模式详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: