Vue.js源码（2）：初探ListRendering

下面例子来自官网，虽然看上去就比Hello World多了一个v-for，但是内部多了好多的处理过程。但是这就是框架，只给你留下最美妙的东西，让生活变得简单。

创新互联网站建设由有经验的网站设计师、开发人员和项目经理组成的专业建站团队，负责网站视觉设计、用户体验优化、交互设计和前端开发等方面的工作，以确保网站外观精美、成都做网站、成都网站建设、成都外贸网站建设易于使用并且具有良好的响应性。

 
 
    
  
  
  1.  
    2. 
  
  
  2.     
       
  
  
    •          
      • 
  
  
    •           {{ todo.text }} 
      • 
  
  
    •         
      •  
  
  
    •     
     
    3.
   
 
 
    
  
  
  1. var vm = new Vue({ 
    2. 
  
  
  2.     el: '#mountNode', 
    3. 
  
  
  3.         data: { 
    4. 
  
  
  4.            todos: [ 
    5. 
  
  
  5.                { text: 'Learn JavaScript' }, 
    6. 
  
  
  6.                { text: 'Learn Vue.js' }, 
    7. 
  
  
  7.                { text: 'Build Something Awesome' } 
    8. 
  
  
  8.            ] 
    9. 
  
  
  9.         } 
    10. 
  
  
  10.     })  
    11.

这篇文章将要一起分析：

recap

这里先用几张图片回顾和整理下上一篇Vue.js源码(1)：Hello World的背后的内容，这将对本篇的compile，link和bind过程的理解有帮助：

copmile阶段：主要是得到指令的descriptor 

link阶段：实例化指令，替换DOM

 bind阶段：调用指令的bind函数，创建watcher

 用一张图表示即为：

 observe array

初始化中的merge options，proxy过程和Hello World的过程基本一样，所以这里直接从observe开始分析。

 
 
    
  
  
  1. // file path: src/observer/index.js 
    2. 
  
  
  2. var ob = new Observer(value) // value = data = {todos: [{message: 'Learn JavaScript'}, ...]}  
    3. 
 
 
 
 
    
  
  
  1. // file path: src/observer/index.js 
    2. 
  
  
  2. export function Observer (value) { 
    3. 
  
  
  3.   this.value = value 
    4. 
  
  
  4.   this.dep = new Dep() 
    5. 
  
  
  5.   def(value, '__ob__', this) 
    6. 
  
  
  6.   if (isArray(value)) {     // 数组分支 
    7. 
  
  
  7.     var augment = hasProto 
    8. 
  
  
  8.       ? protoAugment 
    9. 
  
  
  9.       : copyAugment         // 选择增强方法 
    10. 
  
  
  10.     augment(value, arrayMethods, arrayKeys)     // 增强数组 
    11. 
  
  
  11.     this.observeArray(value) 
    12. 
  
  
  12.   } else {                  // plain object分支 
    13. 
  
  
  13.     this.walk(value) 
    14. 
  
  
  14.   } 
    15. 
  
  
  15. }  
    16.

增强数组

增强(augment)数组，即对数组进行扩展，使其能detect change。这里面有两个内容，一个是拦截数组的mutation methods(导致数组本身发生变化的方法)，一个是提供两个便利的方法$set和$remove。

拦截有两个方法，如果浏览器实现__proto__那么就使用protoAugment，否则就使用copyAugment。

 
 
    
  
  
  1. // file path: src/util/evn.js 
    2. 
  
  
  2. export const hasProto = '__proto__' in {} 
    3. 
  
  
  3.  
    4. 
  
  
  4. // file path: src/observer/index.js 
    5. 
  
  
  5. // 截取原型链 
    6. 
  
  
  6. function protoAugment (target, src) { 
    7. 
  
  
  7.   target.__proto__ = src 
    8. 
  
  
  8. } 
    9. 
  
  
  9.  
    10. 
  
  
  10. // file path: src/observer/index.js 
    11. 
  
  
  11. // 定义属性 
    12. 
  
  
  12. function copyAugment (target, src, keys) { 
    13. 
  
  
  13.   for (var i = 0, l = keys.length; i < l; i++) { 
    14. 
  
  
  14.     var key = keys[i] 
    15. 
  
  
  15.     def(target, key, src[key]) 
    16. 
  
  
  16.   } 
    17. 
  
  
  17. }  
    18.

