Vue源码学习(十):关于dep和watcher使用的一些思考
好家伙,
前面想了好久,都没想明白为什么要dep和watcher打配合才能实现数据-视图同步
为什么要多一个依赖管理这样的东西
给每个数据绑个watcher(xxfunction),然后,数据变了,调set,然后调xxfunction,不就行了,
然后今天突然想明白了,不是为什么要这么干,而是必须这么干
来看一个例子,xx汉堡店,胖虎汉堡店

蔬菜沙拉的原料只有蔬菜
牛肉汉堡的原材有蔬菜,面包和汉堡肉
现在,我必须紧盯这些食材,材料如果缺货,那么我就无法制作食物并提供给客人了
现在,一旦缺货,我将会触发某些操作,补货
这时候我们可以抽象一下他们的依赖关系
Dep(牛肉汉堡){
watcher(蔬菜)
watcher(面包)
watcher(汉堡肉)
}
Dep(蔬菜沙拉){
watcher(蔬菜)
}
写到这,相信你已经理解dep的作用了
我们看到的视图,与我们要操作的数据并不是完全一一对应的,
也许是一对多,也许是多对一,也许是多对多
在视图与操作中出现一个中间人,来管理这个依赖关系,就是dep
所以总结一下dep的作用是什么?
管理依赖关系
Vue源码学习(十):关于dep和watcher使用的一些思考的更多相关文章
- 【Vue源码学习】依赖收集
前面我们学习了vue的响应式原理,我们知道了vue2底层是通过Object.defineProperty来实现数据响应式的,但是单有这个还不够,我们在data中定义的数据可能没有用于模版渲染,修改这些 ...
- Vue源码学习1——Vue构造函数
Vue源码学习1--Vue构造函数 这是我第一次正式阅读大型框架源码,刚开始的时候完全不知道该如何入手.Vue源码clone下来之后这么多文件夹,Vue的这么多方法和概念都在哪,完全没有头绪.现在也只 ...
- Vue源码学习三 ———— Vue构造函数包装
Vue源码学习二 是对Vue的原型对象的包装,最后从Vue的出生文件导出了 Vue这个构造函数 来到 src/core/index.js 代码是: import Vue from './instanc ...
- Vue源码学习二 ———— Vue原型对象包装
Vue原型对象的包装 在Vue官网直接通过 script 标签导入的 Vue包是 umd模块的形式.在使用前都通过 new Vue({}).记录一下 Vue构造函数的包装. 在 src/core/in ...
- 最新 Vue 源码学习笔记
最新 Vue 源码学习笔记 v2.x.x & v3.x.x 框架架构 核心算法 设计模式 编码风格 项目结构 为什么出现 解决了什么问题 有哪些应用场景 v2.x.x & v3.x.x ...
- 【Vue源码学习】响应式原理探秘
最近准备开启Vue的源码学习,并且每一个Vue的重要知识点都会记录下来.我们知道Vue的核心理念是数据驱动视图,所有操作都只需要在数据层做处理,不必关心视图层的操作.这里先来学习Vue的响应式原理,V ...
- VUE 源码学习01 源码入口
VUE[version:2.4.1] Vue项目做了不少,最近在学习设计模式与Vue源码,记录一下自己的脚印!共勉!注:此处源码学习方式为先了解其大模块,从宏观再去到微观学习,以免一开始就研究细节然后 ...
- Vue源码学习(一):调试环境搭建
最近开始学习Vue源码,第一步就是要把调试环境搭好,这个过程遇到小坑着实费了点功夫,在这里记下来 一.调试环境搭建过程 1.安装node.js,具体不展开 2.下载vue项目源码,git或svn等均可 ...
- Vue 源码学习(1)
概述 我在闲暇时间学习了一下 Vue 的源码,有一些心得,现在把它们分享给大家. 这个分享只是 Vue源码系列 的第一篇,主要讲述了如下内容: 寻找入口文件 在打包的过程中 Vue 发生了什么变化 在 ...
- Vue源码学习(一)———数据双向绑定 Observer
从最简单的案例,来学习Vue.js源码. <body> <div id='app'> <input type="text" v-model=" ...
随机推荐
- [转帖]013 Linux 搞懂「文件所属者更改及权限的赋予」从未如此简单 (chmod、chgrp、chown)
https://my.oschina.net/u/3113381/blog/5435014 01 一图详解「ls -l」 02 两种符号区分表示文件和目录 -(横线) # 表示非目录文件 d # ...
- redis-shake
https://github.com/alibaba/RedisShake/wiki/%E8%BF%90%E8%A1%8C%E7%9B%91%E6%8E%A7 redis-shake is a too ...
- Skia 编译及踩坑实践
本文要点 •了解并入门 Skia.OpenGL 和 Vulkan •了解 Skia 在后端渲染上的坑点 前言 Skia 是什么 Skia 是一个开源 2D 图形库,提供可跨各种硬件和软件平台工作的通用 ...
- Fabric网络升级(一)
原文来自这里. 本章节主要介绍如何从之前的版本或其他长期支持版本升级至最新版. 从2.1升级到2.2 Fabric v2.1和v2.2都是稳定版,以bug修复和其它形式的代码加固位置.因此,升级不需要 ...
- 快速上手NPM包管理
NPM官网 前提 安装nodejs 检测安装成功的命令 node -v 显示版本号即为安装成功 快速上手教程 第一步注册NPM账号官网在上面 第二步骤随便找个地方新建一个文件夹 然后这个文件夹我们用C ...
- 强化学习从基础到进阶-常见问题和面试必知必答[7]:深度确定性策略梯度DDPG算法、双延迟深度确定性策略梯度TD3算法详解
强化学习从基础到进阶-常见问题和面试必知必答[7]:深度确定性策略梯度DDPG算法.双延迟深度确定性策略梯度TD3算法详解 1.核心词汇 深度确定性策略梯度(deep deterministic po ...
- C++ Qt开发:运用QJSON模块解析数据
Qt 是一个跨平台C++图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍如何运用QJs ...
- 4.5 MinHook 挂钩技术
MinHook是一个轻量级的Hooking库,可以在运行时劫持函数调用.它支持钩子API函数和普通函数,并且可以运行在32位和64位Windows操作系统上.其特点包括易于使用.高性能和低内存占用.M ...
- C# WinForm 界面控件
C# WinForm是一种GUI应用程序框架,它允许开发人员使用各种控件来创建丰富的用户界面.以下是一些C# WinForm中常见的界面控件:这些界面控件在C# WinForm应用程序开发中非常常见, ...
- 使用s3fs-fuse挂载minio文件时无法删除问题排查过程
使用s3fs-fuse挂载minio文件时无法删除问题排查过程 结论:部分场景无法满足,具体问题详见正文 1. 部署minio docker run -p 9000:9100 -p 909 ...