diff --git a/README.cn.md b/README.cn.md index 1f901a1..89b4eab 100644 --- a/README.cn.md +++ b/README.cn.md @@ -66,3 +66,6 @@ npm run build ``` For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). + +## 图解 +![图解](/graph.svg) diff --git a/README.md b/README.md index 77f4106..233843b 100644 --- a/README.md +++ b/README.md @@ -66,3 +66,9 @@ npm run build ``` For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). + + +## Graph Translate +To translate the tiny-vue with a graph + +![graph](/graph.svg) diff --git a/graph.png b/graph.png new file mode 100644 index 0000000..1a057a4 Binary files /dev/null and b/graph.png differ diff --git a/graph.svg b/graph.svg new file mode 100644 index 0000000..08e0040 --- /dev/null +++ b/graph.svg @@ -0,0 +1 @@ +
_initData()：为$options中的data添加代理，并绑定在Vue上
_initData()：为$options中的data添加代理，并绑定在Vue上
State：data
State：data
Vue：看Vue.js文件
Vue：看Vue.js文件
$options
$options
el
el
method
method
data
data
_containerAttrs：el的一些属性
_containerAttrs：e...
Observer：对data的每一项进行代理
Observer：对data的每一项进行代理
observe()：对data的每一项设置getter和setter并维护一个专属Dep
observe()：对data的每一项设置getter和setter并维护一个专属Dep
Dep：记录对data的依赖
Dep：记录对data的依赖
全局uid：自增，保证每个Dep都有唯一id
全局uid：自增，保证每个Dep都有唯一id
①：将Vue的属性方法以及
dom整合成一个数据
①：将Vue的属性方法以及...
②：执行
②：执行
③：传入$optons的data的message
③：传入$optons的data的message
全局target：当有watcher想要收集依赖的时候，便会有值
全局target：当有watcher想要收集依赖的时候，便会有值
defineReactive()：对message进行getter和setter代理
defineReactive()：对message进行getter和sette...
④：传入message
④：传入message
vm：Vue
vm：Vue
Dep
Dep
depend()：调用访问该值的watcher的addDep()
depend()：调用访问该值的watcher的addDep()
notify()：提醒所有依赖于该值的watcher更新
notify()：提醒所有依赖于该值的watcher更新
Compile
Compile
compileDirectives()：根据节点的attributes属性与‘事先指令’（比如v-model）对应起来
compileDirectives()：根据节点的attributes属性与‘事先指令’（比如v...
attributes：这里存储的是节点绑定好的指令数据，比如input输入框绑定的是v-modal指令以及message的值。这些数据非常重要，建议调试看这个属性
attributes：这里存储的是节点绑定好的指令数据，比如input输入框绑定的是v-modal指令以及message...
Directive：每个节点的指令会对应一个Directive
Directive：每个节点的指令会对应一个Directi...
_bind()：生成watcher，并绑定directive的指令对应的值在watcher上
_bind()：生成watcher，并绑定directive的指令对应的值在watcher上
bind()：事先指令的bind()方法
bind()：事先指令的bind()方法
watcher：目前只有编译指令的时候才对与指令有关的值创建对应的watcher
watcher：目前只有编译指令的时候才对与指令有关的值创建对应的watcher
  Watcher：在创建 的时候，获取指令所依赖的数据，进行依赖绑定
  Watcher：在创建 的时候，获取指令所依赖的数据，进行依赖绑定
