diff --git "a/\345\217\214\345\220\221\346\225\260\346\215\256\347\273\221\345\256\232.md" "b/\345\217\214\345\220\221\346\225\260\346\215\256\347\273\221\345\256\232.md" index 9d2f053..4faaa21 100644 --- "a/\345\217\214\345\220\221\346\225\260\346\215\256\347\273\221\345\256\232.md" +++ "b/\345\217\214\345\220\221\346\225\260\346\215\256\347\273\221\345\256\232.md" @@ -48,12 +48,12 @@ function Observer(obj, key, value){ ```JavaScript function Watcher(fn){ + Dep.target = this; + fn(); + Dep.target = null; this.update = function(){ - Dep.target = this; fn(); - Dep.target = null; } - this.update(); } ``` 极其简单的几行代码,`fn`是数据变化后要执行的回调函数,一般是获取数据渲染模板。默认执行一遍`update`方法是为了在渲染模板过程中,调用数据对象的`getter`时建立两者之间的关系。因为同一时刻只有一个`watcher`处于激活状态,把当前`watcher`绑定在`Dep.target`(方便在`Observer`内获取)。回调结束后,销毁`Dep.target`。 @@ -98,7 +98,7 @@ function Dep(){ ``` 首先,我们给`obj`的每一个属性都添加`getter`和`setter`。创建一个`Watcher`对象,回调函数是使`#test`的内容为`obj.a`,这里是`1`。 -打开控制太,我们修改`obj.a == 22`。我们发现页面中显示的内容也变成了`22`。相关代码见[这里](https://github.com/liutaofe/vue2.0-source/blob/master/example/observer-watcher.html)。 +打开控制台,我们修改`obj.a == 22`。我们发现页面中显示的内容也变成了`22`。相关代码见[这里](https://github.com/liutaofe/vue2.0-source/blob/master/example/observer-watcher.html)。 以上知识我们的开胃小菜,`Vue`中对数组做了处理,而且页面的更新是异步执行的,所以会有许许多多的处理,接下来我们慢慢分解。