Vue源码详解之v-for与vuex

Vue源码详解之v-for与vuex

v-for是一个terminal directive。其会接管其子元素的DOM的编译过程。在v-for的bind和update方法中，真正为数据中的每个元素创建响应式DOM。

比如这么一段模板:template:<li v-for="element in array"></li>

那么v-for就要负责为array中的每个element创建响应式的li元素。同时，每当array中的element有变化时，就需要创建/删除新的响应式li元素。因此，上述过程中，必然要反复执行linker。对此，Vue抽象出FragmentFactory和Fragment的两个类(Fragment不是我们常用的document fragment)。

一个v-for指令有一个FragmentFactory实例，在bind阶段创建，FragmentFactory创建过程中会为v-for中的元素（也就是ul中的li）执行compile，生成linker，存放在FragmentFactory实例的linker属性上。

而在v-for指令的update阶段会为数组的每个元素创建scope，scope为继承自当前vm的对象。并在这个对象上存放数组元素的具体内容。