0
# Constructor and Instance API
1

2
Vue 2-style constructor interface providing complete compatibility with Vue 2 component instances, lifecycle hooks, and instance methods.
3

4
## Capabilities
5

6
### Vue Constructor
7

8
Creates Vue 2-style component instances with full compatibility for legacy application code.
9

10
```javascript { .api }
11
/**
12
 * Vue 2-style constructor for creating component instances
13
 * @param options - Component options object
14
 * @returns Legacy component instance with Vue 2 API
15
 */
16
new Vue(options?: ComponentOptions): LegacyPublicInstance;
17

18
interface ComponentOptions {
19
  /** Reactive data factory function */
20
  data?(): Record<string, any>;
21
  /** Component props definition */
22
  props?: string[] | Record<string, any>;
23
  /** Computed properties */
24
  computed?: Record<string, any>;
25
  /** Component methods */
26
  methods?: Record<string, Function>;
27
  /** Watchers for reactive data */
28
  watch?: Record<string, any>;
29
  /** Template string for rendering */
30
  template?: string;
31
  /** Render function */
32
  render?: Function;
33
  /** Per-component compatibility configuration */
34
  compatConfig?: CompatConfig;
35
  
36
  // Lifecycle hooks
37
  created?(): void;
38
  mounted?(): void;
39
  updated?(): void;
40
  destroyed?(): void;
41
  beforeDestroy?(): void;
42
}
43
```
44

45
**Usage Example:**
46

47
```javascript
48
import Vue from "@vue/compat";
49

50
const app = new Vue({
51
  data() {
52
    return {
53
      count: 0,
54
      message: "Hello World"
55
    };
56
  },
57
  computed: {
58
    doubleCount() {
59
      return this.count * 2;
60
    }
61
  },
62
  methods: {
63
    increment() {
64
      this.count++;
65
    }
66
  },
67
  template: `
68
    <div>
69
      <p>{{ message }}</p>
70
      <p>Count: {{ count }} (Double: {{ doubleCount }})</p>
71
      <button @click="increment">Increment</button>
72
    </div>
73
  `
74
});
75

76
app.$mount("#app");
77
```
78

79
### Legacy Public Instance
80

81
Vue 2 component instance with all legacy methods and properties.
82

83
```javascript { .api }
84
interface LegacyPublicInstance extends ComponentPublicInstance {
85
  /** Reactively set a property on target object */
86
  $set<T, K extends keyof T>(target: T, key: K, value: T[K]): void;
87
  /** Reactively delete a property from target object */
88
  $delete<T, K extends keyof T>(target: T, key: K): void;
89
  /** Mount the component to a DOM element */
90
  $mount(el?: string | Element): this;
91
  /** Destroy the component instance */
92
  $destroy(): void;
93
  /** Legacy scoped slots object */
94
  $scopedSlots: Slots;
95
  /** Add event listener */
96
  $on(event: string | string[], fn: Function): this;
97
  /** Add one-time event listener */
98
  $once(event: string, fn: Function): this;
99
  /** Remove event listener */
100
  $off(event?: string | string[], fn?: Function): this;
101
  /** Array of child component instances */
102
  $children: LegacyPublicInstance[];
103
  /** Object containing event listeners */
104
  $listeners: Record<string, Function | Function[]>;
105
}
106
```
107

108
### Instance Methods
109

110
#### $set Method
111

112
Reactively sets a property on a target object, triggering reactivity updates.
113

114
```javascript { .api }
115
/**
116
 * Reactively set a property on target object
117
 * @param target - Target object to modify
118
 * @param key - Property key to set
119
 * @param value - Value to assign to the property
120
 */
121
$set<T, K extends keyof T>(target: T, key: K, value: T[K]): void;
122
```
123

124
**Usage Example:**
125

126
```javascript
127
// In a component method
128
this.$set(this.user, 'newProperty', 'newValue');
129
```
130

131
#### $delete Method
132

133
Reactively deletes a property from a target object.
134

135
```javascript { .api }
136
/**
137
 * Reactively delete a property from target object
138
 * @param target - Target object to modify
139
 * @param key - Property key to delete
140
 */
141
$delete<T, K extends keyof T>(target: T, key: K): void;
142
```
143

