0
# Reactive Utilities
1

2
Vue 2 style reactive utilities with Vue 3 compatibility polyfills for universal reactive data manipulation. These functions provide consistent behavior across Vue versions for setting and deleting reactive properties.
3

4
## Capabilities
5

6
### Reactive Set
7

8
Sets a property on a reactive object, ensuring reactivity is maintained. In Vue 2, this uses Vue.set internally. In Vue 3, it uses simple property assignment since all objects are reactive by default.
9

10
```typescript { .api }
11
/**
12
 * Set a property on target object maintaining reactivity
13
 * Vue 2: Uses Vue.set for reactivity
14
 * Vue 3: Uses property assignment (objects are reactive by default)
15
 * @param target - Target object or array
16
 * @param key - Property key or array index
17
 * @param val - Value to set
18
 * @returns The value that was set
19
 */
20
export function set<T>(target: any, key: any, val: T): T;
21
```
22

23
**Usage Examples:**
24

25
```typescript
26
import { set, reactive, ref } from "vue-demi";
27

28
// Object property setting
29
const user = reactive({ name: 'John' });
30
set(user, 'email', 'john@example.com'); // Reactive in both Vue 2 & 3
31
console.log(user.email); // 'john@example.com'
32

33
// Array manipulation
34
const items = ref(['apple', 'banana']);
35
set(items.value, 2, 'cherry'); // Reactive array update
36
console.log(items.value); // ['apple', 'banana', 'cherry']
37

38
// Dynamic property addition
39
const config = reactive({});
40
set(config, 'theme', 'dark'); // Adds reactive property
41
set(config, 'language', 'en'); // Adds another reactive property
42

43
// Array length manipulation
44
const numbers = ref([1, 2, 3]);
45
set(numbers.value, 'length', 5); // Extends array length
46
set(numbers.value, 4, 10); // Sets value at new index
47
```
48

49
### Reactive Delete
50

51
Deletes a property from a reactive object, ensuring reactivity is maintained. In Vue 2, this uses Vue.delete internally. In Vue 3, it uses the delete operator.
52

53
```typescript { .api }
54
/**
55
 * Delete a property from target object maintaining reactivity
56
 * Vue 2: Uses Vue.delete for reactivity
57
 * Vue 3: Uses delete operator (objects are reactive by default)
58
 * @param target - Target object or array
59
 * @param key - Property key or array index to delete
60
 */
61
export function del(target: any, key: any): void;
62
```
63

64
**Usage Examples:**
65

66
```typescript
67
import { del, reactive, ref } from "vue-demi";
68

69
// Object property deletion
70
const user = reactive({ 
71
  name: 'John', 
72
  email: 'john@example.com',
73
  age: 30 
74
});
75
del(user, 'age'); // Reactively removes property
76
console.log(user.age); // undefined
77

78
// Array element removal
79
const items = ref(['apple', 'banana', 'cherry']);
80
del(items.value, 1); // Removes 'banana', shifts array
81
console.log(items.value); // ['apple', 'cherry']
82

83
// Conditional deletion
84
const settings = reactive({
85
  theme: 'dark',
86
  notifications: true,
87
  beta: false
88
});
89

90
// Remove beta flag if disabled
91
if (!settings.beta) {
92
  del(settings, 'beta');
93
}
94
```
95

96
### Combined Usage Patterns
97

98
Common patterns for using set and del together for dynamic object manipulation.
99

100
**Dynamic Form Fields:**
101

102
```typescript
103
import { set, del, reactive } from "vue-demi";
104

105
export default {
106
  setup() {
107
    const formData = reactive({});
108
    
109
    const addField = (name: string, value: any) => {
110
      set(formData, name, value);
111
    };
112
    
113
    const removeField = (name: string) => {
114
      del(formData, name);
115
    };
116
    
117
    const toggleField = (name: string, value: any) => {
118
      if (name in formData) {
119
        del(formData, name);
120
      } else {
121
        set(formData, name, value);
122
      }
123
    };
124
    
125
    return {
126
      formData,
127
      addField,
128
      removeField,
129
      toggleField
130
    };
131
  }
132
};
133
```
134

135
**Dynamic List Management:**
136

137
```typescript
138
import { set, del, ref } from "vue-demi";
139

140
export default {
141
  setup() {
142
    const items = ref([]);
143
    
144
    const addItem = (item: any) => {
145
      const index = items.value.length;
146
      set(items.value, index, item);
147
    };
148
    
149
    const removeItem = (index: number) => {
150
      del(items.value, index);
151
    };
152
    
153
    const updateItem = (index: number, item: any) => {
154
      set(items.value, index, item);
155
    };
156
    
157
    return {
158
      items,
159
      addItem,
160
      removeItem,
161
      updateItem
162
    };
163
  }
164
};
165
```
166

167
**Conditional Property Management:**
168

169
```typescript
170
import { set, del, reactive, computed } from "vue-demi";
171

172
export default {
173
  setup() {
174
    const config = reactive({
175
      mode: 'development'
176
    });
177
    
178
    const isDevelopment = computed(() => config.mode === 'development');
179
    
180
    // Add debug properties only in development
181
    const updateDebugMode = (enabled: boolean) => {
182
      if (enabled && isDevelopment.value) {
183
        set(config, 'debug', true);
184
        set(config, 'verbose', true);
185
      } else {
186
        del(config, 'debug');
187
        del(config, 'verbose');
188
      }
189
    };
190
    
191
    return {
192
      config,
193
      isDevelopment,
194
      updateDebugMode
195
    };
196
  }
197
};
198
```
199

200
### Migration Notes
201

202
When migrating from Vue 2 to Vue 3:
203

204
- `set` and `del` continue to work but are not strictly necessary in Vue 3
205
- Vue 3's reactivity system handles property addition/deletion automatically
206
- These utilities provide consistency for libraries targeting both versions
207
- Consider using direct property access in Vue 3-only code for better performance
208

209
```typescript
210
// Vue 2 & 3 compatible (recommended for libraries)
211
import { set, del } from "vue-demi";
212
set(obj, 'prop', value);
213
del(obj, 'prop');
214

215
// Vue 3 only (direct manipulation)
216
obj.prop = value;
217
delete obj.prop;
218
```