diff --git a/src/api/composition-api-dependency-injection.md b/src/api/composition-api-dependency-injection.md index b5d5fc79..f67b1192 100644 --- a/src/api/composition-api-dependency-injection.md +++ b/src/api/composition-api-dependency-injection.md @@ -2,59 +2,59 @@ ## provide() {#provide} -Provides a value that can be injected by descendant components. +Fornisce un valore che può essere iniettato dai componenti discendenti. -- **Type** +- **Tipo** ```ts function provide(key: InjectionKey | string, value: T): void ``` -- **Details** +- **Dettagli** - `provide()` takes two arguments: the key, which can be a string or a symbol, and the value to be injected. + `provide()` richiede due argomenti: la chiave, che può essere una stringa o un simbolo, e il valore da iniettare. - When using TypeScript, the key can be a symbol casted as `InjectionKey` - a Vue provided utility type that extends `Symbol`, which can be used to sync the value type between `provide()` and `inject()`. + Quando si utilizza TypeScript, la chiave può essere un simbolo convertito in `InjectionKey` - un tipo di utilità fornito da Vue che estende `Symbol`, il quale può essere utilizzato per sincronizzare il tipo di valore tra `provide()` e `inject()`. - Similar to lifecycle hook registration APIs, `provide()` must be called synchronously during a component's `setup()` phase. + Simile alle API di registrazione dei hook del ciclo di vita, `provide()` deve essere chiamato sincronamente durante la fase `setup()` di un componente. -- **Example** +- **Esempio** ```vue ``` -- **See also** +- **Vedi anche** - [Guide - Provide / Inject](/guide/components/provide-inject) - [Guide - Typing Provide / Inject](/guide/typescript/composition-api#typing-provide-inject) ## inject() {#inject} -Injects a value provided by an ancestor component or the application (via `app.provide()`). +Inietta un valore fornito da un componente ascendente o dall'applicazione (tramite `app.provide()`). -- **Type** +- **Tipo** ```ts - // without default value + // senza valore predefinito function inject(key: InjectionKey | string): T | undefined - // with default value + // con valore predefinito function inject(key: InjectionKey | string, defaultValue: T): T - // with factory + // con factory function inject( key: InjectionKey | string, defaultValue: () => T, @@ -62,47 +62,47 @@ Injects a value provided by an ancestor component or the application (via `app.p ): T ``` -- **Details** +- **Dettagli** - The first argument is the injection key. Vue will walk up the parent chain to locate a provided value with a matching key. If multiple components in the parent chain provides the same key, the one closest to the injecting component will "shadow" those higher up the chain. If no value with matching key was found, `inject()` returns `undefined` unless a default value is provided. + Il primo argomento è la injection key. Vue risalirà la catena dei padri per individuare un valore fornito con una chiave corrispondente. Se più componenti nella catena dei padri forniscono la stessa chiave, quello più vicino alla injection key "oscurerà" quelli più in alto nella catena. Se non viene trovato alcun valore con chiave corrispondente, `inject()` restituirà `undefined`, a meno che non venga fornito un valore predefinito. - The second argument is optional and is the default value to be used when no matching value was found. + Il secondo argomento è opzionale ed è il valore predefinito da utilizzare quando non viene trovato alcun valore corrispondente. - The second argument can also be a factory function that returns values that are expensive to create. In this case, `true` must be passed as the third argument to indicate that the function should be used as a factory instead of the value itself. + Il secondo argomento può anche essere una funzione factory che restituisce valori costosi da creare. In questo caso, il terzo argomento deve essere passato come `true` per indicare che la funzione deve essere utilizzata come una factory anziché il valore stesso. - Similar to lifecycle hook registration APIs, `inject()` must be called synchronously during a component's `setup()` phase. + Simile alle API di registrazione dei lifecycle hook, `inject()` deve essere chiamato in modo sincrono durante la fase `setup()` di un componente. - When using TypeScript, the key can be of type of `InjectionKey` - a Vue-provided utility type that extends `Symbol`, which can be used to sync the value type between `provide()` and `inject()`. + Quando si utilizza TypeScript, la chiave può essere del tipo `InjectionKey` - un tipo di utilità fornito da Vue che estende `Symbol`, che può essere utilizzato per sincronizzare il tipo di valore tra `provide()` e `inject()`. -- **Example** +- **Esempio** - Assuming a parent component has provided values as shown in the previous `provide()` example: + Supponeniamo che un componente padre abbia fornito valori come mostrato nell'esempio precedente di `provide()`: ```vue ``` -- **See also** +- **Vedi anche** - [Guide - Provide / Inject](/guide/components/provide-inject) - [Guide - Typing Provide / Inject](/guide/typescript/composition-api#typing-provide-inject) diff --git a/src/api/composition-api-lifecycle.md b/src/api/composition-api-lifecycle.md index 637c4faa..0aa9a7c6 100644 --- a/src/api/composition-api-lifecycle.md +++ b/src/api/composition-api-lifecycle.md @@ -1,12 +1,12 @@ -# Composition API: Lifecycle Hooks {#composition-api-lifecycle-hooks} +# Composition API: Hook del Ciclo di Vita {#composition-api-lifecycle-hooks} :::info Usage Note -All APIs listed on this page must be called synchronously during the `setup()` phase of a component. See [Guide - Lifecycle Hooks](/guide/essentials/lifecycle) for more details. +Tutte le API elencate in questa pagina devono essere chiamate sincronamente durante la fase `setup()` di un componente. Vedi [Guida - Hook del Ciclo di Vita](/guide/essentials/lifecycle) per maggiori dettagli. ::: ## onMounted() {#onmounted} -Registers a callback to be called after the component has been mounted. +Registra una funzione di callback da eseguire dopo che il componente è stato montato. - **Type** @@ -16,19 +16,19 @@ Registers a callback to be called after the component has been mounted. - **Details** - A component is considered mounted after: + Un componente è considerato montato dopo che: - - All of its synchronous child components have been mounted (does not include async components or components inside `` trees). + - Tutti i suoi componenti figlio sincroni sono stati montati (non include componenti asincroni o componenti all'interno di alberi ``). - - Its own DOM tree has been created and inserted into the parent container. Note it only guarantees that the component's DOM tree is in-document if the application's root container is also in-document. + - L'albero del suo DOM è stato creato e inserito nel contenitore padre. Nota: è garantito solo che l'albero DOM del componente sia nel documento se anche il contenitore nella root dell'applicazione è nel documento. - This hook is typically used for performing side effects that need access to the component's rendered DOM, or for limiting DOM-related code to the client in a [server-rendered application](/guide/scaling-up/ssr). + Questo hook è tipicamente utilizzato per eseguire effetti collaterali che hanno accesso al DOM renderizzato del componente, o per limitare il codice correlato al DOM al client in un'applicazione [renderizzata lato server](/guide/scaling-up/ssr). - **This hook is not called during server-side rendering.** + **Questo hook non viene chiamato durante il rendering lato server.** -- **Example** +- **Esempio** - Accessing an element via template ref: + Accesso ad un elemento tramite ref al template: ```vue @@ -91,27 +91,27 @@ Registers a callback to be called after the component has updated its DOM tree d ## onUnmounted() {#onunmounted} -Registers a callback to be called after the component has been unmounted. +Registra una callback da chiamare dopo che il componente è stato smontato. -- **Type** +- **Tipo** ```ts function onUnmounted(callback: () => void): void ``` -- **Details** +- **Dettagli** - A component is considered unmounted after: + Un componente viene considerato smontato dopo: - - All of its child components have been unmounted. + - Tutti i suoi componenti figli sono stati smontati. - - All of its associated reactive effects (render effect and computed / watchers created during `setup()`) have been stopped. + - Tutti i suoi effetti reattivi associati (effetto di render e computed / watcher creati durante `setup()`) sono stati interrotti. - Use this hook to clean up manually created side effects such as timers, DOM event listeners or server connections. + Utilizzare questo hook per azzerare manualmente gli effetti collaterali creati, come timer, gestori di eventi DOM o connessioni server. - **This hook is not called during server-side rendering.** + **Questo hook non viene chiamato durante il rendering lato server.** -- **Example** +- **Esempio** ```vue ``` -- **See also** [Server-Side Rendering](/guide/scaling-up/ssr) +- **Vedi anche** [Server-Side Rendering](/guide/scaling-up/ssr) diff --git a/src/api/composition-api-setup.md b/src/api/composition-api-setup.md index 44f6b8d2..353db22e 100644 --- a/src/api/composition-api-setup.md +++ b/src/api/composition-api-setup.md @@ -2,16 +2,16 @@ ## Utilizzo Base {#basic-usage} -The `setup()` hook serves as the entry point for Composition API usage in components in the following cases: +L'hook `setup()` funge da punto di ingresso per l'uso della Composition API nei componenti nei seguenti casi: -1. Using Composition API without a build step; -2. Integrating with Composition-API-based code in an Options API component. +1. Uso della Composition API senza una fase di compilazione; +2. Integrazione con codice basato su Composition API in un componente con Options API. :::info Note -If you are using Composition API with Single-File Components, [` ``` - When `toRef` is used with component props, the usual restrictions around mutating the props still apply. Attempting to assign a new value to the ref is equivalent to trying to modify the prop directly and is not allowed. In that scenario you may want to consider using [`computed`](./reactivity-core#computed) with `get` and `set` instead. See the guide to [using `v-model` with components](/guide/components/v-model) for more information. + Quando `toRef` viene utilizzato con le prop del componente, si applicano comunque le solite restrizioni sulla modifica delle prop. Tentare di assegnare un nuovo valore al ref è equivalente a cercare di modificare direttamente la prop e non è consentito. In questo scenario potrebbe essere utile considerare l'uso di [`computed`](./reactivity-core#computed) con `get` e `set` al loro posto. Consulta la guida su [usare `v-model` con i componenti](/guide/components/v-model) per maggiori informazioni. - When using the object property signature, `toRef()` will return a usable ref even if the source property doesn't currently exist. This makes it possible to work with optional properties, which wouldn't be picked up by [`toRefs`](#torefs). + Quando viene utilizzata la firma della proprietà dell'oggetto, `toRef()`restituirà un ref utilizzabile anche se la proprietà di origine non esiste attualmente. Ciò consente di lavorare con proprietà opzionali, che non verrebbero rilevate da [`toRefs`](#torefs). ## toValue() {#tovalue} -Normalizes values / refs / getters to values. This is similar to [unref()](#unref), except that it also normalizes getters. If the argument is a getter, it will be invoked and its return value will be returned. +Normalizza valori / ref / getter in valori. Questo è simile a [unref()](#unref), tranne che normalizza anche i getter. Se l'argomento è un getter, verrà invocato e il suo valore di ritorno verrà restituito. -This can be used in [Composables](/guide/reusability/composables.html) to normalize an argument that can be either a value, a ref, or a getter. +Può essere utilizzato nei [Composables](/guide/reusability/composables.html) per normalizzare un argomento che può essere un valore, un ref o un getter. -- **Type** +- **Tipo** ```ts function toValue(source: T | Ref | (() => T)): T ``` -- **Example** +- **Esempio** ```js toValue(1) // --> 1 @@ -152,18 +152,18 @@ This can be used in [Composables](/guide/reusability/composables.html) to normal toValue(() => 1) // --> 1 ``` - Normalizing arguments in composables: + Normalizzazione degli argomenti nei composables: ```ts import type { MaybeRefOrGetter } from 'vue' function useFeature(id: MaybeRefOrGetter) { watch(() => toValue(id), id => { - // react to id changes + // reagisce ai cambiamenti di id }) } - // this composable supports any of the following: + // questo composable supporta uno qualsiasi dei seguenti: useFeature(1) useFeature(ref(1)) useFeature(() => 1) @@ -171,9 +171,9 @@ This can be used in [Composables](/guide/reusability/composables.html) to normal ## toRefs() {#torefs} -Converts a reactive object to a plain object where each property of the resulting object is a ref pointing to the corresponding property of the original object. Each individual ref is created using [`toRef()`](#toref). +Converte un oggetto reattivo in un oggetto semplice in cui ogni proprietà dell'oggetto risultante è un ref che punta alla corrispondente proprietà dell'oggetto originale. Ciascun ref individuale è creato utilizzando [`toRef()`](#toref). -- **Type** +- **Tipo** ```ts function toRefs( @@ -185,7 +185,7 @@ Converts a reactive object to a plain object where each property of the resultin type ToRef = T extends Ref ? T : Ref ``` -- **Example** +- **Esempio** ```js const state = reactive({ @@ -195,13 +195,13 @@ Converts a reactive object to a plain object where each property of the resultin const stateAsRefs = toRefs(state) /* - Type of stateAsRefs: { + Tipo di stateAsRefs: { foo: Ref, bar: Ref } */ - // The ref and the original property is "linked" + // Il ref e la proprietà originale sono "collegati" state.foo++ console.log(stateAsRefs.foo.value) // 2 @@ -209,7 +209,7 @@ Converts a reactive object to a plain object where each property of the resultin console.log(state.foo) // 3 ``` - `toRefs` is useful when returning a reactive object from a composable function so that the consuming component can destructure/spread the returned object without losing reactivity: + `toRefs` è utile quando si restituisce un oggetto reattivo da una funzione componibile in modo che il componente consumatore possa decostruire/spargere l'oggetto restituito senza perdere la reattività: ```js function useFeatureX() { @@ -218,23 +218,23 @@ Converts a reactive object to a plain object where each property of the resultin bar: 2 }) - // ...logic operating on state + // ...logica che opera sullo state - // convert to refs when returning + // converti in ref quando viene fatto il return return toRefs(state) } - // can destructure without losing reactivity + // può essere destrutturato senza perdere la reattività const { foo, bar } = useFeatureX() ``` - `toRefs` will only generate refs for properties that are enumerable on the source object at call time. To create a ref for a property that may not exist yet, use [`toRef`](#toref) instead. + `toRefs` genererà refs solo per le proprietà che sono enumerabili sull'oggetto sorgente al momento della chiamata. Per creare un ref per una proprietà che potrebbe non ancora esistere, utilizzare [`toRef`](#toref) al suo posto. ## isProxy() {#isproxy} -Checks if an object is a proxy created by [`reactive()`](./reactivity-core#reactive), [`readonly()`](./reactivity-core#readonly), [`shallowReactive()`](./reactivity-advanced#shallowreactive) or [`shallowReadonly()`](./reactivity-advanced#shallowreadonly). +Verifica se un oggetto è un proxy creato da [`reactive()`](./reactivity-core#reactive), [`readonly()`](./reactivity-core#readonly), [`shallowReactive()`](./reactivity-advanced#shallowreactive) o [`shallowReadonly()`](./reactivity-advanced#shallowreadonly). -- **Type** +- **Tipo** ```ts function isProxy(value: unknown): boolean @@ -242,9 +242,9 @@ Checks if an object is a proxy created by [`reactive()`](./reactivity-core#react ## isReactive() {#isreactive} -Checks if an object is a proxy created by [`reactive()`](./reactivity-core#reactive) or [`shallowReactive()`](./reactivity-advanced#shallowreactive). +Verifica se un oggetto è un proxy creato da [`reactive()`](./reactivity-core#reactive) o [`shallowReactive()`](./reactivity-advanced#shallowreactive). -- **Type** +- **Tipo** ```ts function isReactive(value: unknown): boolean @@ -252,11 +252,11 @@ Checks if an object is a proxy created by [`reactive()`](./reactivity-core#react ## isReadonly() {#isreadonly} -Checks whether the passed value is a readonly object. The properties of a readonly object can change, but they can't be assigned directly via the passed object. +Verifica se il valore passato è un oggetto di sola lettura. Le proprietà di un oggetto di sola lettura possono cambiare, ma non possono essere assegnate direttamente tramite l'oggetto passato. -The proxies created by [`readonly()`](./reactivity-core#readonly) and [`shallowReadonly()`](./reactivity-advanced#shallowreadonly) are both considered readonly, as is a [`computed()`](./reactivity-core#computed) ref without a `set` function. +I proxy creati da [`readonly()`](./reactivity-core#readonly) e [`shallowReadonly()`](./reactivity-advanced#shallowreadonly) ono entrambi considerati di sola lettura, così come un ref [`computed()`](./reactivity-core#computed) ref senza la funzione `set`. -- **Type** +- **Tipo** ```ts function isReadonly(value: unknown): boolean