首页 > 编程语言 >Vue源码学习(十):关于dep和watcher使用的一些思考

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

时间:2023-10-10 19:58:29浏览次数:47  
标签:Vue 依赖 dep 视图 watcher 源码 汉堡 蔬菜

好家伙,

 

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

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

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

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

 

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

 

蔬菜沙拉的原料只有蔬菜

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

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

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

 

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

Dep(牛肉汉堡){

   watcher(蔬菜)

   watcher(面包)

   watcher(汉堡肉)

}

Dep(蔬菜沙拉){

  watcher(蔬菜)

}

 

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

 

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

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

 

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

 

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

管理依赖关系

 

 

标签:Vue,依赖,dep,视图,watcher,源码,汉堡,蔬菜
From: https://www.cnblogs.com/FatTiger4399/p/17755460.html

相关文章

  • Vue框架结构说明
    vue安装三部曲:1:安装node.js环境2:vue-cli脚手架构建工具3:配置vue环境参考资料:https://blog.csdn.net/muzidigbig/article/details/80490884......
  • vue实现简单的页面框架
    效果图:代码结构:......
  • vue2,3render函数的简单使用
    render函数的主要作用:创建虚拟DOM:render函数负责创建虚拟DOM元素,这些元素以JavaScript对象的形式表示页面的结构和内容。根据状态和数据生成UI:render函数根据组件的状态(data数据)、属性(props)、计算属性(computed)、方法(methods)等信息,生成虚拟DOM,包括元素、组件、事件......
  • 在vue3中使用粒子库particles.vue3,只有背景没有粒子的问题
    按下述步骤,看是缺少安装包还是缺少引入方法(题主一开始不能显示粒子的原因是因为没有进行下述红色代码的操作)1.要安装两个包npminstallparticles.vue3npminstalltsparticles2.可选择全局引入main.js//导入粒子库importParticlesfrom"particles.vue3";//use注......
  • 前端面试八股文 Vue
    前端面试八股文Vue讲一下Vue框架的原理?我们使用Vue开发应用,实际上是编写若干Vue组件,实现模板、data、生命周期钩子等,然后执行newVue(),将根组件挂载到指定的DOM节点上面,当我们编写的组件中生命周期钩子里面的或者在模板的元素事件中改变数据时候,视图会响应地更新。这样就实现了......
  • Vue学习笔记(八):Vue脚手架
      Vue脚手架是Vue官方提供的标准化开发工具,使用Vue脚手架(vue-cli)可以快速创建vue项目。  1安装npm¶  第一步(仅第一次执行):下载npm,npm(nodepackagemanager)是nodejs下的包管理工具,后续下载、管理vue包都得通过npm进行,下载地址如下:http......
  • vue实现视频上传功能
    本文实例为大家分享了vue实现视频上传功能的具体代码,供大家参考,具体内容如下环境:vue+TS上传视频+上传到阿里云主要处理前端在vue下上传视频使用的是阿里云的视频点播服务1、需要后台去申请一个开发API,请求阿里云的接口访问控制2、有了开发视频的token,供给前端3、前端去请......
  • vue上传视频插件
    视频作为一种信息表达方式,越来越受到人们的关注和喜爱。近年来,随着移动互联网的普及,手机、平板电脑等设备可以随时随地观看视频。在开发网站或移动应用时,上传和展示视频成为一项不可或缺的功能。Vue作为一种现代化JavaScript框架,提供了丰富的开发工具和插件,其中视频上传插件是Vue......
  • vue之修饰符
    1.简介修饰符是以半角句号.指明的特殊后缀2.常用修饰符2.1.prevent:阻止事件默认行为可以告诉v-on指令对于触发的事件调用event.preventDefault(),一般用于表单提交、a标签的click事件等<formv-on.prevent="onSubmit"></form><ahref="www.baidu.com"@click.pre......
  • 02vue之调试工具vue-devtools
    1下载插件可以在https://chrome.zzzmh.cn/#/index这里直接下载,然后直接拖入扩展程序即可2下载包2.1从github克隆项目gitclonehttps://github.com/vuejs/vue-devtools2.2在vue-devtools目录下安装依赖包cdvue-devtoolsnpminstall2.3修改manifest.json文......