Vue源码学习(十):关于dep和watcher使用的一些思考

vue,源码,学习,关于,dep,watcher,使用,一些,思考 · 浏览次数 : 12

小编点评

## 理解dep的作用: **dep** 是一个概念,它代表依赖关系。它可以描述多个数据绑定(xxfunction)如何相互依赖才能实现数据-视图同步。 **数据绑定**:它指的是多个数据类型之间互相依赖的连接。例如,**Dep(牛肉汉堡){Watcher(蔬菜)}** 表示,**牛肉汉堡**依赖**蔬菜**才能制作。 **依赖关系管理**:通过使用**dep**,我们可以定义这些依赖关系,并通过 **xxfunction** 来实现它们之间的通信。 **例子**: * **xx汉堡店**:**Dep(牛肉汉堡){Watcher(蔬菜)}** * **xx蔬菜沙拉**:**Dep(蔬菜沙拉){Watcher(蔬菜)}** **总结**: * **dep** 是一个概念,它描述多个数据绑定如何相互依赖才能实现数据-视图同步。 * **xxfunction** 是一个用于定义依赖关系的语法。 * **dep** 可以用来定义数据绑定,并通过 **xxfunction** 来实现它们之间的通信。 * **数据绑定**可以是多个数据类型之间的关系,例如**牛肉汉堡**依赖**蔬菜**才能制作。 * **依赖关系管理**通过使用 **dep**,我们可以定义这些依赖关系,并通过 **xxfunction** 来实现它们之间的通信。

正文

好家伙,

 

前面想了好久,都没想明白为什么要dep和watcher打配合才能实现数据-视图同步

为什么要多一个依赖管理这样的东西

给每个数据绑个watcher(xxfunction),然后,数据变了,调set,然后调xxfunction,不就行了,

然后今天突然想明白了,不是为什么要这么干,而是必须这么干

 

来看一个例子,xx汉堡店,胖虎汉堡店

 

蔬菜沙拉的原料只有蔬菜

牛肉汉堡的原材有蔬菜,面包和汉堡肉

现在,我必须紧盯这些食材,材料如果缺货,那么我就无法制作食物并提供给客人了

现在,一旦缺货,我将会触发某些操作,补货

 

这时候我们可以抽象一下他们的依赖关系

Dep(牛肉汉堡){

   watcher(蔬菜)

   watcher(面包)

   watcher(汉堡肉)

}

Dep(蔬菜沙拉){

  watcher(蔬菜)

}

 

写到这,相信你已经理解dep的作用了

 

我们看到的视图,与我们要操作的数据并不是完全一一对应的,

也许是一对多,也许是多对一,也许是多对多

 

在视图与操作中出现一个中间人,来管理这个依赖关系,就是dep

 

所以总结一下dep的作用是什么?

管理依赖关系

 

 

与Vue源码学习(十):关于dep和watcher使用的一些思考相似的内容:

Vue源码学习(十):关于dep和watcher使用的一些思考

好家伙, 前面想了好久,都没想明白为什么要dep和watcher打配合才能实现数据-视图同步 为什么要多一个依赖管理这样的东西 给每个数据绑个watcher(xxfunction),然后,数据变了,调set,然后调xxfunction,不就行了, 然后今天突然想明白了,不是为什么要这么干,而是必须这

Vue源码学习(十一):计算属性computed初步学习

好家伙, 1.Computed实现原理 if (opts.computed) { initComputed(vm,opts.computed); } function initComputed(vm, computed) { // 存放计算属性的watcher const watchers = vm

Vue源码学习(一):数据劫持(对象类型)

好家伙,了解一下Vue如何实现数据劫持 1.Vue中data的使用 首先,我得搞清楚这玩意的概念,我们先从vue的使用开始吧 想想看,我们平时是如何使用vue的data部分的? 无非是这两种情况 (你可千万不要带着惊讶的表情说"啊!原来有两种写法的吗") //函数写法 data() { return

Vue源码学习(二):渲染第一步,模板解析

好家伙, 1.去哪了 在正式内容之前,我们来思考一个问题, 当我们使用vue开发页面时,中的内容是如何变成我们网页中的内容的? 它会经历四步: 解析模板:Vue会解析中的内容,识别出其中的指令、插值表达式({{}}),以及其他元素和属性。

Vue源码学习(三):渲染第二步,创建ast语法树

好家伙,书接上回 在上一篇Vue源码学习(二):渲染第一步,模板解析中,我们完成了模板解析 现在我们继续,将模板解析的转换为ast语法树 1.前情提要 代码已开源https://github.com/Fattiger4399/analytic-vue.git手动调试一遍, 胜过我

Vue源码学习(四):渲染第三步,将ast语法树转换为渲染函数

好家伙, Vue源码学习(三):渲染第二步,创建ast语法树, 在上一篇,我们已经成功将 我们的模板 转换为ast语法树 接下来我们继续进行操作 1.方法封装 由于代码太多,为了增加代码的可阅读性 我们先将代码进行封装 index.js import { generate } f

Vue源码学习(六):(支线)渲染函数中with(),call()的使用以及一些思考

好家伙, 昨天,在学习vue源码的过程中,看到了这个玩意 嘶,看不太懂,研究一下 1.上下文 这段出现vue模板编译的虚拟node部分 export function renderMixin(Vue) { Vue.prototype._c = function () { //创建标签 return

Vue源码学习(五):渲染第四步,生成虚拟dom并将其转换为真实dom

好家伙, 前情提要: 在上一篇我们已经成功将ast语法树转换为渲染函数 现在我们继续 1.项目目录 代码已开源https://github.com/Fattiger4399/analytic-vue.git手动调试一遍, 胜过我解释给你听一万遍 新增文件:vnode/index.js vnode/p

Vue源码学习(七):合并生命周期(混入Vue.Mixin)

好家伙, 1.使用场景 现在来,来想一下,作为一个使用Vue的开发者,假设现在我们要使用created(),我们会如何使用 1.1. .vue文件中使用 {{ message }}

Vue源码学习(九):响应式前置:实现对象的依赖收集(dep和watcher)

好家伙,这是目前为止最绕的一章,也是十分抽象的一章 由于实在太过抽象,我只能用一个不那么抽象的实例去说服我自己 完整代码已开源https://github.com/Fattiger4399/analytic-vue.git 1.我们要做什么? 来看这个例子, index.html setTimeou