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 =&gt; {
observer(this, key, data[key])
})
// 模拟计算属性,watcher,指令等依赖属性的操作
Object.keys(renderFun).forEach(key =&gt; {
new Watcher(this, renderFun[key])
})
}
}

执行过程

完整的代码可以看demo部分的两个链接

  1. 创建vue实例,执行new Vue()
  2. 对data进行初始化,对data中属性进行属性劫持

    • 劫持过程中,在闭包内创建对当前属性的依赖队列(dep.subs)和值(val)。get进行观察者watcher的收集和值得获取;set进行值的更新和依赖队列中watcher的执行
  3. 对编译过程中如computed\watcher模板编译过程中的指令函数进行初始化,我们以renderFun代替
  4. 针对renderFun中的每个功能函数进行new Watcher()工作
  5. vText为例子,在new Wathcer()过程中

    1. vText挂载到全局通用的Dep.target
    2. 执行vText,其中有读vm.msg的操作,则触发msg属性的get,进入Dep.target判断,将Dep.targetvText收集进msgsubs依赖队列中,此时vText执行完毕,页面innetText被修改
    3. Dep.target置空
  6. 执行vm.msg = 333,则触发msgset

    1. set先修改msg的值
    2. 再执行msg依赖队列中的所有watcher的函数,即vText,页面的innerText被同步更新

总结

总之几者的关系就是在observerget中将对当前属性的watcher收集进dep,在observerset中执行收集到的watcher

而vue的真正的执行过程绝不是上面写的这么简单,比如watcher的执行就绝不是简单的遍历执行,而且还对observer进行了很大程度的简化。我们还省略了诸如_proxydefineReactive等出现频率较高的函数。写这样一个最简实现主要是为了梳理一下主干,降低阅读源码的难度。

??????????????????????????????????

原文地址:https://segmentfault.com/a/1190000014195710

Vue主要原理最简实现与逻辑梳理的更多相关文章

  1. Vue源码中compiler部分逻辑梳理(内有彩蛋)

    目录 一. 简述 二. 编译流程 三. 彩蛋环节 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文目录 ...

  2. 【转】Vue.js 2.0 快速上手精华梳理

    Vue.js 2.0 快速上手精华梳理 Sandy 发掘代码技巧:公众号:daimajiqiao 自从Vue2.0发布后,Vue就成了前端领域的热门话题,github也突破了三万的star,那么对于新 ...

  3. (实现)vue.js最简实现

    Vue.winward.js vue.js最简实现(the most simple vue.js) 让所有人都看得懂Vue原理 建议看完Vue.winward.js后,结合mpvue源码解读单页应用路 ...

  4. PPT技术干货1(下)——数据图表分析、逻辑梳理、高效办公

    数据分析 让数据指导决策,帮你获得业绩增长 数据展示是PPT必备的基础技能, 有些人是简单粗暴的将数据直接堆在页面上: 这样的汇报缺乏重点,不具有针对性. 图表该如何设计呢? 1.数据可视化,内容交互 ...

  5. Vue2源码分析-逻辑梳理

    很久之前就看完vue1,但是太懒就一直没写博客,这次打算抽下懒筋先把自己看过了记录下来,否则等全部看完,估计又没下文了 看源码总需要抱着一个目的,否则就很难坚持下去,我并没做过vue的项目,我几乎很少 ...

  6. Vue源码翻译之渲染逻辑链

    本篇文章主要要记录说明的是,Vue在Vdom的创建上的相关细节.这也是描绘了Vue在界面的创建上的一个逻辑顺序,同时我也非常拜服作者编码的逻辑性,当然或许这么庞大复杂的编码不是一次性铸就的,我想应该也 ...

  7. DRF 商城项目 - 购物( 购物车, 订单, 支付 )逻辑梳理

    购物车 购物车模型 购物车中的数据不应该重复. 即对相同商品的增加应该是对购买数量的处理而不是增加一条记录 因此对此进行联合唯一索引, 但是也因此存在一些问题 class ShoppingCart(m ...

  8. DRF 商城项目 - 用户( 登录, 注册,登出,个人中心 ) 逻辑梳理

    用户登录 自定义用户登录字段处理 用户的登录时通过 手机号也可以进行登录 需要重写登录验证逻辑 from django.contrib.auth.backends import ModelBacken ...

  9. 『TensorFlow』分布式训练_其一_逻辑梳理

    1,PS-worker架构 将模型维护和训练计算解耦合,将模型训练分为两个作业(job): 模型相关作业,模型参数存储.分发.汇总.更新,有由PS执行 训练相关作业,包含推理计算.梯度计算(正向/反向 ...

随机推荐

  1. 线段树 hdu3255 Farming

    做了这么多扫描线的题,,基本都是一个思路. 改来改去,,无非就是维护的节点的内容以及push_up越写越复杂了而已 首先将价格排序处理一下编号,变成编号越大的powerfol越大 然后后面加入扫描线的 ...

  2. oc29--property修饰符

    // // Person.h #import <Foundation/Foundation.h> @interface Person : NSObject /* 如果给一个属性同时提供了g ...

  3. hdoj-看病要排队

    看病要排队 Problem Description 看病要排队这个是地球人都知道的常识. 不过经过细心的0068的观察,他发现了医院里排队还是有讲究的.0068所去的医院有三个医生(汗,这么少)同时看 ...

  4. C++ 中的友元(friend)

    首先友元不是一个好的设计,它破坏了封装.并且自身有很多局限:比如友元关系不能被继承:友元关系是单向的,不具有交换性:友元关系不具有传递性. 类内声明的 friend 变量(或者函数)在访问该类的成员时 ...

  5. C Tricks(十六)—— 复制字符串

    while (*s++ = *t++); // target ⇒ source // 对于 C 语言而言,赋值运算符返回左值

  6. [POJ 3565] Ant

    [题目链接] http://poj.org/problem?id=3565 [算法] KM算法求最小匹配 [代码] #include <algorithm> #include <bi ...

  7. 洛谷P2593 [ ZJOI 2006 ] 超级麻将 —— DP

    题目:https://www.luogu.org/problemnew/show/P2593 DP的话,考虑到当前这一位只跟前两位有关,所以记录一下这3位的状态就行: 于是一开始记录的第 i 位,i- ...

  8. ubuntu 12.10 禁用触摸板

    1. 打开终端,输入 sudo rmmod psmouse 禁用触摸板,输入 sudo modprobe psmouse 恢复触摸板 2.syndaemon -i 10 -d >/dev/nul ...

  9. iOS手势识别

    一.手势识别与触摸事件 1.如果想监听一个view上面的触摸事件,可选的做法是: (1)自定义一个view (2)实现view的touches方法,在方法内部实现具体处理代码 2.通过touches方 ...

  10. unity3d引擎中slua的使用

    SLua是开源软件,没有反射,没有额外GC,采用静态代码生成,可以用于游戏核心逻辑,完整支持4.6+ UI系统. 1.下载安装 http://www.slua.net/ https://github. ...