YouTip

The following APIs are widely used in Vue's Options API for managing state, lifecycle, slots, dependency injection, and other functionalities. ### 1. **State Options** | **No.** | **API & Description** | **Example** | | --- | --- | --- | | 1 | **`data`** The component's data option, used to define the component's state. | `data() { return { count: 0 }; }` | | 2 | **`props`** The component's props option, defines data passed from parent to child components. | `props: { msg: String }` | | 3 | **`computed`** Computed properties, used to define derived values based on component state (data, props). | `computed: { doubledCount() { return this.count * 2; } }` | | 4 | **`methods`** The component's methods option, used to define component business logic. | `methods: { increment() { this.count += 1; } }` | | 5 | **`watch`** Watches component's reactive data changes and executes callbacks. | `watch: { count(newVal) { console.log(newVal); } }` | | 6 | **`emits`** Defines custom events that the component can emit. | `emits: ['update']` | | 7 | **`expose`** Explicitly exposes properties or methods for parent component access. | `expose() { return { method } }` | ### 2. **Rendering Options** | **No.** | **API & Description** | **Example** | | --- | --- | --- | | 1 | **`template`** Defines the component's HTML template. | `{{ count }}` | | 2 | **`render`** Uses render function instead of template. | `render(h) { return h('button', { on: { click: this.increment } }, this.count) }` | | 3 | **`compilerOptions`** Configures template compiler options. | `compilerOptions: { delimiters: ['{{', '}}'] }` | | 4 | **`slots`** Defines component slots. | `` | ### 3. **Lifecycle Options** | **No.** | **API & Description** | **Example** | | --- | --- | --- | | 1 | **`beforeCreate`** Called before component instance is created. | `beforeCreate() { console.log('Before Create') }` | | 2 | **`created`** Called after component instance is created, data is already set. | `created() { console.log('Created') }` | | 3 | **`beforeMount`** Called before mounting to DOM, template is already compiled. | `beforeMount() { console.log('Before Mount') }` | | 4 | **`mounted`** Called after component is mounted to DOM. | `mounted() { console.log('Mounted') }` | | 5 | **`beforeUpdate`** Called after data changes but before component re-renders. | `beforeUpdate() { console.log('Before Update') }` | | 6 | **`updated`** Called after component update is complete. | `updated() { console.log('Updated') }` | | 7 | **`beforeUnmount`** Called before component unmounts. | `beforeUnmount() { console.log('Before Unmount') }` | | 8 | **`unmounted`** Called after component unmounts. | `unmounted() { console.log('Unmounted') }` | | 9 | **`errorCaptured`** Called when a child component error is captured. | `errorCaptured(err, vm, info) { console.error(err) }` | | 10 | **`renderTracked`** Called when reactive data changes and re-renders. | `renderTracked(event) { console.log('Render Tracked') }` | | 11 | **`renderTriggered`** Called when reactive data triggers re-render. | `renderTriggered(event) { console.log('Render Triggered') }` | | 12 | **`activated`** Called when component is activated (only for `keep-alive` components). | `activated() { console.log('Activated') }` | | 13 | **`deactivated`** Called when component is deactivated (only for `keep-alive` components). | `deactivated() { console.log('Deactivated') }` | | 14 | **`serverPrefetch`** Hook for fetching data during server-side rendering. | `serverPrefetch() { return fetchData() }` | ### 4. **Composition Options** | **No.** | **API & Description** | **Example** | | --- | --- | --- | | 1 | **`provide`** Provides dependencies to descendant components. | `provide('key', 'value')` | | 2 | **`inject`** Injects dependencies from ancestor components. | `inject('key')` | | 3 | **`mixins`** Introduces external mixins for logic reuse. | `mixins: ` | | 4 | **`extends`** Component extends another component's options. | `extends: MyComponent` | ### 5. **Miscellaneous** | **No.** | **API & Description** | **Example** | | --- | --- | --- | | 1 | **`name`** Component name, usually used for debugging. | `name: 'MyComponent'` | | 2 | **`inheritAttrs`** Controls whether parent component attributes (attrs) are automatically inherited to the root element. | `inheritAttrs: false` | | 3 | **`components`** Registers local components for use in the current component. | `components: { LocalComponent }` | | 4 | **`directives`** Registers local directives for use in the current component. | `directives: { focus: FocusDirective }` | ### 6. **Component Instance** | **No.** | **API & Description** | **Example** | | --- | --- | --- | | 1 | **`$data`** Gets the component's data object. | `this.$data.count` | | 2 | **`$props`** Gets the component's props object. | `this.$props.msg` | | 3 | **`$el`** Gets the DOM element where the component is mounted. | `this.$el` | | 4 | **`$options`** Gets