丁鹿学堂:2023前端进阶学习指南(vue3的数据响应式原理分析)

2023-05-27 0 248

原副标题:丁鹿大学堂:2023后端高阶学习指南(vue3的统计数据积极响应式基本原理预测)

丁鹿学堂:2023前端进阶学习指南(vue3的数据响应式原理分析)

js的一般第一类

假如表述两个一般第一类,修正第一类的值,不能负面影响其它原素。

const obj = { name:丁鹿, age:20 } obj.name = 后端

假如想在修正第一类的原素的与此同时,去促发许多其它操作方式,他们须要把第一类展开改建。

在vue3中,采用的是全权商业模式。

给一般第一类创建全权

// 建立两个第一类 const obj = { name:丁鹿, age:20 } const handle = { get(target,prop,recevier){ console.log(统计数据加载了,做许多操作方式); return target[prop] }, set(target,prop,value,recevier){ target[prop] = value console.log(统计数据被修正了,能做许多操作方式) } } const proxy = new Proxy(obj,handle) proxy.age = 19

1 handle是给第一类选定的全权第一类,obj是被全权的第一类。handel用以选定全权的犯罪行为。

2 在js中内建了Proxy那个类,能建立全权。proxy那个全权,这类就有obj的特性。

handle全权第一类预测

handler里头有特定的句法,

1 get方式

透过全权去加载obj统计数据的这时候,会促发get方式,它的codice是最后加载的值。

get方式有3个模块,第二个是target,是被全权的第一类obj,第三个是加载的特性名,第三个是proxy全权第一类。

2 set方式

假如透过全权去修正obj的值,会促发set方式。

get方式有4个模块,第二个是target,是被全权的第一类obj,第三个是修正的特性名,第三个是修正选定的特性值。第四个是proxy全权第一类。

透过get方式处理修正的操作方式。

注意:

假如不设置get和set,不能做任何操作方式,假如设置了get和set,加载和设置特性的这时候,会调用这些方式。

他们在返回加载和修正的值的这时候,能做许多操作方式,就实现了统计数据的监听。

vue3的统计数据积极响应式基本原理

在vue3中,透过data()返回的第一类统计数据,会被vue全权。

vue全权以后,当他们透过全权去加载特性时,在codice之前,vue会展开许多跟踪操作方式,在vue中是track函数,它会记录采用统计数据的原素。

当透过全权去修正特性时,会促发之前所有采用该特性的原素,展开统计数据更新。在vue中是trigger函数。

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务