为了更直观，请看下面的示意图：

增强之前：

 通过原型链拦截： 

 通过定义属性拦截： 

 在拦截器arrayMethods里面，就是对这些mutation methods进行包装：

  1. 调用原生的Array.prototype中的方法
  2. 检查是否有新的值被插入(主要是push, unshift和splice方法)
  3. 如果有新值插入，observe它们
  4. ***就是notify change：调用observer的dep.notify()

代码如下： 

 
 
    
  
  
  1. // file path: src/observer/array.js 
    2. 
  
  
  2. ;[ 
    3. 
  
  
  3.   'push', 
    4. 
  
  
  4.   'pop', 
    5. 
  
  
  5.   'shift', 
    6. 
  
  
  6.   'unshift', 
    7. 
  
  
  7.   'splice', 
    8. 
  
  
  8.   'sort', 
    9. 
  
  
  9.   'reverse' 
    10. 
  
  
  10. ] 
    11. 
  
  
  11. .forEach(function (method) { 
    12. 
  
  
  12.   // cache original method 
    13. 
  
  
  13.   var original = arrayProto[method] 
    14. 
  
  
  14.   def(arrayMethods, method, function mutator () { 
    15. 
  
  
  15.     // avoid leaking arguments: 
    16. 
  
  
  16.     // http://jsperf.com/closure-with-arguments 
    17. 
  
  
  17.     var i = arguments.length 
    18. 
  
  
  18.     var args = new Array(i) 
    19. 
  
  
  19.     while (i--) { 
    20. 
  
  
  20.       args[i] = arguments[i] 
    21. 
  
  
  21.     } 
    22. 
  
  
  22.     var result = original.apply(this, args) 
    23. 
  
  
  23.     var ob = this.__ob__ 
    24. 
  
  
  24.     var inserted 
    25. 
  
  
  25.     switch (method) { 
    26. 
  
  
  26.       case 'push': 
    27. 
  
  
  27.         inserted = args 
    28. 
  
  
  28.         break 
    29. 
  
  
  29.       case 'unshift': 
    30. 
  
  
  30.         inserted = args 
    31. 
  
  
  31.         break 
    32. 
  
  
  32.       case 'splice': 
    33. 
  
  
  33.         inserted = args.slice(2) 
    34. 
  
  
  34.         break 
    35. 
  
  
  35.     } 
    36. 
  
  
  36.     if (inserted) ob.observeArray(inserted) 
    37. 
  
  
  37.     // notify change 
    38. 
  
  
  38.     ob.dep.notify() 
    39. 
  
  
  39.     return result 
    40. 
  
  
  40.   }) 
    41. 
  
  
  41. })  
    42.

observeArray()

知道上一篇的observe()，这里的observeArray()就很简单了，即对数组对象都observe一遍，为各自对象生成Observer实例。 

 
 
    
  
  
  1. // file path: src/observer/index.js 
    2. 
  
  
  2. Observer.prototype.observeArray = function (items) { 
    3. 
  
  
  3.   for (var i = 0, l = items.length; i < l; i++) { 
    4. 
  
  
  4.     observe(items[i]) 
    5. 
  
  
  5.   } 
    6. 
  
  
  6. }  
    7.

compile

在介绍v-for的compile之前，有必要回顾一下compile过程：compile是一个递归遍历DOM tree的过程，这个过程对每个node进行指令类型，指令参数，表达式，过滤器等的解析。

递归过程大致如下：

  1. compile当前node
  2. 如果当前node没有terminal directive，则遍历child node，分别对其compile node
  3. 如果当前node有terminal directive，则跳过其child node

这里有个terminal directive的概念，这个概念在Element Directive中提到过：

A big difference from normal directives is that element directives are terminal, which means once Vue encounters an element directive, it will completely skip that element

实际上自带的directive中也有两个terminal的directive，v-for和v-if(v-else)。

terminal directive

