zhenyong / notebook Goto Github PK

我知道：要实现数据绑定，得用到观察者模式。
我在看作者写的这个commit和这个commit的时候，写了大量observer和emitter的代码。
问题是：我无法理解这两段代码如何起作用的，我也没找到有调用他们的痕迹。

hi, zhenyong：
最近我在看vue状态机解析path路径这一部分，有些问题没有想明白。
你的理解提到：

a['b'].c
有 [x] 这种的，需要状态机解析 Path.parse("a['b'].c")

然而我在实践中却发现这种情况依然不会触发状态机解析，而仅仅只会触发expression.js里面的parseExpression函数，而不会触发path.js里面的parsePath函数。
为什么会出现这种情况呢？

我的demo是这样的：

<div id="demo">
    <p>{{user['info'][1].name}}</p>
    <p>{{user.age}}</p>
</div>

使用的vue版本是1.0.26

我参考的资料包括：

1. http://jiongks.name/blog/vue-code-review/
2. https://github.com/banama/aboutVue/blob/master/pathStateMachine.md

也提了一个相关的issue

hi，zhenyong:
最近我在看早期vue是如何实现v-if的，参考的版本是这个。但是我对作者的实现有很多不明白的地方。
考虑如下的情况。

<div id="app">
    <p>姓名:{{user.name}}</p>
    <p>年龄:{{user.age}}</p>
    <div v-if="show" id="sub_app">
        <h1>如果show为真,我们就显示{{user.name}}</h1>
    </div>
</div>

当DOM遍历解析到v-if的时候，v-if整个的DOM结构会被当成新一个childVue来实例化，也就是说，v-if结构本身是一个实例，这里就变成了实例套实例的情况，父实例是#app，子实例是#sub_app。
面对这种情况，一个关键问题是父实例的数据变化如何传导到子实例。或者说，当改变父实例的user.name时，如何做到子实例中的user.name这个DOM元素也跟着改变。
按照之前实现的逻辑，当某个vue实例的data数据发生变化的时候，就会触发该实例的updateBindingAt方法，然后就会依次找到对应的watcher（后面的省略）。
我观察到vue的实现方式是：在遍历子实例#sub_app的时候，将子实例生成的watcher添加到父实例#app上面去，这样当触发父实例的updateBindingAt的时候，就能找到对应的watcher执行。

然而，我所不理解的是，那么作为一个vue的实例，子实例的_rootBinding，observer这些还有什么作用吗？压根就不需要嘛。因为子实例的数据监听，触发更新DOM，这些都交由父实例来完成了。那么我为什么还需要把v-if当成是实例呢？
还有，如果把v-if当成是实例，那么还存在实例的作用域问题，子实例sub_app是否应该有自己的作用域？如果有，如何构造和维护这个作用域？
我感觉在未来做组件化的时候肯定要处理好作用域的问题，但是，在目前只实现v-if的情况下，有没有更简洁的实现方案？

我这几天看源码看得有些糊涂，还望能够指点一二。

hi，最近我想通过逐commit的方式来研究vue的源码，找到了你的这篇文章。但是我却没有办法运行起来早期的vue代码，情况如下。
我checkout到的commit id是这个：30f67ab14090900a28c18db01cf631c037d36e81，
也就是这个页面的第一行。按照作者的contributing.md中的开发步骤，安装好各种东西之后编译生成dist/vue.js。调用方式和执行结果参考下图。

为什么页面上还显示{{message}}呢？
是不是早期的vue就没有实现数据绑定的功能？
然而，我尝试checkout到之后的很多的commit，也还是这样。
请问你当时逐commit查看的时候又遇到这种情况吗？

附上build出来的vue.js

hi, zhenyong:
请教个问题。我在查看vue的这个版本的时候，发现作者写了大量跟scope相关的东西。我不知道这个东西有什么用，我觉得只有涉及到组件化的时候，才有可能谈到实例嵌套，才有可能用到scope来区分各个实例。但是这个版本的vue还没有涉及到组件化呀，所以我就糊涂了。
你对这个有什么看法吗？

(Experimental) New Scope Inheritance Model

In the previous version, nested Vue instances do not have prototypal inheritance of their data scope. Although you can access parent data properties in templates, you need to explicitly travel up the scope chain with this.$parent in JavaScript code or use this.$get() to get a property on the scope chain. The expression parser also needs to do a lot of dirty work to determine the correct scope the variables belong to.
In the new model, we provide a scope inehritance system similar to Angular, in which you can directly access properties that exist on parent scopes. The major difference is that setting a primitive value property on a child scope WILL affect that on the parent scope! This is one of the major gotchas in Angular. If you are somewhat familiar with how prototype inehritance works, you might be surprised how this is possible. Well, the reason is that all data properties in Vue are getter/setters, and invoking a setter will not cause the child scope shadowing parent scopes. See the example here.
This is very powerful, but probably should only be available in implicit child instances created by v-repeat and v-if. Explicit components should retain its own root scope and use some sort of two way binding like v-with to sync with outer scope.

引自：项目changes.md文件