Vue主要原理最简实现与逻辑梳理
Vue的主要原理中主要用到了定义的这么几个函数Dep,Watcher,observer。
我们来使用这几个函数简单的实现一下vue构造函数数据绑定和相互依赖部分,梳理一下它们之间的关系。
省略了编译部分和proxy代理与其他的一些复杂逻辑。
Dep
Dep是依赖类,简要实现为
class Dep {
constructor () {
// 放当时属性的观察者
this.subs = []
}
}
// target 用来挂载当时的watcher观察者
Dep.target = null
observer
做属性劫持,并做点其他事情
function observer (vm, key, val) {
let dep = new Dep()
Object.defineProperty(vm, key, {
/**
* get主要做两个事情
* 1. 收集观察当前key的wathcer(即依赖当前key的操作)
* 2. 获取值
*/
get () {
// 这是作用1
if (Dep.target) {
dep.subs.push(Dep.target)
}
// 这是作用2
return val
},
/**
* set也是两个事情
* 1. 修改目标值
* 2. 执行依赖当前key的watcher
*/
set (newVal) {
// 这是作用1
val = newVal
// 这是作用2
for(cb of dep.subs) {
cb.call(vm)
}
}
})
}
Watcher
Watcher是观察者类,用来创建依赖某属性的操作(如指令,渲染,计算属性等)
class Watcher {
/**
* vm: 实例
* cb: 依赖某属性的操作函数
*/
constructor (vm, cb) {
// 把当前的操作挂载到Dep上
Dep.target = cb
/**
* 执行操作,两个作用
* 1. 进行操作的初始化
* 2. 触发属性的get方法,使当前cb被收集
*/
cb.call(vm)
Dep.target = null
}
}
demo
那么我们就使用上面定义好的函数写个例子
```<div>
<p class="text"></p>
<div>
```
let vm = new Vue({
// 假设有data
data: {msg: 1},
// 有某个v-text操作,我们抽象为vText函数,依赖属性msg(代表所有依赖其他属性的操作)
renderFun: {
vText () {
document.querySelector('.text').innerText = this.msg
}
}
})
// 修改vue实例的值,观察变化
vm.msg = 333
那么我们也写一个vue的简易构造函数
class Vue {
constructor (options) {
let data = options.data
let renderFun = options.renderFun
// initData
Object.keys(data).forEach(key => {
observer(this, key, data[key])
})
// 模拟计算属性,watcher,指令等依赖属性的操作
Object.keys(renderFun).forEach(key => {
new Watcher(this, renderFun[key])
})
}
}
执行过程
完整的代码可以看demo部分的两个链接
- 创建vue实例,执行
new Vue()
对data进行初始化,对
data
中属性进行属性劫持- 劫持过程中,在闭包内创建对当前属性的依赖队列(dep.subs)和值(val)。
get
进行观察者watcher
的收集和值得获取;set
进行值的更新和依赖队列中watcher
的执行
- 劫持过程中,在闭包内创建对当前属性的依赖队列(dep.subs)和值(val)。
- 对编译过程中如
computed\watcher
或模板编译
过程中的指令
函数进行初始化,我们以renderFun
代替 - 针对
renderFun
中的每个功能函数进行new Watcher()
工作 以
vText
为例子,在new Wathcer()
过程中- 将
vText
挂载到全局通用的Dep.target
上 - 执行
vText
,其中有读vm.msg
的操作,则触发msg属性的get,进入Dep.target
判断,将Dep.target
即vText
收集进msg
的subs
依赖队列中,此时vText
执行完毕,页面innetText
被修改 - 将
Dep.target
置空
- 将
执行
vm.msg = 333
,则触发msg
的set
set
先修改msg
的值- 再执行
msg
依赖队列中的所有watcher
的函数,即vText
,页面的innerText
被同步更新
总结
总之几者的关系就是在observer
的get
中将对当前属性的watcher
收集进dep
,在observer
的set
中执行收集到的watcher
。
而vue的真正的执行过程绝不是上面写的这么简单,比如watcher的执行就绝不是简单的遍历执行,而且还对observer进行了很大程度的简化。我们还省略了诸如_proxy
、defineReactive
等出现频率较高的函数。写这样一个最简实现主要是为了梳理一下主干,降低阅读源码的难度。
??????????????????????????????????
原文地址:https://segmentfault.com/a/1190000014195710
Vue主要原理最简实现与逻辑梳理的更多相关文章
- Vue源码中compiler部分逻辑梳理(内有彩蛋)
目录 一. 简述 二. 编译流程 三. 彩蛋环节 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文目录 ...
- 【转】Vue.js 2.0 快速上手精华梳理
Vue.js 2.0 快速上手精华梳理 Sandy 发掘代码技巧:公众号:daimajiqiao 自从Vue2.0发布后,Vue就成了前端领域的热门话题,github也突破了三万的star,那么对于新 ...
- (实现)vue.js最简实现
Vue.winward.js vue.js最简实现(the most simple vue.js) 让所有人都看得懂Vue原理 建议看完Vue.winward.js后,结合mpvue源码解读单页应用路 ...
- PPT技术干货1(下)——数据图表分析、逻辑梳理、高效办公
数据分析 让数据指导决策,帮你获得业绩增长 数据展示是PPT必备的基础技能, 有些人是简单粗暴的将数据直接堆在页面上: 这样的汇报缺乏重点,不具有针对性. 图表该如何设计呢? 1.数据可视化,内容交互 ...
- Vue2源码分析-逻辑梳理
很久之前就看完vue1,但是太懒就一直没写博客,这次打算抽下懒筋先把自己看过了记录下来,否则等全部看完,估计又没下文了 看源码总需要抱着一个目的,否则就很难坚持下去,我并没做过vue的项目,我几乎很少 ...
- Vue源码翻译之渲染逻辑链
本篇文章主要要记录说明的是,Vue在Vdom的创建上的相关细节.这也是描绘了Vue在界面的创建上的一个逻辑顺序,同时我也非常拜服作者编码的逻辑性,当然或许这么庞大复杂的编码不是一次性铸就的,我想应该也 ...
- DRF 商城项目 - 购物( 购物车, 订单, 支付 )逻辑梳理
购物车 购物车模型 购物车中的数据不应该重复. 即对相同商品的增加应该是对购买数量的处理而不是增加一条记录 因此对此进行联合唯一索引, 但是也因此存在一些问题 class ShoppingCart(m ...
- DRF 商城项目 - 用户( 登录, 注册,登出,个人中心 ) 逻辑梳理
用户登录 自定义用户登录字段处理 用户的登录时通过 手机号也可以进行登录 需要重写登录验证逻辑 from django.contrib.auth.backends import ModelBacken ...
- 『TensorFlow』分布式训练_其一_逻辑梳理
1,PS-worker架构 将模型维护和训练计算解耦合,将模型训练分为两个作业(job): 模型相关作业,模型参数存储.分发.汇总.更新,有由PS执行 训练相关作业,包含推理计算.梯度计算(正向/反向 ...
随机推荐
- 线段树 hdu3255 Farming
做了这么多扫描线的题,,基本都是一个思路. 改来改去,,无非就是维护的节点的内容以及push_up越写越复杂了而已 首先将价格排序处理一下编号,变成编号越大的powerfol越大 然后后面加入扫描线的 ...
- oc29--property修饰符
// // Person.h #import <Foundation/Foundation.h> @interface Person : NSObject /* 如果给一个属性同时提供了g ...
- hdoj-看病要排队
看病要排队 Problem Description 看病要排队这个是地球人都知道的常识. 不过经过细心的0068的观察,他发现了医院里排队还是有讲究的.0068所去的医院有三个医生(汗,这么少)同时看 ...
- C++ 中的友元(friend)
首先友元不是一个好的设计,它破坏了封装.并且自身有很多局限:比如友元关系不能被继承:友元关系是单向的,不具有交换性:友元关系不具有传递性. 类内声明的 friend 变量(或者函数)在访问该类的成员时 ...
- C Tricks(十六)—— 复制字符串
while (*s++ = *t++); // target ⇒ source // 对于 C 语言而言,赋值运算符返回左值
- [POJ 3565] Ant
[题目链接] http://poj.org/problem?id=3565 [算法] KM算法求最小匹配 [代码] #include <algorithm> #include <bi ...
- 洛谷P2593 [ ZJOI 2006 ] 超级麻将 —— DP
题目:https://www.luogu.org/problemnew/show/P2593 DP的话,考虑到当前这一位只跟前两位有关,所以记录一下这3位的状态就行: 于是一开始记录的第 i 位,i- ...
- ubuntu 12.10 禁用触摸板
1. 打开终端,输入 sudo rmmod psmouse 禁用触摸板,输入 sudo modprobe psmouse 恢复触摸板 2.syndaemon -i 10 -d >/dev/nul ...
- iOS手势识别
一.手势识别与触摸事件 1.如果想监听一个view上面的触摸事件,可选的做法是: (1)自定义一个view (2)实现view的touches方法,在方法内部实现具体处理代码 2.通过touches方 ...
- unity3d引擎中slua的使用
SLua是开源软件,没有反射,没有额外GC,采用静态代码生成,可以用于游戏核心逻辑,完整支持4.6+ UI系统. 1.下载安装 http://www.slua.net/ https://github. ...