depsId：用来保存与该watcher有关的depid
depsId：用来保存与该watcher有关的depid
deps：用来保存与该watcher有关的dep
deps：用来保存与该watcher有关的dep
_compile()
_compile()
①：执行
①：执行
②：执行
②：执行
lifeCycle
lifeCycle
_bindDir()：此刻才创建Directive，将设定好的指令(v-model)的函数(bind和update等)绑定在Directive。并将生成的directive添加在Vue的_directives
_bindDir()：此刻才创建Directive，将设定好的指令(v-model)的函数(bind和up...
_compile()：编译节点的attributes成函数
_compile()：编译节点的attributes成函数
addDep()：给watcher要访问的值所绑定的Dep添加此watcher，同时此watcher保存着依赖的depId
addDep()：给watcher要访问的值所绑定的Dep添加此watcher，同时此watch...
③：对于每一个对应好的指令执行
③：对于每一个对应好的指令执行
④：执行
④：执行
蓝线黑字：_initState()初始化state过程
绿线绿字：compile()编译过程
紫线紫字：message变化导致输入框和p标签的变化
橙线橙字：input组件输入导致message的变化
蓝线黑字：_initState()初始化state过程...
①：更改data的message触发setter
①：更改data的message触发setter
cb：是Directive传递进来的'事先指令'的update方法
cb：是Directive传递进来的'事先指令'的update方法
②：提醒所有依赖该值的watcher
②：提醒所有依赖该值的watcher
el
el
value/text/html/class/property
value/text/html/class/propert...
③：修改el的属性
③：修改el的属性
③：修改state值，比如computed
③：修改state值，比如computed
_observers：所有的observer
_observers：所有的observ...
_watchers：所有的watcher
_watchers：所有的watcher
_directives：所有的directive
_directives：所有的direc...
①：触发bind()函数给el绑定的事件函数
①：触发bind()函数给el绑定的事件函数
setter()：通过全局的Vue+watcher中保存的字段名来设置state中对应的值
setter()：通过全局的Vue+watcher中保存的字段名来设置state中对应的值
②：获取对应的改变的值
②：获取对应的改变的值
③：触发state的setter()
③：触发state的setter()
④：触发setter()
④：触发setter()
⑤：Dep提醒所有依赖该值的watcher
⑤：Dep提醒所有依赖该值的watcher
getter()
getter()
setter()
setter()
执行
执行
执行
执行
Observer并非作为一个模块存在，它负责在_initState()阶段给state代理getter和setter，并保存着唯一的Dep
Observer并非作为一个模块存在，它负责在_initState()阶段给state代理getter和setter，并保存着唯一的Dep
Directive并非作为一个模块存在，它负责在complie()节点，对每一个指令维护一个Directive，
并对依赖于该指令的值（可能为多个）创建一个watcher，并在此刻绑定依赖Dep。
Directive并非作为一个模块存在，它负责在complie()节点，对每一个指令维护一个Directive，...
圆形代表模块，可以对应于每个文件（比如圆形Observer对应于Observer.js文件），
每个圆形的左边或者右边是该模块所拥有的方法和属性。
方形且内容为XXX()的代表方法（比如_initData()），其他形状为属性。
圆形代表模块，可以对应于每个文件（比如圆形Observer对应于Observer.js文件），...
结论：
结论：
名词解析：
名词解析：
事先指令：就是directives文件夹里面的各个文件，比如v-modal，这些就是事先写好的指令
事先指令：就是directives文件夹里面的各个文件，比如v-modal，这些就是事先写好的指令
看前提示：
看前提示：
⑤：设置getter函数
⑤：设置getter函数
⑤：设置setter函数
⑤：设置setter函数
update()：事先指令的update()方法，用来修改dom的值或者state
update()：事先指令的update()方法，用来修改dom的值或者state
流程：
流程：
指令对应的值：比如input标签有个v-model指令，然后指令绑定的值为message
指令对应的值：比如input标签有个v-model指令，然后指令绑定的值为message
全局target：按照该图的流程，state的的每一个值（data或者computed的值），都绑定着唯一一个Dep。
                    全局uid和全局target是一个全局Dep所拥有的，并非是每个唯一的dep所拥有的，
                    全局target是为了watcher在绑定依赖的过程中的标识
全局target：按照该图的流程，state的的每一个值（data或者computed的值），都绑定着唯一一个Dep。                    全局uid和全局target是一个全局Dep所拥有的，并非是每个唯一的dep所拥有的，...
所以对于message，其与el的输入框以及p标签的value，message和value两者的依赖关系是
通过dep以及watcher来实现的
所以对于message，其与el的输入框以及p标签的value，message和value两者的依赖关系是...
使用提示：
使用提示：
这个.drawio文件打开方法：在vscode插件下载Draw.io Integration插件，然后点击vscode打开该文件即可。
这张图展示的是Vue的初始化state、编译compile、以及数据响应的过程。和tiny-vue的代码是对应起来的。
一定要调试着看，调试方法：https://juejin.im/post/6885912975555706888
这个.drawio文件打开方法：在vscode插件下载Draw.io Integration插件，然后点击vscode打开该文件即可。...Viewer does not support full SVG 1.1 \ No newline at end of file diff --git "a/\346\225\260\346\215\256\345\223\215\345\272\224.drawio" "b/\346\225\260\346\215\256\345\223\215\345\272\224.drawio" new file mode 100644 index 0000000..096da9b --- /dev/null +++ "b/\346\225\260\346\215\256\345\223\215\345\272\224.drawio" @@ -0,0 +1,342 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file