在源码中找到：

terminal directive will have a terminal link function, which build a node link function for a terminal directive. A terminal link function terminates the current compilation recursion and handles compilation of the subtree in the directive.

也就是上面递归过程中描述的，有terminal directive的node在compile时，会跳过其child node的compile过程。而这些child node将由这个directive单独compile(partial compile)。

以图为例，红色节点有terminal directive，compile时(绿线)将其子节点跳过： 

 为什么是v-for和v-if?因为它们会带来节点的增加或者删除。

Compile的中间产物是directive的descriptor，也可能会创建directive来管理的document fragment。这些产物是在link阶段时需要用来实例化directive的。从racap中的图可以清楚的看到，compile过程产出了和link过程怎么使用的它们。那么现在看看v-for的情况：

compile之后，只得到了v-for的descriptor，link时将用它实例化v-for指令。 

 
 
    
  
  
  1. descriptor = { 
    2. 
  
  
  2.     name: 'for', 
    3. 
  
  
  3.     attrName: 'v-for', 
    4. 
  
  
  4.     expression: 'todo in todos', 
    5. 
  
  
  5.     raw: 'todo in todos', 
    6. 
  
  
  6.     def: vForDefinition 
    7. 
  
  
  7. }  
    8.

link

Hello World中，link会实例化指令，并将其与compile阶段创建好的fragment(TextNode)进行绑定。但是本文例子中，可以看到compile过程没有创建fragment。这里的link过程只实例化指令，其他过程将发生在v-for指令内部。

bind

主要的list rendering的魔法都在v-for里面，这里有FragmentFactory，partial compile还有diff算法(diff算法会在单独的文章介绍)。

在v-for的bind()里面，做了三件事：

  1. 重新赋值expression，找出alias："todo in todos"里面，todo是alias，todos才是真正的需要监听的表达式
  2. 移除
  3. {{todo.text}}
    4. 元素，替换上start和end锚点(anchor)。锚点用来帮助插入最终的li节点
  4. 创建FragmentFactory：factory会compile被移除的li节点，得到并缓存linker，后面会用linker创建Fragment 
 
 
    
  
  
  1. // file path: /src/directives/public/for.js 
    2. 
  
  
  2. bind () { 
    3. 
  
  
  3.     // 找出alias，赋值expression = "todos" 
    4. 
  
  
  4.     var inMatch = this.expression.match(/(.*) (?:in|of) (.*)/) 
    5. 
  
  
  5.     if (inMatch) { 
    6. 
  
  
  6.       var itMatch = inMatch[1].match(/\((.*),(.*)\)/) 
    7. 
  
  
  7.       if (itMatch) { 
    8. 
  
  
  8.         this.iterator = itMatch[1].trim() 
    9. 
  
  
  9.         this.alias = itMatch[2].trim() 
    10. 
  
  
  10.       } else { 
    11. 
  
  
  11.         this.alias = inMatch[1].trim() 
    12. 
  
  
  12.       } 
    13. 
  
  
  13.       this.expression = inMatch[2] 
    14. 
  
  
  14.     } 
    15. 
  
  
  15.      
    16. 
  
  
  16.     ... 
    17. 
  
  
  17.      
    18. 
  
  
  18.     // 创建锚点，移除LI元素 
    19. 
  
  
  19.     this.start = createAnchor('v-for-start') 
    20. 
  
  
  20.     this.end = createAnchor('v-for-end') 
    21. 
  
  
  21.     replace(this.el, this.end) 
    22. 
  
  
  22.     before(this.start, this.end) 
    23. 
  
  
  23.  
    24. 
  
  
  24.     ... 
    25. 
  
  
  25.  
    26. 
  
  
  26.     // 创建FragmentFactory 
    27. 
  
  
  27.     this.factory = new FragmentFactory(this.vm, this.el) 
    28. 
  
  
  28.   } 
    29.

 

Fragment & FragmentFactory

这里的Fragment，指的不是DocumentFragment，而是Vue内部实现的一个类，源码注释解释为：

Abstraction for a partially-compiled fragment. Can optionally compile content with a child scope.

