Code Monkey home page Code Monkey logo

explore-vue's Introduction

explore-vue

concept

  • Vue Constructor

    Vue构造函数要做的事情,实例化一个Vue实例,添加$el,$data,$options三个属性

    建立观察者(Observer),处理模板编译部分(Compiler),将data中的所有属性与vue直接绑定

  • Observer

    通过递归遍历,Object.defineProperty对data中的所有属性进行数据劫持

  • Compiler

    模板编译部分,主要是通过node的attribute属性来匹配到相应的指令,将对应的node与数据绑定起来

  • Watcher

    监听者,监听者主要做的工作是保存一个oldValue,如果数据发生了改变,匹配oldValue和newValue必然不相等,这时候进行node值的更新

    实质上就是将数据与模板建立联系

  • Dep

    依赖的收集,每次getter劫持的时候,将新的监听者添加到Dep数组中,每次setter劫持时,将Dep数组中的所有监听者执行回调,更新node的数据

    Dep和Watcher的关系是,Watcher是对每次getter操作都进行监听 Dep包含一个Watcher数组 又有一个notify回调可以遍历执行所有的Watcher

reflection

  • Vue初始化实例的时候发生了什么?

    将Vue构造函数实例化,添加属性$data,$el,$options,并先后执行 Observer(用来将data中所有的数据都进行数据劫持),Compiler(模板编译部分,将对应的node与数据绑定起来),最后又一次通过Object.defineProperty将Vue实例上的属性与data中的属性进行关联起来

  • Vue双向绑定的原理 v-model

    两部分,一部分是如何实现数据更新视图跟着更新,一部分是如何实现视图更新数据跟着更新

    1.实现数据更新视图跟着更新

    数据getter时,在dep中添加watcher,数据setter时,执行dep的notify回调,遍历每一个watcher,执行函数(通过匹配旧值和新值,如果不相等,对应node的value进行更新)

    2.实现视图更新数据跟着更新

    Compiler会将有v-model的node添加一个input的事件监听,每次输入数据都会更新data中对应属性的值,而每次更新值又会触发setter劫持,进行dep的notify回调。

  • 如何匹配到{{msg}}像这样双括号中的变量

    第一,需要知道的是元素标签(elementnode)中的文本值,本身会被一个文本标签(textnode)所包裹住。

    通过Compiler进行模板编译的时候,找到文本标签,用正则匹配来解析node.textContent,如果匹配到{{}},解析出{{}}中的变量,添加watcher,返回data中对应变量的value,当value更新时,又会触发setter劫持,将watcher执行,匹配新旧值,更新node.textContent

流程图

explore-vue's People

Contributors

2456844450 avatar

Stargazers

 avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.