/nue

vue copycat

Primary LanguageJavaScript

nue

vue copycat

对Vue框架进行了仔细研读,并且开始动手实现了一个简单框架,其中最重要的基础是defineProperty方法,整体来说分为好几步:

  • 数据劫持,拦截整个data对象,递归整个对象把所有值进行拦截
  • 数据代理,data对象挂载到vue对象上,可以直接进行操作
  • 订阅广播,使用了一个简单的数组来记录所有的需要更新的对象,当触发广告的时候,队列中所有的对象都会被调用update方法
  • 编译模板,把template中的{{}}找到并且进行数据替换,初始化模板的时候会给所有的这样的节点添加对应值的watcher,用于更新当前dom,这里涉及AST相关知识点,也需要递归AST树做整体替换,模板中针对input的事件监听和同时增长v-model的wather达到了双向绑定的效果