唯心主义蠢货的[vue学习] Vue数据的监听原理

2023-10-14 01:10
文章标签 数据 学习 vue 原理 监听 蠢货 唯心主义

本文主要是介绍唯心主义蠢货的[vue学习] Vue数据的监听原理，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Vue数据的监听

如何监听

vue2.0

Object.defineProperty() 只能对属性进行数据劫持，不能对整个对象进行劫持，同理无法对数组进行劫持，但是我们在使用 Vue 框架中都知道，Vue通过遍历属性或者数组的项进行观察，实现数据劫持，我们查看相关代码如下：

  /*** Observe a list of Array items.*/observeArray (items: Array<any>) {for (let i = 0, l = items.length; i < l; i++) {observe(items[i])  // observe 功能为监测数据的变化}}/*** 对属性进行递归遍历*/let childOb = !shallow && observe(val) // observe 功能为监测数据的变化

缺点：

  • 无法监听数组根据index对于元素的赋值 // 因为数组是在实例化过程中遍历数组进行observe的，如果这样赋值就相当于把index的指向变成了一个新的位置，但是这个位置的对象是没有进行observe的
vm.todos[0] = {name: 'New name',description: 'New description'
};
  • 需要深度遍历，浪费内存 // 对象深度遍历

vue3.0

使用ES6proxy进行代理：

以下为涉及到的Es6的知识

proxy:在目标对象的外层搭建了一层拦截，外界对目标对象的某些操作，必须通过这层拦截

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler

let p = new Proxy(target, handler);
// target：需要代理的目标（（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理））
// handler：对象操作可能的方法

handle存在的方法：

在这里插入图片描述

reflect

https://www.cnblogs.com/kdcg/p/9139273.html

Reflect是ES6为操作对象而提供的新API,而这个API设计的目的只要有：

  • 将Object对象的一些属于语言内部的方法放到Reflect对象上，从Reflect上能拿到语言内部的方法。如：Object.defineProperty
  • 修改某些object方法返回的结果。如：Object.defineProperty(obj, name, desc)在无法定义属性的时候会报错，而Reflect.defineProperty(obj, name, desc)则会返回false
  • 让Object的操作都变成函数行为。如object的命令式：name in obj和delete obj[name] 则与 Reflect.has(obj, name)、Reflect.deleteProperty(obj, name)相等
  • Reflect对象的方法与Proxy对象的方法一一对应，只要proxy对象上有的方法reflect也能找到。
let obj = { test:"123" }
Reflect.get(obj,test); // 123
Reflect.set(obj,test,"1345"); // test:"1345"
Reflect.has(obj,test); // true
Reflect.deleteProperty(obj,test); // obj = {};
Reflect.apply(func, thisArgs, args);//等价Function.prototype.apply(func,thisArgs,args)
Map

map对象保存键值对，并且能够记住键的原始插入顺序。任何值都可以作为一个键或一个值。

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/map

Objects 和 maps 的比较

Objects和 Maps 类似的是，它们都允许你按键存取一个值、删除键、检测一个键是否绑定了值。因此（并且也没有其他内建的替代方式了）过去我们一直都把对象当成 Maps 使用。不过 Maps 和 Objects 有一些重要的区别，在下列情况里使用 Map 会是更好的选择：

  • 一个Object的键只能是字符串或者 Symbols，但一个 Map 的键可以是任意值，包括函数、对象、基本类型。

  • Map 中的键值是有序的，而添加到对象中的键则不是。因此，当对它进行遍历时，Map 对象是按插入的顺序返回键值。

  • 你可以通过 size 属性直接获取一个 Map 的键值对个数，而 Object 的键值对个数只能手动计算。

  • Map 可直接进行迭代，而 Object 的迭代需要先获取它的键数组，然后再进行迭代。

  • Object 都有自己的原型，原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。

  • Map 在涉及频繁增删键值对的场景下会有些性能优势。

let myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");
for (let [key, value] of myMap) {console.log(key + " = " + value);
}
set

对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用(可以理解为去重的数组)

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/set

具体介绍

对于变量和数组进行深度遍历：

function isArray(o){return Object.prototype.toString.call(o) === "[object Array]";
}
function isObject(o){return Object.prototype.toString.call(o) === "[object Object]";
}function observerAble(target){this.target = JSON.parse( JSON.stringify(target) );;this.handle = {get(target,key,receiver){let res = Reflect.get(target,key,receiver);console.log("检测到了get的key为" + key + "result:" + res);return res;},set(target, key, value, receiver){console.log('检测到了set的key为 -> ' + key);return Reflect.set(target, key, value, receiver);}}return this.work(this.target);
}observerAble.prototype = {constructor: observerAble,work:function(target){for(const key in target){if(isObject(key) || isArray(key)){this.work(target[key]);target[key] = new Proxy(target[key],this.handle);}}return new Proxy(target,this.handle);}
}

优化：对数据进行懒代理，当访问并更改某个数据时，才对其进行代理

let p = reactive({ name: "youxuan", age: { num: 10 } });
p.age.num = 11;
get(target, key, receiver) {// 取值console.log("获取");let res = Reflect.get(target, key, receiver);return isObject(res) // 懒代理，只有当取值时再次做代理，vue2.0中一上来就会全部递归增加getter,setter? reactive(res) : res;
}
VUE 3.0 使用proxy进行数据劫持的优势：

(1) proxy可以监听整个对象，而Object.defineProperty只能监听属性，因此需要遍历对象的属性，proxy不需要即可以监听

(2) 同理对于数组来说，proxy也可以监听数组变化，不需要vue2.0中对于Array方法的重写

相关资料：

  • https://segmentfault.com/a/1190000020709962?utm_source=tag-newest#item-3

Vue中存在的问题

vue直接给一个数组项赋值，Vue 能检测到变化吗？

Vue 不能检测到以下数组的变动：

  • 当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
  • 当你修改数组的长度时，例如：vm.items.length = newLength

为了解决第一个问题，Vue 提供了以下操作方法：

 // Vue.set 
Vue.set(vm.items, indexOfItem, newValue)// vm.$set，Vue.set的一个别名 
vm.$set(vm.items, indexOfItem, newValue)// Array.prototype.splice 
vm.items.splice(indexOfItem, 1, newValue)

为了解决第二个问题，Vue 提供了以下操作方法：

// Array.prototype.splice 
vm.items.splice(newLength)

为什么splice和push等Array的方法可以更新视图

（1）由源码可知，vue重写了push pop shift unshift splice sort reverse方法；

因为只有push unshift 和 splice 可能添加新的元素，所以我们对新添加的元素进行收集，

对于push 和 unshift 来说，args就是我们要收集的参数，对于splice来说，第一个参数是位置，第二个参数是数量，第三个参数才是新增的参数，

然后我们对这些参数进行defineReactive，使他们可以被监听，然后再dep.notify()进行消息的发布

（2）ob 表示这个数组对象的data

import { def } from '../util/index'const arrayProto = Array.prototype
export const arrayMethods = Object.create(arrayProto)/*** Intercept mutating methods and emit events*/
;['push','pop','shift','unshift','splice','sort','reverse'
]
.forEach(function (method) {// cache original methodconst original = arrayProto[method]  // 获取对应方法来的函数def(arrayMethods, method, function mutator (...args) {const result = original.apply(this, args)const ob = this.__ob__let insertedswitch (method) {case 'push':case 'unshift':inserted = argsbreakcase 'splice':inserted = args.slice(2)  // splice(index,count,arr)break}if (inserted) ob.observeArray(inserted) // 响应式绑定// notify changeob.dep.notify()return result})
})

Vue不能检测对象属性的添加或者删除

Vue 提供了 Vue.set (object, propertyName, value) / vm.$set (object, propertyName, value) 来实现为对象添加响应式属性，那框架本身是如何实现的呢？

我们查看对应的 Vue 源码：vue/src/core/instance/index.js

export function set (target: Array<any> | Object, key: any, val: any): any {// target 为数组  if (Array.isArray(target) && isValidArrayIndex(key)) {// 修改数组的长度, 避免索引>数组长度导致splcie()执行有误target.length = Math.max(target.length, key)// 利用数组的splice变异方法触发响应式  target.splice(key, 1, val)return val}// key 已经存在，直接修改属性值  if (key in target && !(key in Object.prototype)) {target[key] = valreturn val}const ob = (target: any).__ob__// target 本身就不是响应式数据, 直接赋值if (!ob) {target[key] = valreturn val}// 对属性进行响应式处理defineReactive(ob.value, key, val)ob.dep.notify()return val
}
  • 如果目标是数组，直接使用数组的 splice 方法触发相应式,这个涉及到数组的重写；
  • 如果目标是对象，会先判读属性是否存在、对象是否是响应式，最终如果要对属性进行响应式处理，则是通过调用 defineReactive 方法进行响应式处理（ defineReactive 方法就是 Vue 在初始化对象时，给对象属性采用 Object.defineProperty 动态添加 getter 和 setter 的功能所调用的方法）

这篇关于唯心主义蠢货的[vue学习] Vue数据的监听原理的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/207091。

相关文章

使用Java解析JSON数据并提取特定字段的实现步骤(以提取mailNo为例)

使用Java解析JSON数据并提取特定字段的实现步骤(以提取mailNo为例)

《使用Java解析JSON数据并提取特定字段的实现步骤(以提取mailNo为例)》在现代软件开发中,处理JSON数据是一项非常常见的任务,无论是从API接口获取数据,还是将数据存储为JSON格式,解析... 目录1. 背景介绍1.1 jsON简介1.2 实际案例2. 准备工作2.1 环境搭建2.1.1 添加
阅读更多...
MySQL中删除重复数据SQL的三种写法

MySQL中删除重复数据SQL的三种写法

《MySQL中删除重复数据SQL的三种写法》：本文主要介绍MySQL中删除重复数据SQL的三种写法,文中通过代码示例讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下... 目录方法一：使用 left join + 子查询删除重复数据(推荐)方法二：创建临时表(需分多步执行，逻辑清晰，但会
阅读更多...
Java实现任务管理器性能网络监控数据的方法详解

Java实现任务管理器性能网络监控数据的方法详解

《Java实现任务管理器性能网络监控数据的方法详解》在现代操作系统中,任务管理器是一个非常重要的工具,用于监控和管理计算机的运行状态,包括CPU使用率、内存占用等,对于开发者和系统管理员来说,了解这些... 目录引言一、背景知识二、准备工作1. Maven依赖2. Gradle依赖三、代码实现四、代码详解五
阅读更多...
详谈redis跟数据库的数据同步问题

详谈redis跟数据库的数据同步问题

《详谈redis跟数据库的数据同步问题》文章讨论了在Redis和数据库数据一致性问题上的解决方案,主要比较了先更新Redis缓存再更新数据库和先更新数据库再更新Redis缓存两种方案,文章指出,删除R... 目录一、Redis 数据库数据一致性的解决方案1.1、更新Redis缓存、删除Redis缓存的区别二
阅读更多...
Redis事务与数据持久化方式

Redis事务与数据持久化方式

《Redis事务与数据持久化方式》该文档主要介绍了Redis事务和持久化机制,事务通过将多个命令打包执行,而持久化则通过快照（RDB）和追加式文件（AOF）两种方式将内存数据保存到磁盘,以防止数据丢失... 目录一、Redis 事务1.1 事务本质1.2 数据库事务与redis事务1.2.1 数据库事务1.
阅读更多...
Oracle Expdp按条件导出指定表数据的方法实例

Oracle Expdp按条件导出指定表数据的方法实例

《OracleExpdp按条件导出指定表数据的方法实例》：本文主要介绍Oracle的expdp数据泵方式导出特定机构和时间范围的数据,并通过parfile文件进行条件限制和配置,文中通过代码介绍... 目录1.场景描述 2.方案分析3.实验验证 3.1 parfile文件3.2 expdp命令导出4.总结
阅读更多...
Redis主从复制实现原理分析

Redis主从复制实现原理分析

《Redis主从复制实现原理分析》Redis主从复制通过Sync和CommandPropagate阶段实现数据同步,2.8版本后引入Psync指令,根据复制偏移量进行全量或部分同步,优化了数据传输效率... 目录Redis主DodMIK从复制实现原理实现原理Psync: 2.8版本后总结Redis主从复制实
阅读更多...
更改docker默认数据目录的方法步骤

更改docker默认数据目录的方法步骤

《更改docker默认数据目录的方法步骤》本文主要介绍了更改docker默认数据目录的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录1.查看docker是否存在并停止该服务2.挂载镜像并安装rsync便于备份3.取消挂载备份和迁
阅读更多...
不删数据还能合并磁盘? 让电脑C盘D盘合并并保留数据的技巧

不删数据还能合并磁盘? 让电脑C盘D盘合并并保留数据的技巧

《不删数据还能合并磁盘?让电脑C盘D盘合并并保留数据的技巧》在Windows操作系统中，合并C盘和D盘是一个相对复杂的任务，尤其是当你不希望删除其中的数据时，幸运的是，有几种方法可以实现这一目标且在... 在电脑生产时，制造商常为C盘分配较小的磁盘空间，以确保软件在运行过程中不会出现磁盘空间不足的问题。但在
阅读更多...
Java如何接收并解析HL7协议数据

Java如何接收并解析HL7协议数据

《Java如何接收并解析HL7协议数据》文章主要介绍了HL7协议及其在医疗行业中的应用,详细描述了如何配置环境、接收和解析数据,以及与前端进行交互的实现方法,文章还分享了使用7Edit工具进行调试的经... 目录一、前言二、正文1、环境配置2、数据接收：HL7Monitor3、数据解析：HL7Busines
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2