笔记：Vue数据相应式绑定道理—观源码

2019年8月31日 192次阅读 来源: reclay

没有详细对应源码剖析，只是浏览源码的笔记，等以后学好点再写成文章

Vue

  • self，组织天生的this。

  • root根元素。

  • els带指令的一切元素，经由过程querySelectorAll猎取，触及getDirSelectors，返回”[v-text],[v-show]”(属性选择器)
    bindings对data里的举行绑定？

处置惩罚节点processNode

  • 提取一切attributes，getAttributes返回数组，元素是对象，包括name、value。

    
[{name:"v-text",value:"message"},{}]
使用了el.attributes, 这个返回一下效果，太多，用getAttributes过滤一下

    《笔记：Vue数据相应式绑定道理—观源码》

  • 对提取的一切指令举行剖析，parseDirective，返回以下效果，关于v-show=”isShow”
    《笔记：Vue数据相应式绑定道理—观源码》

  • 绑定指令bindDirective

    key是要指向data的key，所以实际上是attr的value

  • bindDirective的最后用bindAccessors举行defineProperty设定get、set

    defineProperty绑定的set、get是在vm上，所以初始化只需要给vm的响应属性赋值

  • 初始化

    遍历bindings并赋值到vm
    原文作者：reclay
    原文地址: https://segmentfault.com/a/1190000008821490
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