松鼠乐园 松鼠乐园
  • 注册
  • 登录
  • 首页
  • 快捷入口
    • Vue
    • Tensorflow
    • Springboot
    • 语言类
      • CSS
      • ES5
      • ES6
      • Go
      • Java
      • Javascript
    • 工具类
      • Git
      • 工具推荐
    • 服务器&运维
      • Centos
      • Docker
      • Linux
      • Mac
      • MySQL
      • Nginx
      • Redis
      • Windows
    • 资源类
      • 论文
      • 书籍推荐
      • 后端资源
      • 前端资源
      • html网页模板
      • 代码
    • 性能优化
    • 测试
  • 重大新闻
  • 人工智能
  • 开源项目
  • Vue2.0从零开始
  • 广场
首页 › Vue › 【7】实现迷你版vuejs:展望和结束语

【7】实现迷你版vuejs:展望和结束语

迦娜王
2年前Vue
428 0 1
看代码就像看电影一样,不懂的时候觉得到处都是迷,觉得主角周围发生的事都好不可思议,看懂了之后就能发现一根清晰的主线剧情,或是亲情,或是爱情,或是复仇,或是为名为財。所有之前那些迷都豁然开朗。 vuejs源码看下来也是,从3年前接触到vuejs开始,一直断断续续看了一些关于实现原理的文章,初看一堆概念:parser,compiler, observer, watcher 等等。每一部分都有复杂的细节实现。但是只要把握他的主线剧情:即如何把 state 和 dom 关联起来,使data的改动反应到DOM上,DOM的改动反应到 state 上。顺着这个思路比较容易看懂甚至自己实现一个类似的框架。 那么为什么vuejs几千行的代码量 我们只需要约 500 行代码就能实现呢?其实是因为我们省略了绝大部分的细节,这些细节很重要: 1. 完善的生命周期,回调,完善的销毁机制 2. 对表达式的支持,其中包括对四则运算,路径,以及函数调用的支持,这一块没细看,但是应该都是基于有限状态机实现的。 3. 对DOM的各种边界情况的处理,比如 fragment 4. 性能优化,batcher。 5. 对props,slot 等的处理 6. 常用的 directive 的实现 把上述这些全部实现,那么我们就能得到一个和vuejs几乎一样的框架出来,要不要试试?

记住这几点

希望读过这几篇文章后,能记住以下几点
  1. 如果通过 getter/setter 实现数据响应化
  2. 在getter中记录依赖关系,而不是分析表达式
  3. batcher 会在 nextTick的时候执行全部的更新,默认情况下vue是不会立刻更新DOM的
  4. 记住下面这张出现了很多次的图
这里写图片描述
最后,最最重要的,这么好的项目不给个star嘛 https://github.com/lihongxun945/tiny-vue
vue
1
【6】实现迷你版vuejs:实现常用指令
上一篇
抖音无水印解析
下一篇
评论 (0)

请登录以参与评论。

现在登录
聚合文章
Servicios profesionales Organizaciones
1年前
在Gitee收获近 5k Star,更新后的Vue版RuoYi有哪些新变化?
1年前
vue3.x reactive、effect、computed、watch依赖关系及实现原理
1年前
Vue 3 新特性:在 Composition API 中使用 CSS Modules
1年前
标签
AI AI项目 css docker Drone Elaticsearch es5 es6 Geometry Go gru java Javascript jenkins lstm mysql mysql优化 mysql地理位置索引 mysql索引 mysql规范 mysql设计 mysql配置文件 mysql面试题 mysql高可用 nginx Redis redis性能 rnn SpringBoot Tensorflow tensorflow2.0 UI设计 vue vue3.0 vue原理 whistle ZooKeeper 开源项目 抓包工具 日志输出 机器学习 深度学习 神经网络 论文 面试题
1
相关文章
在Gitee收获近 5k Star,更新后的Vue版RuoYi有哪些新变化?
vue3.x reactive、effect、computed、watch依赖关系及实现原理
Vue 3 新特性:在 Composition API 中使用 CSS Modules
新手必看的前端项目去中心化和模块化思想
松鼠乐园

资源整合,创造价值

小伙伴
墨魇博客 无同创意
目录
重大新闻 Centos CSS Docker ES5 ES6 Go Java Javascript Linux Mac MySQL Nginx Redis Springboot Tensorflow Vue Vue2.x从零开始 Windows 书籍推荐 人工智能 前端资源 后端资源 壁纸 开源项目 测试 论文
Copyright © 2018-2022 松鼠乐园. Designed by nicetheme. 浙ICP备15039601号-4
  • 重大新闻
  • Centos
  • CSS
  • Docker
  • ES5
  • ES6
  • Go
  • Java
  • Javascript
  • Linux
  • Mac
  • MySQL
  • Nginx
  • Redis
  • Springboot
  • Tensorflow
  • Vue
  • Vue2.x从零开始
  • Windows
  • 书籍推荐
  • 人工智能
  • 前端资源
  • 后端资源
  • 壁纸
  • 开源项目
  • 测试
  • 论文
热门搜索
  • jetson nano
  • vue
  • java
  • mysql
  • 人工智能
  • 人脸识别
迦娜王
坚持才有希望
1224 文章
35 评论
242 喜欢
  • 1
  • 0
  • Top