好家伙,

 

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

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

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

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

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

 

蔬菜沙拉的原料只有蔬菜

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

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

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

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

Dep(牛肉汉堡){

   watcher(蔬菜)

   watcher(面包)

   watcher(汉堡肉)

}

Dep(蔬菜沙拉){

  watcher(蔬菜)

}

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

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

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

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

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

管理依赖关系

 

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

  1. 【Vue源码学习】依赖收集

    前面我们学习了vue的响应式原理,我们知道了vue2底层是通过Object.defineProperty来实现数据响应式的,但是单有这个还不够,我们在data中定义的数据可能没有用于模版渲染,修改这些 ...

  2. Vue源码学习1——Vue构造函数

    Vue源码学习1--Vue构造函数 这是我第一次正式阅读大型框架源码,刚开始的时候完全不知道该如何入手.Vue源码clone下来之后这么多文件夹,Vue的这么多方法和概念都在哪,完全没有头绪.现在也只 ...

  3. Vue源码学习三 ———— Vue构造函数包装

    Vue源码学习二 是对Vue的原型对象的包装,最后从Vue的出生文件导出了 Vue这个构造函数 来到 src/core/index.js 代码是: import Vue from './instanc ...

  4. Vue源码学习二 ———— Vue原型对象包装

    Vue原型对象的包装 在Vue官网直接通过 script 标签导入的 Vue包是 umd模块的形式.在使用前都通过 new Vue({}).记录一下 Vue构造函数的包装. 在 src/core/in ...

  5. 最新 Vue 源码学习笔记

    最新 Vue 源码学习笔记 v2.x.x & v3.x.x 框架架构 核心算法 设计模式 编码风格 项目结构 为什么出现 解决了什么问题 有哪些应用场景 v2.x.x & v3.x.x ...

  6. 【Vue源码学习】响应式原理探秘

    最近准备开启Vue的源码学习,并且每一个Vue的重要知识点都会记录下来.我们知道Vue的核心理念是数据驱动视图,所有操作都只需要在数据层做处理,不必关心视图层的操作.这里先来学习Vue的响应式原理,V ...

  7. VUE 源码学习01 源码入口

    VUE[version:2.4.1] Vue项目做了不少,最近在学习设计模式与Vue源码,记录一下自己的脚印!共勉!注:此处源码学习方式为先了解其大模块,从宏观再去到微观学习,以免一开始就研究细节然后 ...

  8. Vue源码学习(一):调试环境搭建

    最近开始学习Vue源码,第一步就是要把调试环境搭好,这个过程遇到小坑着实费了点功夫,在这里记下来 一.调试环境搭建过程 1.安装node.js,具体不展开 2.下载vue项目源码,git或svn等均可 ...

  9. Vue 源码学习(1)

    概述 我在闲暇时间学习了一下 Vue 的源码,有一些心得,现在把它们分享给大家. 这个分享只是 Vue源码系列 的第一篇,主要讲述了如下内容: 寻找入口文件 在打包的过程中 Vue 发生了什么变化 在 ...

  10. Vue源码学习(一)———数据双向绑定 Observer

    从最简单的案例,来学习Vue.js源码. <body> <div id='app'> <input type="text" v-model=" ...

随机推荐

  1. 文心一言 VS 讯飞星火 VS chatgpt (186)-- 算法导论14.1 3题

    三.用go语言,写出OS-SELECT的非递归版本. 文心一言: 下面是使用Go语言编写的OS-SELECT的非递归版本: func OS_SELECT(T *Node, k int) *Node { ...

  2. Element-UI中Drawer抽屉去除标题自带黑色边框

    当点击事件drawer==true时,抽匣回打开 这时抽匣的标题会出现一个难看的蓝色边框,一会就会消失,但是好丑,所以要去掉它 解决方法 /deep/ :focus { outline: 0; } v ...

  3. Go 跟踪函数调用链,理解代码更直观

    Go 跟踪函数调用链,理解代码更直观 目录 Go 跟踪函数调用链,理解代码更直观 一.引入 二.自动获取所跟踪函数的函数名 三.增加 Goroutine 标识 四.让输出的跟踪信息更具层次感 五.利用 ...

  4. P9779_[HUSTFC 2023] 不定项选择题_题解

    rt 题目 有一道共 n 个选项的不定项选择题,它的答案至少包含一个选项,由于题目与选项的内容晦涩难懂,你打算通过尝试每一种可能的答案来通过这道题. 初始时所有选项都没有被勾选,你可以执行任意次下述操 ...

  5. OpenIM (Open-Source Instant Messaging) Mac Deployment Guide

    This guide provides step-by-step instructions for deploying OpenIM on a Mac, including both source c ...

  6. 手撕Vue-监听数据变化

    经过上一篇的介绍,已经实现了将模板编译成具体数据,接下来要介绍的是如何监听数据的变化,本章主要完成这个需求即可. 在我们文章的开始,我写了一个 Vue 双向数据绑定原理的文章当中封装了一个 Obser ...

  7. C/C++ Qt 编译打包项目

    Qt程序编译后,需要去qt目录拷贝几个文件,与qt程序放在一起该程序才可以脱离开发环境而独立运行下去,在开发环境下编译好代码以后,还需要进行以下操作将其打包才可以在别的机器上正常运行. QT的下载地址 ...

  8. C# 笔记之基本语法

    C#是一种现代的.通用的编程语言,由微软公司开发和推广.它于2000年发布,是一种结构化.面向对象和组件化的语言,旨在为Windows操作系统和Microsoft .NET框架提供强大的支持.可用于开 ...

  9. 曝iPhone 15系列将于9月13日发布 9月22日发售:7大升级、或售5999元起

    按照往年惯例,新款iPhone将于9月中下旬(第三周)与大家见面.9to5Mac今日带来了新款iPhone的最新消息--iPhone 15系列将于9月13日发布,9月22日正式发售. 9to5Mac从 ...

  10. [奶奶看了都会]ChatGPT接入企业微信成为聊天机器人

    1.聊天效果 上次给大家讲了ChatGPT接入个人微信的方法,但是个人微信容易被封号.这次就教大家接入企业微信,不会再被封号哦~ 话不多说,直接看机器人的聊天效果.基本能实现ChatGPT的聊天效果了 ...