FragmentFactory会compile

  • {{todo.text}}
    • ，并保存返回的linker。在v-for中，数组发生变化时，将创建scope，克隆template，即
  • {{todo.text}}
    • ，使用linker，实例化Fragment，然后挂在end锚点上。

    在Fragment中调用linker时，就是link和bind

  • {{todo.text}}
    • ，和Hello World中一样，创建v-text实例，创建watcher。 

    scope

    为什么在v-for指令里面可以通过别名(alias)todo访问循环变量?为什么有$index和$key这样的特殊变量?因为使用了child scope。

    还记得Hello World中watcher是怎么识别simplePath的吗? 

     
 
      
  
  
    1. var getter = new Function('scope', 'return scope.message;') 
      2.

    在这里，说白了就是访问scope对象的todo，$index或者$key属性。在v-for指令里，会扩展其父作用域，本例中父作用域对象就是vm本身。在调用factory创建每一个fragment时，都会以下面方式创建合适的child scope给其使用： 

     
 
      
  
  
    1. // file path: /src/directives/public/for.js 
      2. 
  
  
    2. create (value, alias, index, key) { 
      3. 
  
  
    3.     // index是遍历数组时的下标 
      4. 
  
  
    4.     // value是对应下标的数组元素 
      5. 
  
  
    5.     // alias = 'todo' 
      6. 
  
  
    6.     // key是遍历对象时的属性名称 
      7. 
  
  
    7.     ... 
      8. 
  
  
    8.     var parentScope = this._scope || this.vm 
      9. 
  
  
    9.     var scope = Object.create(parentScope) // 以parent scope为原型链创建child scope 
      10. 
  
  
    10.     ... 
      11. 
  
  
    11.     withoutConversion(() => { 
      12. 
  
  
    12.       defineReactive(scope, alias, value) // 添加alias到child scope 
      13. 
  
  
    13.     }) 
      14. 
  
  
    14.     defineReactive(scope, '$index', index) // 添加$index到child scope 
      15. 
  
  
    15.     ... 
      16. 
  
  
    16.     var frag = this.factory.create(host, scope, this._frag) 
      17. 
  
  
    17.     ... 
      18. 
  
  
    18.   }  
      19.

    detect change

    到这里，基本上“初探”了一下List Rendering的过程，里面有很多概念没有深入，打算放在后面结合其他使用这些概念的地方一起在分析，应该能体会到其巧妙的设计。

    ***举两个例子，回顾上面的内容

    例一： 

     
 
      
  
  
    1. vm.todos[0].text = 'Learn JAVASCRIPT'; 
      2.

    改变的是数组元素中text属性，由于factory创建的fragment的v-text指令observe todo.text，因此这里直接由v-text指令更新对应li元素的TextNode内容。

    例二： 

     
 
      
  
  
    1. vm.todos.push({text: 'Learn Vue Source Code'}); 
      2.

    增加了数组元素，v-for指令的watcher通知其做update，diff算法判断新增了一个元素，于是创建scope，factory克隆template，创建新的fragment，append在#end-anchor的前面，fragment中的v-text指令observe新增元素的text属性，将值更新到TextNode上。

    更多数组操作放在diff算法中再看。

    到这里，应该对官网上的这句话有更深的理解了：

    Instead of a Virtual DOM, Vue.js uses the actual DOM as the template and keeps references to actual nodes for data bindings.

    网站名称：Vue.js源码（2）：初探ListRendering
    链接地址：http://www.mswzjz.cn/qtweb/news36/537536.html

    攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 贝锐智能

    贝锐智能技术为您推荐以下文章

    微信公众号知识

    各行业网站

    草坪音箱　　 　成都网站排名　　 　成都app开发　　 　成都水电改造　　 　温江电信机房　　 　混凝土搅拌车　　 　简阳机房托管　　 　泸州网站建设　　 　自贡托管服务器　　 　服务器托管　　 　成都圣月窗帘　　 　绵阳服务器托管　　 　温江网站建设　　 　小谭网创广告　　 　成都定制网页设计　　 　网站开发　　 　达州网站建设　　 　微官网开发　　 　网站优化公司　　 　开元建筑