资讯专栏INFORMATION COLUMN

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

learn_shifeng / 414人阅读

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

昨天写了一下节点绑定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 评论0 收藏0
  • 从零开始单排学设计模式「UML图」定级赛

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

    Loong_T 评论0 收藏0
  • 最新【从零单排系列流出,教你如何实现字典存储结构

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

    crossea 评论0 收藏0
  • 从零单排学Redis【黄金】

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

    Mr_houzi 评论0 收藏0
  • 从零单排学Redis【黄金】

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

    EastWoodYang 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<