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执行 训练相关作业,包含推理计算.梯度计算(正向/反向 ...
随机推荐
- hdu 4850 字符串构造---欧拉回路构造序列 递归+非递归实现
http://acm.hdu.edu.cn/showproblem.php? pid=4850 题意:构造长度为n的字符序列.使得>=4的子串仅仅出现一次 事实上最长仅仅能构造出来26^4+4- ...
- Skyline V6.6.1安装文件下载及使用
1.下载地址:http://www.skylineglobe.com/skylineglobe/corporate/download/DownloadCenter.aspx 2.安装指南: ...
- LeetCode——Valid Number
Validate if a given string is numeric. Some examples: "0" => true " 0.1 " =&g ...
- 修改android系统开机动画
本文转载自:http://blog.csdn.net/u012301841/article/details/51598115 修改android系统开机动画
- outlook创建收信规则,将收到的所有邮件,转发到qq邮箱,然后删除
因为outlook默认只有400M的空间. 使用企业邮箱的时候,很快就满了. 本来是打算在qq邮箱中,添加其他邮箱来收取的. http://service.mail.qq.com/cgi-bin/he ...
- golang LMDB入门例子——key range查询
如下,使用gomb库 package main import ( "bytes" "fmt" "io/ioutil" "os&qu ...
- 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[ ...
- 多线程编程和Java网络编程
1. 线程概述 多任务处理有两种类型:基于进程.基于线程(进程是指一种“自包容”的运行程序,有自己的地址空间; 线程是进程内部单一的一个顺序控制流) 基于进程的特点是允许计算机同时运行两个或更多的程序 ...
- Python开发利器PyCharm 2.7附注册码
PyCharm 2.7 下载 http://download.jetbrains.com/python/pycharm-2.7.2.exe 激活注册 user name:EMBRACE key: 14 ...
- pair类型 这次遇到了,记录下来,方便彼此xue习
首先,这个pair类型是在头文件utility.h中. 一个piar保存两个数据成员,是用来生成特定类型的模板,当创建一个pair时,我们必须提供两个类型名,pair的数据成员将具有对应的类型,两个类 ...