{"dataset":{"id":"00000000-0000-0000-0000-000000000021","slug":"vue-best-practices","name":"Vue best practices","description":"Source-linked guidance on Vue 3 fundamentals: reactivity, components and props, the Composition API, computed properties and watchers, and lifecycle hooks. Scoped to Vue 3; not a Vue 2 migration corpus.","visibility":"public","version":1,"documentCount":5,"publisher":"Koskamo editorial","license":"Original summaries; linked sources retain their own terms.","reviewedAt":"2026-10-04T00:00:00.000Z","readOnly":true,"createdAt":"2026-10-04T00:00:00.000Z","updatedAt":"2026-10-04T00:00:00.000Z"},"total":5,"documents":[{"title":"Lifecycle hooks: onMounted and synchronous registration","sourceUrl":"https://vuejs.org/guide/essentials/lifecycle.html","text":"Each Vue component instance goes through a series of initialization steps when created — setting up data observation, compiling the template, mounting the instance to the DOM, and updating the DOM when data changes — and along the way runs functions called lifecycle hooks that let you add your own code at specific stages. The mounted hook, registered as onMounted() in <script setup>, runs after the component has finished the initial rendering and created the DOM nodes; the most commonly used hooks are onMounted, onUpdated, and onUnmounted (mounted, updated, and unmounted in the Options API). All lifecycle hooks are called with their this context pointing to the current active instance, so avoid arrow functions when declaring hooks or you will not be able to reach the component instance through this. Vue automatically associates a registered onMounted callback with the current active component instance, which requires these hooks to be registered synchronously during component setup — registering inside setTimeout will not work — though the call may live in an external function as long as the call stack is synchronous and originates from within setup(). Scope: Vue 3. Reviewed October 4, 2026.","id":"vue-best-practices:Lifecycle hooks: onMounted and synchronous registration","version":1,"createdAt":"2026-10-04T00:00:00.000Z","updatedAt":"2026-10-04T00:00:00.000Z"},{"title":"Computed properties for derived state, watchers for side effects","sourceUrl":"https://vuejs.org/guide/essentials/computed.html","text":"In-template expressions are meant for simple operations; for complex logic involving reactive data, declare a computed property — via the computed option in the Options API, or computed() returning a computed ref in <script setup> — and data-bind to it in the template like a normal property. Unlike invoking a method, which always runs the function on every re-render, a computed property is cached based on its reactive dependencies and only re-evaluates when one of them changes; a computed reading Date.now() will never update, because Date.now() is not a reactive dependency. In cases where you do not want caching, use a method. Two best practices: computed getters should perform pure computation and stay free of side effects — do not mutate other state, make async requests, or mutate the DOM inside a getter — and a computed return value is derived state, a temporary snapshot, so treat it as read-only and never mutate it. Side effects in reaction to state changes belong in watchers, which the guide covers next. Scope: Vue 3. Reviewed October 4, 2026.","id":"vue-best-practices:Computed properties for derived state, watchers for side effects","version":1,"createdAt":"2026-10-04T00:00:00.000Z","updatedAt":"2026-10-04T00:00:00.000Z"},{"title":"Composition API: function-based component logic","sourceUrl":"https://vuejs.org/guide/extras/composition-api-faq.html","text":"The Composition API is a set of APIs for authoring Vue components with imported functions instead of declaring options. It is an umbrella term covering the Reactivity API — ref() and reactive() — for directly creating reactive state, computed state, and watchers; lifecycle hooks such as onMounted() and onUnmounted() for hooking into the component lifecycle programmatically; and provide() and inject() for dependency injection. It is a built-in feature of Vue 3 and Vue 2.7; for older Vue 2 versions, use the officially maintained @vue/composition-api plugin. In Vue 3 it is primarily used together with the <script setup> syntax in single-file components. Despite an API style based on function composition, it is not functional programming: it builds on Vue's mutable, fine-grained reactivity paradigm, whereas functional programming emphasizes immutability. Its primary advantage is clean, efficient logic reuse through composable functions, which solves the drawbacks of mixins, the primary logic-reuse mechanism of the Options API, and has enabled community projects such as VueUse. Scope: Vue 3. Reviewed October 4, 2026.","id":"vue-best-practices:Composition API: function-based component logic","version":1,"createdAt":"2026-10-04T00:00:00.000Z","updatedAt":"2026-10-04T00:00:00.000Z"},{"title":"Components and props: one-way data flow","sourceUrl":"https://vuejs.org/guide/components/props.html","text":"Vue components require explicit props declaration so Vue knows which values passed in are props and which should be treated as fallthrough attributes. In single-file components using <script setup>, declare props with the defineProps() macro — an array of strings, or the object syntax for validation, where each key is the prop name and the value is the constructor function of the expected type; the same props options API is shared with the props option in non-<script setup> components, where setup() receives props as its first argument. All props form a one-way-down binding: when the parent property updates it flows down to the child, but not the other way around, and every parent update refreshes all of the child's props with the latest value. Never mutate a prop inside a child component — props are readonly and Vue warns in the console. If a prop only supplies an initial value, define a local data property or ref initialized from it; that local state is then disconnected from future prop updates. Scope: Vue 3. Reviewed October 4, 2026.","id":"vue-best-practices:Components and props: one-way data flow","version":1,"createdAt":"2026-10-04T00:00:00.000Z","updatedAt":"2026-10-04T00:00:00.000Z"},{"title":"Declaring reactive state with data and ref()","sourceUrl":"https://vuejs.org/guide/essentials/reactivity-fundamentals.html","text":"With the Options API, declare reactive state with the data option, whose value should be a function returning an object; Vue wraps the returned object in its reactivity system and proxies its top-level properties on the component instance, so this in methods and lifecycle hooks reaches them. Those instance properties are only added when the instance is first created, so declare every key upfront, using null or undefined as a placeholder when a value is not yet available — properties added to this later will not trigger reactive updates. Vue 3 makes data reactive with JavaScript Proxies, so after assignment this.someObject is a reactive proxy of the original object, and you should always access reactive state as a property of this. In the Composition API, the recommended way to declare reactive state is ref(), which wraps its argument in a ref object with a .value property for reads and writes in JavaScript; refs are automatically unwrapped inside templates, with a few caveats, and can be mutated directly in event handlers. Avoid top-level data property names starting with $ or _, which Vue reserves. Scope: Vue 3. Reviewed October 4, 2026.","id":"vue-best-practices:Declaring reactive state with data and ref()","version":1,"createdAt":"2026-10-04T00:00:00.000Z","updatedAt":"2026-10-04T00:00:00.000Z"}]}