首页 > 其他分享 >响应式数据

响应式数据

时间:2024-04-28 22:01:49浏览次数:23  
标签:vue 函数 Dep watcher 响应 数据 属性

vue官方阐述:https://cn.vuejs.org/v2/guide/reactivity.html

响应式数据的最终目标,是当对象本身或对象属性发生变化时,将会运行一些函数,最常见的就是render函数。

在具体实现上,vue用到了几个核心部件

  1. Observer
  2. Dep
  3. Watcher
  4. Scheduler

Observer要实现的目标非常简单,就是把一个普通的对象转换为响应式的对象

为了实现这一点,Observer把对象的每个属性通过Object.defineProperty转换为带有gettersetter的属性,这样一来,当访问或设置属性时,vue就有机会做一些别的事情。

Observer是vue内部的构造器,我们可以通过Vue提供的静态方法Vue.observable( object )间接的使用该功能。

在组件生命周期中,这件事发生在beforeCreate之后,created之前。

具体实现上,它会递归遍历对象的所有属性,以完成深度的属性转换。

由于遍历时只能遍历到对象的当前属性,因此无法监测到将来动态增加或删除的属性,因此vue提供了$set$delete两个实例方法,让开发者通过这两个实例方法对已有响应式对象添加或删除属性。

对于数组,vue会更改它的隐式原型,之所以这样做,是因为vue需要监听那些可能改变数组内容的方法

总之,Observer的目标,就是要让一个对象,它属性的读取、赋值,内部数组的变化都要能够被vue感知到。

Dep

这里有两个问题没解决,就是读取属性时要做什么事,而属性变化时要做什么事,这个问题需要依靠Dep来解决。

Dep的含义是Dependency,表示依赖的意思。

Vue会为响应式对象中的每个属性、对象本身、数组本身创建一个Dep实例,每个Dep实例都有能力做以下两件事:

  • 记录依赖:是谁在用我
  • 派发更新:我变了,我要通知那些用到我的人

当读取响应式对象的某个属性时,它会进行依赖收集:有人用到了我

当改变某个属性时,它会派发更新:那些用我的人听好了,我变了

Watcher

这里又出现一个问题,就是Dep如何知道是谁在用我?

要解决这个问题,需要依靠另一个东西,就是Watcher。

当某个函数执行的过程中,用到了响应式数据,响应式数据是无法知道是哪个函数在用自己的

因此,vue通过一种巧妙的办法来解决这个问题

我们不要直接执行函数,而是把函数交给一个叫做watcher的东西去执行,watcher是一个对象,每个这样的函数执行时都应该创建一个watcher,通过watcher去执行

watcher会设置一个全局变量,让全局变量记录当前负责执行的watcher等于自己,然后再去执行函数,在函数的执行过程中,如果发生了依赖记录dep.depend(),那么Dep就会把这个全局变量记录下来,表示:有一个watcher用到了我这个属性

当Dep进行派发更新时,它会通知之前记录的所有watcher:我变了

每一个vue组件实例,都至少对应一个watcher,该watcher中记录了该组件的render函数。

watcher首先会把render函数运行一次以收集依赖,于是那些在render中用到的响应式数据就会记录这个watcher。

当数据变化时,dep就会通知该watcher,而watcher将重新运行render函数,从而让界面重新渲染同时重新记录当前的依赖。

Scheduler

现在还剩下最后一个问题,就是Dep通知watcher之后,如果watcher执行重运行对应的函数,就有可能导致函数频繁运行,从而导致效率低下

试想,如果一个交给watcher的函数,它里面用到了属性a、b、c、d,那么a、b、c、d属性都会记录依赖,于是下面的代码将触发4次更新:

state.a = "new data";
state.b = "new data";
state.c = "new data";
state.d = "new data";

这样显然是不合适的,因此,watcher收到派发更新的通知后,实际上不是立即执行对应函数,而是把自己交给一个叫调度器的东西

调度器维护一个执行队列,该队列同一个watcher仅会存在一次,队列中的watcher不是立即执行,它会通过一个叫做nextTick的工具方法,把这些需要执行的watcher放入到事件循环的微队列中,nextTick的具体做法是通过Promise完成的