144
#### $mount Method
145

146
Mounts the component to a DOM element.
147

148
```javascript { .api }
149
/**
150
 * Mount the component to a DOM element
151
 * @param el - CSS selector string or DOM element
152
 * @returns The component instance for chaining
153
 */
154
$mount(el?: string | Element): this;
155
```
156

157
#### $destroy Method
158

159
Destroys the component instance and cleans up all watchers and event listeners.
160

161
```javascript { .api }
162
/**
163
 * Destroy the component instance
164
 * Note: In compat mode, only supported on root instance
165
 */
166
$destroy(): void;
167
```
168

169
### Event System Methods
170

171
#### $on Method
172

173
Adds event listeners to the component instance.
174

175
```javascript { .api }
176
/**
177
 * Add event listener to component instance
178
 * @param event - Event name or array of event names
179
 * @param fn - Callback function
180
 * @returns The component instance for chaining
181
 */
182
$on(event: string | string[], fn: Function): this;
183
```
184

185
#### $once Method
186

187
Adds a one-time event listener.
188

189
```javascript { .api }
190
/**
191
 * Add one-time event listener
192
 * @param event - Event name
193
 * @param fn - Callback function
194
 * @returns The component instance for chaining
195
 */
196
$once(event: string, fn: Function): this;
197
```
198

199
#### $off Method
200

201
Removes event listeners from the component instance.
202

203
```javascript { .api }
204
/**
205
 * Remove event listener from component instance
206
 * @param event - Optional event name to remove
207
 * @param fn - Optional specific callback to remove
208
 * @returns The component instance for chaining
209
 */
210
$off(event?: string | string[], fn?: Function): this;
211
```
212

213
### Legacy Properties
214

215
#### $children Property
216

217
Array of direct child component instances.
218

219
```javascript { .api }
220
/**
221
 * Array of child component instances
222
 * @deprecated Use refs or provide/inject instead
223
 */
224
$children: LegacyPublicInstance[];
225
```
226

227
#### $listeners Property
228

229
Object containing parent component's event listeners.
230

231
```javascript { .api }
232
/**
233
 * Object containing event listeners from parent
234
 * @deprecated Use emits and v-on in Vue 3
235
 */
236
$listeners: Record<string, Function | Function[]>;
237
```
238

239
#### $scopedSlots Property
240

241
Legacy scoped slots object for backward compatibility.
242

243
```javascript { .api }
244
/**
245
 * Legacy scoped slots object
246
 * @deprecated Use $slots in Vue 3
247
 */
248
$scopedSlots: Slots;
249
```
250

251
## Lifecycle Hooks
252

253
Vue Compat supports both Vue 2 and Vue 3 lifecycle hooks:
254

255
### Vue 2 Lifecycle Hooks
256

257
```javascript { .api }
258
interface ComponentOptions {
259
  /** Called after instance is created */
260
  created?(): void;
261
  /** Called after component is mounted to DOM */
262
  mounted?(): void;
263
  /** Called after component data changes */
264
  updated?(): void;
265
  /** Called before component is destroyed */
266
  beforeDestroy?(): void;
267
  /** Called after component is destroyed */
268
  destroyed?(): void;
269
}
270
```
271

272
### Per-Component Configuration
273

274
Each component can override global compatibility settings:
275

276
```javascript { .api }
277
interface ComponentOptions {
278
  /** Per-component compatibility configuration */
279
  compatConfig?: CompatConfig;
280
}
281
```
282

283
**Usage Example:**
284

285
```javascript
286
export default {
287
  compatConfig: {
288
    MODE: 3, // Use Vue 3 mode for this component
289
    INSTANCE_LISTENERS: false, // Disable $listeners warning
290
  },
291
  data() {
292
    return { count: 0 };
293
  },
294
  created() {
295
    console.log("Component created");
296
  },
297
  mounted() {
298
    console.log("Component mounted");
299
  },
300
  beforeDestroy() {
301
    console.log("Component will be destroyed");
302
  }
303
};
304
```