vue观察模式浅析
以下是我对vue观察者模式的理解:
github L6zt
加入tip 2018-10-14 最近又看到《js设计模式设计》书 推荐去搂搂
不要对框架的偏见, 你真的了解jquery、angular、react 等等,框架是什么只是工具而已。
你用过jquery的 trigger、on、off 事件绑定的方法吗?事实上 vue 不过也是这种模式,只不过vue 是自动调用on方法,自动触发trigger。甚至可以不用jquery对事件监听触发的实现。其实最终解释就是对某种事件的callback(基础原理)。
以下是源码目录截图:
![](https://img2018.cnblogs.com/blog/1504647/201812/1504647-20181218135509897-1511818125.png)
1... vue 实例初始化时,会对data函数返回的对象里的属性调用以下方法,代码注释如下:
// 这个是 vue 绑定自动绑定事件的方法和触发事件方法, 会把data函数返回的对象变量属性,重写对应属性的 赋值 和获取的操作。具体查看 (mdn Object.defineProperty api)
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter () {
const value = getter ? getter.call(obj) : val
// watcher 对象, 如果存在
if (Dep.target) {
// 把Watcher 实例 推入 Dep 实例的 subs 数组里, 这个就相当于 on
dep.depend()
if (childOb) {
childOb.dep.depend()
if (Array.isArray(value)) {
dependArray(value)
}
}
}
return value
},
set: function reactiveSetter (newVal) {
const value = getter ? getter.call(obj) : val
/* eslint-disable no-self-compare */
if (newVal === value || (newVal !== newVal && value !== value)) {
return
}
/* eslint-enable no-self-compare */
if (process.env.NODE_ENV !== 'production' && customSetter) {
customSetter()
}
if (setter) {
setter.call(obj, newVal)
} else {
val = newVal
}
childOb = !shallow && observe(newVal)
// 通知 Dep 实例 中subs 里数组 中所有 Watcher 实例, 然后调用Watcher实例里的 update方法(), 这个就相当于 trigger。
dep.notify()
}
})
// Watcher 构造函数
constructor (
vm: Component,
expOrFn: string | Function,
cb: Function,
options?: ?Object,
isRenderWatcher?: boolean
)
2...Watcher初始化时,会调用Dep.pushTarget方法, 把 Wathcer实例赋值到dep.js 里的Dep.target, 接着会根据 exporFn,运行exporFn 所代表的方法。这个方法里基本上包含调用 1...里的getter方法(想想render钩子里的操作基本有获取vue实例属性data里的值或者获取vue实例的计算属性的值)。
var vm = new Vue({
data () {
return {msg: '找个小姐姐!'}
},
// 相当于 exporFn
render(h) {
return h('h3', {},
// 这里面就会调用 msg 对应的 getter方法
this.msg
)
}
})
所以就会使 render 函数 与 Vue 实例 的 数据 data属性 和观察属性等产生联系,这就形成一个闭环。当其中的属性变化,就会自动调用 setter 方法,从而触发dep.notify 方法,进而又会触发 dep.subs 里的 Watcher 实例调用 update方法,进而更新。
(这部分代码不知如何说,故此没写, 具体查看源码)
来源:https://segmentfault.com/a/1190000016495810
最新文章
- 技术笔记:Delphi多线程应用读写锁
- ajax 跨域请求
- elasticsearch-PHP第一天
- c语言 四种方法调用数组
- javaio-printwriter
- ABBYY如何把PDF转换Excel
- 离线安装PM2
- 1分钟内检查Linux服务器性能的10条命令
- 题解西电OJ (Problem 1008 - 数星星)
- Strut2 和Spring MVC 文件上传对比
- Beauty of Array(模拟)
- JQ工具函数运用
- mov sreg, r/m16 在16位和32位编程中的区别
- wpa破解学习实践
- zookeeper 实现分布式锁zookeeper 使用 Curator 示例监听、分布式锁
- java 堆 栈 常量池
- BZOJ_1828_[Usaco2010 Mar]balloc 农场分配_线段树
- extract()函数,将selector对象中data的值取出来;extract_first()函数,将列表中第0个selector对象拿出来,然后取data的值。
- nodejs写入json文件,格式化输出json的方法
- js中this的总结
热门文章
- vue请求数据
- 049:ORM常用Field详解(1)
- Vuex-全局状态管理【传递参数】
- C文件 CMakeList.txt编译器配置错误的问题 error:invalid conversion from 'int' to 'LAYER_TYPE' [-fpermissive]....
- mysql 数据库必会题
- 简单说说JavaBean的使用
- mybatis中延迟加载Lazy策略
- ASCII 、UTF-8、Unicode编码
- codeforces 819B - Mister B and PR Shifts(思维)
- vue路由实例