vue观察模式分析
观察者模式
首先，我们要问自己，什么是观察者模式？
概念
观察者模式：通常也称为发布-订阅模式。它定义了一对多的依赖关系，即当一个对象的状态发生变化时，依赖它的所有对象都会得到通知并自动更新，解决了主体对象和观察者之间的功能耦合。
讲个故事。
以上观察者模式的概念可能比较官方，我们来讲个故事来了解一下。
答：是共产党派到国民党的特务，代号001(出版者)。b:是共产党的通讯员，负责和A(订户)秘密交接
A的日常工作是公开收集国民党的一些情报，B负责暗中观察，一旦A发出一些关于国民党的消息(更多的时候是需要将消息打包传输，然后根据源代码进行分析)，B就会立即订阅消息，然后做出一些相应的改变，比如通知共产党做一些事情来应对国民党的一些行动。适应性
观察者模式可用于以下任何场景
当一个抽象模型有两个方面，其中一个依赖于另一个。通过封装在独立的对象中，它们可以被独立地更改和重用。当一个对象发生变化时，需要同时改变其他对象，但不知道需要改变多少对象。当一个对象必须通知其他对象时，不知道具体的对象是谁。换句话说，您不希望这些对象紧密耦合。以下是我对vue观察者模式：的理解
不要对框架有偏见。你真的知道jquery，angular，react等。框架只是一个工具。
你用过jquery的触发器，开和关事件绑定方法吗？实际上，vue就是这种模式，只是vue会自动调用方法并自动触发触发器。您甚至可以使用jquery来监控事件的触发。其实最后的解释就是一个事件的回调。
以下是源目录的屏幕截图：
一.初始化vue实例时，将为data函数返回的对象中的属性调用以下方法。代码注释如下：
//这是vue自动绑定事件的方法和触发事件的方法，会为数据函数返回的对象变量属性重写对应属性的赋值和获取操作。请参见(mdnobject . define property API)object . define property(obj，key，{enumerable:true，可配置：true，get : function reactive getter(){ const value=getter？吸气器。调用(obj) :val//Watcher对象，如果有if (Dep.target) {//将Watcher实例推入Dep实例的subs数组，那就相当于ondep . depend()if(child ob){ child ob . Dep . Dep depend()if(array . isarray(value)){ depend array(value)} }返回值}，set:函数reactive setter(new val){ const value=getter？getter . call(obj): val/* ESL int-禁用无自比较*/if (newVal===value || (newVal！==newVal值！==value)){ return }/* ESL int-启用无自比较*/if (process.env.NODE_ENV！==' production ' custom setter){ custom setter()} if(setter){ setter . call(obj，newVal)} else { val=newVal } childOb=！浅层观察器(newVal) //通知Dep实例中subs中数组中的所有Watcher实例，然后调用Watcher实例中的update方法()，相当于触发器。Dep.notify()} })//Watcher构造函数(vm:component，exporfn3360string | function，cb:function，options？对象，isRenderWatcher？布尔值)2.当观察器初始化时，它将调用Dep.pushTarget方法，将Wathcer实例分配给dep.js中的Dep.target，然后根据exporFn运行exporFn表示的方法。这个方法基本上包括调用1中的getter方法.(认为render hook中的操作基本上包括获取vue实例的属性数据中的值或者获取vue实例的计算属性的值)。
varvm=new vue({ data(){ return { msg : '找个小妹妹吧！'}}，//相当于exporfnrender (h) {return h ('H3 '，{}，//其中getter方法对此。msg)对应的msg)将被调用}})，所以render函数将与Vue实例的数据属性和观察属性相关联，形成一个闭环。当属性改变时，setter方法将被自动调用，这将触发dep.notify方法，然后触发dep.subs中的Watcher实例调用update方法，然后进行更新。(这部分代码不知道怎么说，所以没写。有关详细信息，请参见源代码。)
以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。
