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

Vue原理解析

迦娜王
3年前Vue
955 0 0

用vue也有很长一段时间,用它做过移动端项目 pc项目 SaaS平台等等,总体来说vue 还是相对于简单的、建立于良好的文档和开箱即用的脚手架, vue在前端框架的热度一直很高, 最近正好在研究vue的源码 毕竟学习之路基本都是学轮子 -> 看源码 -> 造轮子 逐步精进来的, 网上有非常多的vue的原理解析的文章,可能我写的不算太好 不过还是写下来作为一个积累和总结

大概思路

vue的数据驱动主要实现建立在三个对象上Dep、Watcher、Compiler,

Dep 主要负责依赖的收集

Watcher 主要负责Dep和Compiler之间的联系

Compiler 可以理解为 virtual dom patch 也就是负责视图层的渲染

可以用个简单的思维导图来说明下大概原理

Vue原理解析

image.png

1. getter、setter

首先我们可以看到通过Object.defineProperty为vm实例定义了一个getter、setter. 我们可以将两个分开来讲:

Vue原理解析

getter

getter: 主要是获取到对应的键值, 这里有一个步骤是先将原来的getter和setter提取出来,这一步主要是为了防止预定义的getter和setter,保证预定义getter、setter一样能够生效, 注意到有一步是判断Dep.target, 有的话就收集依赖了。还有一些对于数组的处理, 这里就不细述了。

Vue原理解析

setter

setter: 在setter函数中,主要是对相同的值的拦截,然后对于嵌套对象的重新observe,这里之所以会重新observe 是因为vue在每次响应了数据变化后,会清除掉所有的依赖,因此要重新建立, 至于为什么会重新建立 我们会在下面大概说下, 当值发生变化时,最后会触发dep.notify(), 来触发依赖的升级.

2. 依赖的建立

在代码中我们可以看到依赖的建立是通过dep.depend()来完成的, 那这个过程是在什么时候完成的呢

Vue原理解析

mountComponet.png

其实我们可以看到在 mountComponent中会new 一个 watcher实例,还有就是有一个叫做updateComponent的函数产生,这一个函数的主要作用就是视图层渲染更新, new Watcher参数中的before会触发生命周期beforeUpdate的钩子, 好了 接下来我们来看下new Watcher的时候都发生了些什么?

Vue原理解析

watcher 构造器函数

我们能看到watcher在实例化的过程中会有大量属性,然后会根据是否是计算属性来进行判断, 我们这里先不去管计算属性, 直接就从最简单的data进行入手, 会触发watcher.get()

Vue原理解析

watcher.get

这里的getter 其实就是updateComponent 函数, 在updateComponent函数中会通过virtual dom 和 patch函数来进行视图层的更新和渲染。在分析template建立虚拟dom的过程中需要去获取vm的属性, 因此会触发vm.getter函数pushTarget() // 将当前的watcher 实例 设置为 Dep.target

然后会触发dep.depend()

Vue原理解析

dep.depend

这时候我们能看到Dep.target 其实就是当前的watcher实例.

Vue原理解析

watcher.addDep

这边有一个判断是防止重复依赖产生,最后就是dep.addSub()

Vue原理解析

dep.addSub

最后通过subs来存储watcher

3.属性变化后 依赖通知watcher进行update

还记得上面提到的setter吗?(不清楚的话,可以拉上去看下) setter会在属性值发生变化时,触发dep.notify()

Vue原理解析

dep.notify

subs里面的都是收集到的watcher实例

Vue原理解析

watcher.update

这里我们看到会有一个queueWatcher的函数, 这个其实是将当前watcher 弄到一个tick中去,这块涉及到js eventLoop

机制这一块. 我们放到后续的文章去讲,到最后的话, 其实是会触发到watcher.run()

Vue原理解析

watcher.run & watcher.getAndInvoke

我们看到这个里面会有触发watcher.get(), 翻到上面的截图, 我们会发现get 会触发updateComponent 这时候就完成了整个视图层的更新。一些问题

  • 为什么vue在每次都要清除一下已有的一些依赖
  • 其实这个问题我刚开始也很疑惑,既然依赖已经建立,那为什么还要清理掉又重新建立呢,所以我打开了google,找到了这样一个解释
Vue原理解析

  • image.png
  • 目前的话,其实还不太理解, 下次我会找个机会做个demo 尝试下
  • vue是如何基于event loop实现的nextTick?
  • 这一块的话还是比较生疏,源码我会继续往下面看,到时候会写一篇关于js event loop的博文以及nextTick的实现来作为学习总结.

结语

其实我觉得vue的原理基本上就相当于代理者模式 订阅发布模式来实现的, 说实话第一次看这种源码还挺懵逼的,不过我觉得看源码就要直奔主题,先把主枝干理清除,了解自己想要得到什么,整个过程就会清晰明了, 主要放一个自己的ts版的简单实现,写的很简陋,但是能够大概看出vue的原理,有兴趣的可以看下 ts版vue简易原理

参考

  • vue core
  • Vue.js 技术揭秘 // 这个是我在看源码后有一些不理解的问题google时候搜到的,写的非常好,不想直接看源码的可以直接看这个
0
vue3框架设计精髓之Github很火的项目vue-design,学vue必须关注
上一篇
非常优秀vue开源框架Vuetify最新版本1.5.14
下一篇
评论 (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 开源项目 抓包工具 日志输出 机器学习 深度学习 神经网络 论文 面试题
相关文章
在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 喜欢
  • 0
  • 0
  • Top