Έχετε αντιμετωπίσει ποτέ απώλεια αντιδραστικότητας στο Vue;

ஆம், நான் இதை சந்தித்துள்ளேன். Vue 2-யில் மறுசெயலாக்கம் இழப்பு முக்கியமாக இரண்டு சூழ்நிலைகளில் ஏற்படுகிறது:

1. தற்போதைய பொருளுக்கு புதிய பண்பை நேரடியாகச் சேர்க்கும் போது. Vue 2, உருவாக்கும் போது உள்ள பண்புகளுக்கு மட்டுமே மாற்றங்களை கண்காணிக்கிறது.
2. ஒரு வரிசையை குறியீடு மூலம் மாற்றும் அல்லது அதன் நீளத்தை மாற்றும் போது. Vue 2, இவை நேரடியாக மறுசெயலாக்கமாக கண்காணிக்க முடியாது.

இந்த பிரச்சனைகளை தீர்க்க $set முறைகள் மற்றும் mutator array முறைகள் (push, pop, shift, unshift, splice, sort, reverse) அல்லது splice அடிப்படையிலான முறைகள் பயன்படுத்தப்படுகின்றன, அவை உருப்படிகளை மாற்ற அல்லது நீளத்தை மாற்ற உதவுகின்றன.

// பண்பை சேர்க்கும் போது மறுசெயலாக்க இழப்பு
const obj = { a: 1 };
// obj.b = 2; // Vue 2-யில் மறுசெயலாக்கமில்லை

// $set மூலம் தீர்வு
// Vue.$set(obj, 'b', 2);

// வரிசையை குறியீடு மூலம் மாற்றும் போது மறுசெயலாக்க இழப்பு
const arr = [1, 2, 3];
// arr[0] = 4; // Vue 2-யில் மறுசெயலாக்கமில்லை

// mutator முறைகள் மூலம் தீர்வு
// arr.splice(0, 1, 4);

// $set மூலம் வரிசைகளுக்கு தீர்வு (குறைந்தபட்சம் பயன்படுத்தப்படுகிறது, ஆனால் சாத்தியமாகும்)
// Vue.$set(arr, 0, 4);

Vue 3-ல், Composition API மற்றும் reactive/ref பயன்படுத்தி, மேலும் மேம்பட்ட proxy அடிப்படையிலான மறுசெயலாக்க இயந்திரத்துடன், இந்த பிரச்சனைகள் பெரிதும் தீர்க்கப்பட்டுள்ளன. மறுசெயலாக்க பொருட்களுக்கு பண்புகளை சேர்க்கும் மற்றும் வரிசைகளை குறியீடு அல்லது நீளத்தால் மாற்றும் இயல்பாக மறுசெயலாக்கமாக மாறுகின்றன.

// Vue 3
import { reactive } from 'vue';

const obj = reactive({ a: 1 });
obj.b = 2; // Vue 3-யில் மறுசெயலாக்கம்

const arr = reactive([1, 2, 3]);
arr[0] = 4; // Vue 3-யில் மறுசெயலாக்கம்
arr.length = 1; // Vue 3-யில் மறுசெயலாக்கம்

எனினும், Vue 2-யில் மறுசெயலாக்க இழப்பின் காரணங்களை புரிந்துகொள்ளுவது, பழைய குறியீடு அல்லது பதிப்பு மாற்றங்களில் பயனுள்ளதாகும்.