Vue 3 இன் வினைத்திறன் JavaScript Proxies மீது கட்டப்பட்டுள்ளது. நீங்கள் நிலையை வினைத்திறனாக ஆக்கும்போது, Vue அதை Proxy இல் சுற்றுகிறது, இது வாசிப்பு மற்றும் எழுதுதல் ஆகியவற்றைக் கருணை வேண்டிக்கொள்ளும், எந்த விளைவுகளை எந்த பண்புகள் சார்ந்து இருக்கிறது என்பதை கண்டறிய அனுமতி கொடுக்கிறது, மற்றும் தரவு மாறும்போது அந்த விளைவுகளை தூண்டி மீண்டும் இயக்குகிறது.
// a simplified mental model of reactive()
function reactive(target) {
return new Proxy(target, {
get(obj, key) {
track(obj, key); // record "the current effect depends on obj.key"
return obj[key];
},
set(obj, key, value) {
obj[key] = value;
trigger(obj, key); // re-run every effect that depended on obj.key
return true;
},
});
}
ஒரு பண்பைப் படிப்பது தற்போது இயங்கும் விளைவை ஒரு சார்பாக கண்டறியும்; எழுதுவது அதைப் படிக்கும் அனைத்து விளைவுகளை தூண்டும். இது Vue க்கு சரியாக எந்த கூறுகள் அல்லது கணிக்கப்பட்ட மதிப்புகள் ஒரு குறிப்பிட்ட பண்பு மாறும்போது புதுப்பிக்கப்பட வேண்டும் என்பது தெரியுமாறு செய்கிறது.
// component render, computed, and watchers all run inside an "effect"
effect(() => {
document.body.innerHTML = count.value; // reading count.value tracks this effect
});
count.value++; // triggers the effect → it re-runs → DOM updates
ஒரு விளைவு இயங்கும்போது, Vue அதை "செயலில்" குறியாக்குகிறது, இதனால் அதன் போது உள்ள எந்த வினைத்திறன் வாசிப்பும் அதற்குத் திரும்பக் குறியப்பட்டுவிடும். பிறகு ஒரு சார்பை மாற்றினால், பாதிக்கப்பட்ட விளைவுகள் மட்டுமே மீண்டும் இயங்கும்.
// Vue 2 used Object.defineProperty per-property, which COULDN'T detect:
this.obj.newProp = 1; // ❌ adding a new property (needed Vue.set)
this.arr[0] = 5; // ❌ index assignment
this.arr.length = 0; // ❌ length changes
// Vue 3's Proxy intercepts ALL operations, including new keys, deletes, and arrays ✅
Proxies முழு பொருளையும் (எந்த விசையையும், சேர்க்கைகளையும், நீக்கம்களையும், வரிசை பரிமாணங்களையும்) கருணை வேண்டிக்கொள்ளும், Vue 2 இன் நன்கறியப்பட்ட கணக்குகளை அகற்றுகிறது — இனி Vue.set வேலைவாய்ப்புகள் இல்லை.
reactive(obj) → returns a Proxy of the object
ref(value) → returns an object { value } whose .value access is tracked
(so primitives can be reactive — Proxies only wrap objects)
track/trigger Proxy மாதிரியைப் புரிந்துகொள்ள வேண்டும் ஏன் Vue மிகவும் திறனிலக்கணமாக (இது மாறிய தரவுகளை உண்மையாக சார்ந்திருக்கும் விளைவுகளை மட்டுமே புதுப்பிக்கிறது — சாந்தமான வினைத்திறன்) மற்றும் ஏன் பழையளவான Vue 2 கைப்பற்றல்கள் இருந்தன மற்றும் Vue 3 இல் நீக்கப்பட்டுவிட்டன என்பதை விளக்குகிறது.
இது நடைமுறை விதிகளையும் தெளிவுபடுத்துகிறது: reactive ஏன் பொருட்களை கட்டுப்படுத்த வேண்டும் (Proxies முதன்மையைச் சுற்றிக்கொள்ள முடியாது, எனவே ref), மற்றும் ஏன் reactive கலக்குறிப்பு கண்டறிதலைக் கொடுக்கிறது (நீங்கள் மதிப்பை Proxy இன் get/set கருணை வேண்டுதல்களிலிருந்து கேள்விக்குள்ளாக்குகிறீர்கள்).