从零单排系列之写一个类vue框架(二)

learn_shifeng 发布于2019-08-23 18:27 / 562人阅读

摘要：昨天写了一下节点绑定的替换，已经如何检测的方法今天优化一下，勉强实现一个双向绑定看下昨天的代码这里是在实现双向绑定之前，先普及一个和的知识。如果强行给之前的赋值，就会发生无限的情况。毕竟还在正式学习期。

昨天写了一下节点绑定model的替换，已经如何检测model 的方法
今天优化一下，勉强实现一个双向绑定
看下昨天的代码



    这里是{{title}}

在实现双向绑定之前，先普及一个set 和 get 的知识。我说点大白话，反正也不是专业的。
一个对象的key在被赋值 value 的时候，被拦截，触发set方法，set的参数就是那个 value
但是这个赋值就会被拦截了，所以需要给一个新的key一个值。然后把value赋值到新的值上面去。如果强行给之前的key赋值，就会发生无限set 的情况。

稍微加工了一下



    这里是{{title}}

代码有些粗劣，但是功能是实现了。
1.首先先读取 new Vue传入对象时候，data 里面的数据，然后对其进行遍历，给实例化对象添加同名属性，这个同名属性主要就是用来被监听set,get（双向绑定实现的基本原理）。也就是 vue.prototype.getData

2.然后呢，去递归dom树（这个以后再写，先简单就一层，不然写的内容会增多很多），然后用正则过滤出里面 {{}}类型的节点，将这个节点的原始内容（比如{{title}}保存到这个节点的一个自定义属性里，我写的是realData），并将这个节点添加到watcher里面去。也就是vue.prototype.watcher

3.然后呢，在同名属性被设置的时候呢，就触发钩子函数，将这个同名属性所涉及到的节点的data给更新。也就是vue.prototype.digest

如果上面的内容没有看的太明白的话，可以参考一下代码注释。。。我下线看看怎么优化代码或者优化思路，晚上或者明天更新。我还得看看vue的文档。毕竟还在正式学习期。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105243.html

从零单排系列之写一个类vue框架(一)

摘要：因为我希望这是一个系列的文章，所以开始之前先简单说一下，我几乎没用过这个框架写过项目，所以文章中难免会有一些比较外行的说法。先整理用法，然后再整理自己的框架。因为我希望这是一个系列的文章，所以开始之前先简单说一下，我几乎没用过vue这个框架写过项目，所以文章中难免会有一些比较外行的说法。当然，我用过一些时间的angular，也曾经解决过一些同行们vue方面的问题。所以如果有人原因看的...

raise_yang 2019-08-23 18:26 评论0 收藏0
从零开始单排学设计模式「UML类图」定级赛

摘要：从零开始单排学设计模式的国服排位之旅，今天正式开启目前段位定级赛这篇文章来总结下类图，本来不打算讲类图的，因为我在学习设计模式的时候，一遇到有关的就会自动忽略，一看感觉就很复杂。关联关系用实现箭头来表示。阅读本文大概需要 3.5 分钟。本篇是设计模式系列的开篇，虽然之前也写过相应的文章，但是因为种种原因后来断掉了，而且发现之前写的内容也很渣，不够系统。所以现在打算重写，加上距离现...

Loong_T 2019-08-16 15:04 评论0 收藏0
最新【从零单排】系列流出，教你如何实现字典存储结构

摘要：昨天在星球的从零单排系列分享了一篇字典存储结构的实现方式，我觉得这篇文章写的还是蛮好的，就分享给大家了。这周活动力度优惠开到最大了，现在只要元，邀请朋友还能返现元。 showImg(https://segmentfault.com/img/remote/1460000018992017); 昨天在星球的【从零单排】系列分享了一篇【字典存储结构的实现方式】，我觉得这篇文章写的还是蛮好的，...

crossea 2019-07-31 10:21 评论0 收藏0
从零单排学Redis【黄金】

摘要：当被监听的准备好执行连接应答读取等等操作时，与操作相对应的文件事件就会产生，根据文件事件来为关联对应的事件处理器，从而实现功能。服务器使用单线程单进程的方式处理命令请求。前言只有光头才能变强好的，今天我们要上黄金段位了，如果还没经历过青铜和白银阶段的，可以先去蹭蹭经验再回来：从零单排学Redis【青铜】从零单排学Redis【白银】看过相关Redis基础的同学可以知道Re...

Mr_houzi 2019-08-16 13:39 评论0 收藏0