原副标题:丁鹿大学堂: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 = 191 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函数。