nextTick 通过 this.$nextTick 暴露给开发者
nextTick 的具体处理方式见:https://cn.vuejs.org/v2/guide/reactivity.html#%E5%BC%82%E6%AD%A5%E6%9B%B4%E6%96%B0%E9%98%9F%E5%88%97

也就是说,当响应式数据变化时,render函数的执行是异步的,并且在微队列中

总体流程

标签:vue,函数,Dep,watcher,响应,数据,属性
From: https://www.cnblogs.com/shmillly959/p/18164584

相关文章

  • mysql理论数据库优化MySQL数据库面试题
    mysql数据库优化MySQL数据库面试题 MySQL数据库面试题MySQL数据库面试题1、什么是SQL?        结构化查询语言(StructuredQueryLanguage)简称SQL,是一种数据库查询语言。作用:用于存取数据、查询、更新和管理关系数据库系统。 2、什么是MySQL?        M......
  • 日志分析-redis应急响应
    简介服务器场景操作系统Linux服务器账号密码rootxjredis任务环境说明注:样本请勿在本地运行!!!样本请勿在本地运行!!!样本请勿在本地运行!!!应急响应工程师小王某人收到安全设备告警服务器被植入恶意文件,请上机排查步骤#1通过本地PCSSH到服务器并且分析黑客攻击成功的IP为......
  • 日志分析-mysql应急响应
    简介mysql应急响应ssh账号root密码xjmysqlsshenv.xj.edisec.net-pxxxxx1.黑客第一次写入的shellflag{关键字符串}2.黑客反弹shell的ipflag{ip}3.黑客提权文件的完整路径md5flag{md5}注/xxx/xxx/xxx/xxx/xxx.xx4.黑客获取的权限flag步骤#1步骤#2/var/l......
  • 应急响应- Linux入侵排查
    简介账号:root密码:[email protected]目录存在木马,请找到木马的密码提交2.服务器疑似存在不死马,请找到不死马的密码提交3.不死马是通过哪个文件生成的,请提交文件名4.黑客留下了木马文件,请找出黑客的服务器ip提交5.黑客留下了木马文件,请找出黑客服务器开启的监端口......
  • 应急响应-webshell查杀
    简介靶机账号密码rootxjwebshell1.黑客webshell里面的flagflag{xxxxx-xxxx-xxxx-xxxx-xxxx}2.黑客使用的什么工具的shellgithub地址的md5flag{md5}3.黑客隐藏shell的完整路径的md5flag{md5}注:/xxx/xxx/xxx/xxx/xxx.xxx4.黑客免杀马完整路径md5flag步骤#1.1......
  • C语音数据类型
    1、基本数据类型 整数类型 浮点类型 字符类型 ......
  • 揭秘Python中的JSON数据格式与Requests模块
    From: https://mp.weixin.qq.com/s/QgGyn2efYtVKI65RwXoiEA------------------------------------------------------------------------------------importpytestimportjsonimportrequestsfromrequests.authimportHTTPBasicAuthfromrequests.adaptersimportHTTPA......
  • vue与后端的数据交互
    一、前后端数据交互简单的前后端数据交互流程:·在前端(浏览器)中发起HTTP请求:使用前端框架(如Vue.js)或者原生JavaScript,您可以通过发送HTTP请求(如GET、POST、PUT、DELETE)向后端服务器请求数据。·后端服务器处理请求:后端服务器接收到前端发送的HTTP请求,并根据请求的类型和参数进......
  • js逆向实战之企名片返回数据解密
    url:https://www.qimingpian.com/finosda/project/pinvestment分析过程抓流量包,发现回显数据都是加密的。想要找到解密逻辑,可以参考上一篇文章的思路,直接搜索拦截器。有五处,只需要看响应拦截器即可。第一处响应拦截器可以看到e.data,有经验的人大概就可以判断出来......
  • Linux Centos7 虚拟环境安装Mysql数据库(超详细图文讲解)
    LinuxCentos7虚拟环境安装Mysql数据库(超详细图文讲解)1、进入Centos7虚拟机,使用wget下载Mysql相应的rpm包下载:wgethttp://repo.mysql.com/mysql57-community-release-el7-8.noarch.rpm如果没有wget命令,可以使用yum安装,yuminstallwget2、执行rpm命令,安装rpmrpm-ivhmys......