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. hdu 4850 字符串构造---欧拉回路构造序列 递归+非递归实现

    http://acm.hdu.edu.cn/showproblem.php? pid=4850 题意:构造长度为n的字符序列.使得>=4的子串仅仅出现一次 事实上最长仅仅能构造出来26^4+4- ...

  2. Skyline V6.6.1安装文件下载及使用

     1.下载地址:http://www.skylineglobe.com/skylineglobe/corporate/download/DownloadCenter.aspx 2.安装指南:   ...

  3. LeetCode——Valid Number

    Validate if a given string is numeric. Some examples: "0" => true " 0.1 " =&g ...

  4. 修改android系统开机动画

    本文转载自:http://blog.csdn.net/u012301841/article/details/51598115 修改android系统开机动画

  5. outlook创建收信规则,将收到的所有邮件,转发到qq邮箱,然后删除

    因为outlook默认只有400M的空间. 使用企业邮箱的时候,很快就满了. 本来是打算在qq邮箱中,添加其他邮箱来收取的. http://service.mail.qq.com/cgi-bin/he ...

  6. golang LMDB入门例子——key range查询

    如下,使用gomb库 package main import ( "bytes" "fmt" "io/ioutil" "os&qu ...

  7. uoj#149

    dp 没想出来 最先开始想 dp[i][j][k]表示s匹配到i,t匹配到j,当前分了k段的方案数 s[i]==t[j] dp[i][j][k]+=dp[i-1][j-1][k-1] s[i]==t[ ...

  8. 多线程编程和Java网络编程

    1. 线程概述 多任务处理有两种类型:基于进程.基于线程(进程是指一种“自包容”的运行程序,有自己的地址空间; 线程是进程内部单一的一个顺序控制流) 基于进程的特点是允许计算机同时运行两个或更多的程序 ...

  9. Python开发利器PyCharm 2.7附注册码

    PyCharm 2.7 下载 http://download.jetbrains.com/python/pycharm-2.7.2.exe 激活注册 user name:EMBRACE key: 14 ...

  10. pair类型 这次遇到了,记录下来,方便彼此xue习

    首先,这个pair类型是在头文件utility.h中. 一个piar保存两个数据成员,是用来生成特定类型的模板,当创建一个pair时,我们必须提供两个类型名,pair的数据成员将具有对应的类型,两个类 ...