Giter VIP home page Giter VIP logo

mini-vue's Introduction

vue

看完源码还是自己手撸一个简单的加深功力

截图

已完成

  • 勾选 初始化
  • 数据劫持
  • watcher observe dep等
  • ast
  • render函数
  • vdom
  • patch 第一版本完成

待完成(第二版本)

  • 代码优化,,现在代码结构有点乱
  • 支持组件

写完第一版感想:

其实写之前就知道最难的部分不是patch,不是数据劫持,而是字符串转token,再转ast,转render函数从而算出vdom。

  1. 转token,真是考验正则功力!特别是对各种情况属性的匹配,对< 开头的各种处理等!
  2. 转ast,稍微简单了点,只不过是吧杂乱的token整理规范化,注意的是以后我们本来整个render函数是当字符串运行,所以非表达式得 JSON.stringify下
  3. 转render最头疼的就是调试问题,我们拼成render函数,在new Function运行,总会报错,各种缺少括号,乱七八糟
  4. 转成功render生产vdom和patch就很简单了

所以说,到底基础得好到程度才能想出这么一套mvvm框架来,到底数据结构多牢固才能想出o(n)的diff算法来。我等菜鸡只能慢慢前进啊

mini-vue's People

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.