From df6f169b5864ab71b080732379c0bfdefa65700b Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Tue, 1 Jun 2021 22:16:33 +0900 Subject: [PATCH 01/12] fix: Change the options object: remove the retryWhen, maxRetries (vuejs/docs-next/commit/37ba7d2) --- src/api/global-api.md | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/api/global-api.md b/src/api/global-api.md index 3a056c4e..5de02359 100644 --- a/src/api/global-api.md +++ b/src/api/global-api.md @@ -192,12 +192,16 @@ const AsyncComp = defineAsyncComponent({ // The error component will be displayed if a timeout is // provided and exceeded. Default: Infinity. timeout: 3000, - // A function that returns a boolean indicating whether the async component should retry when the loader promise rejects - retryWhen: error => error.code !== 404, - // Maximum allowed retries number - maxRetries: 3, // Defining if component is suspensible - suspensible: false + suspensible: false, + /** + * + * @param {*} error Error message object + * @param {*} retry A function that indicating whether the async component should retry when the loader promise rejects + * @param {*} fail End of failure + * @param {*} attempts Maximum allowed retries number + */ + onError(error, retry, fail, attempts) {}, }) ``` From 3b6794379edcbeb97c780bd2b4233ef738bdebc9 Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Tue, 1 Jun 2021 22:17:31 +0900 Subject: [PATCH 02/12] fix: adding examples and modifying parameter descriptions (vuejs/docs-next/commit/e468813) --- src/api/global-api.md | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/src/api/global-api.md b/src/api/global-api.md index 5de02359..6e666fe0 100644 --- a/src/api/global-api.md +++ b/src/api/global-api.md @@ -192,7 +192,7 @@ const AsyncComp = defineAsyncComponent({ // The error component will be displayed if a timeout is // provided and exceeded. Default: Infinity. timeout: 3000, - // Defining if component is suspensible + // Defining if component is suspensible. Default: true. suspensible: false, /** * @@ -201,7 +201,16 @@ const AsyncComp = defineAsyncComponent({ * @param {*} fail End of failure * @param {*} attempts Maximum allowed retries number */ - onError(error, retry, fail, attempts) {}, + onError(error, retry, fail, attempts) { + if (error.message.match(/fetch/) && attempts <= 3) { + // retry on fetch errors, 3 max attempts + retry() + } else { + // Note that retry/fail are like resolve/reject of a promise: + // one of them must be called for the error handling to continue. + fail() + } + }, }) ``` @@ -233,9 +242,9 @@ render() { ### Arguments -Accepts one argument: `component` +Accepts one argument: `name` -#### component +#### name - **Type:** `String` From 3a614437a812fb041a7d6917ec79b0516286e932 Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Tue, 1 Jun 2021 22:19:07 +0900 Subject: [PATCH 03/12] fix: fix sidebar depth for Global API (vuejs/docs-next/commit/6ba05d1) --- src/api/global-api.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/api/global-api.md b/src/api/global-api.md index 6e666fe0..32c92c36 100644 --- a/src/api/global-api.md +++ b/src/api/global-api.md @@ -1,3 +1,7 @@ +--- +sidebarDepth: 1 +--- + # グローバル API ## createApp From 2a0d5ea4269ab56b5d0d773db30720c6f2b8d006 Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Tue, 1 Jun 2021 22:20:17 +0900 Subject: [PATCH 04/12] fix: change the language on some code blocks to match the code (vuejs/docs-next/commit/0391e2e) --- src/api/global-api.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/api/global-api.md b/src/api/global-api.md index 32c92c36..7d8c0f08 100644 --- a/src/api/global-api.md +++ b/src/api/global-api.md @@ -403,7 +403,7 @@ For example, for runtime-dom, HostNode would be the DOM Custom renderers can pass in the platform specific types like this: -```js +```ts import { createRenderer } from 'vue' const { render, createApp } = createRenderer({ patchProp, From 26f10a8658e713842c34988d18f67a4f17a21932 Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Tue, 1 Jun 2021 22:21:14 +0900 Subject: [PATCH 05/12] feature: add an API entry for mergeProps (vuejs/docs-next/commit/7198ad4) --- src/api/global-api.md | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/src/api/global-api.md b/src/api/global-api.md index 7d8c0f08..ee6db729 100644 --- a/src/api/global-api.md +++ b/src/api/global-api.md @@ -451,3 +451,26 @@ const app = createApp({ ``` **See also**: [`$nextTick` instance method](instance-methods.html#nexttick) + +## mergeProps + +Takes multiple objects containing VNode props and merges them into a single object. A newly created object is returned, the objects passed as arguments are not modified. + +Any number of objects can be passed, with properties from later arguments taking precedence. Event listeners are handled specially, as are `class` and `style`, with the values of these properties being merged rather than overwritten. + +```js +import { h, mergeProps } from 'vue' + +export default { + inheritAttrs: false, + + render() { + const props = mergeProps({ + // The class will be merged with any class from $attrs + class: 'active' + }, this.$attrs) + + return h('div', props) + } +} +``` From 2ca9bbfd71f786c362a139307599afe9ea0e02aa Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Tue, 1 Jun 2021 22:22:05 +0900 Subject: [PATCH 06/12] docs: add useCssModule (vuejs/docs-next/commit/6575898) --- src/api/global-api.md | 44 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) diff --git a/src/api/global-api.md b/src/api/global-api.md index ee6db729..7b558cf4 100644 --- a/src/api/global-api.md +++ b/src/api/global-api.md @@ -474,3 +474,47 @@ export default { } } ``` + +## useCssModule + +:::warning +`useCssModule` can only be used within `render` or `setup` functions. +::: + +Allows CSS modules to be accessed within the [`setup`](/api/composition-api.html#setup) function of a [single-file component](/guide/single-file-component.html): + +```vue + + + +``` + +For more information about using CSS modules, see [Vue Loader - CSS Modules](https://vue-loader.vuejs.org/guide/css-modules.html). + +### Arguments + +Accepts one argument: `name` + +#### name + +- **Type:** `String` + +- **Details:** + + The name of the CSS module. Defaults to `'$style'`. From 6188dc7b9e900d99ea96cbc7bcb0d023c788d6da Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Tue, 1 Jun 2021 22:26:29 +0900 Subject: [PATCH 07/12] docs: reduce the reliance on the global Vue in API Reference examples (vuejs/docs-next/commit/35f5b52) --- src/api/global-api.md | 26 ++++++++++++++++++++------ 1 file changed, 20 insertions(+), 6 deletions(-) diff --git a/src/api/global-api.md b/src/api/global-api.md index 7b558cf4..14f5c141 100644 --- a/src/api/global-api.md +++ b/src/api/global-api.md @@ -4,12 +4,26 @@ sidebarDepth: 1 # グローバル API +If you're using a CDN build then the functions of the global API are accessible via the global `Vue` object. e.g.: + +```js +const { createApp, h, nextTick } = Vue +``` + +If you're using ES modules then they can be imported directly: + +```js +import { createApp, h, nextTick } from 'vue' +``` + +Global functions that handle reactivity, such as `reactive` and `ref`, are documented separately. See [Reactivity API](/api/reactivity-api.html) for those functions. + ## createApp Returns an application instance which provides an application context. The entire component tree mounted by the application instance share the same context. ```js -const app = Vue.createApp({}) +const app = createApp({}) ``` You can chain other methods after `createApp`, they can be found in [Application API](./application-api.html) @@ -19,7 +33,7 @@ You can chain other methods after `createApp`, they can be found in [Application The function receives a root component options object as a first parameter: ```js -const app = Vue.createApp({ +const app = createApp({ data() { return { ... @@ -34,7 +48,7 @@ const app = Vue.createApp({ With the second parameter, we can pass root props to the application: ```js -const app = Vue.createApp( +const app = createApp( { props: ['username'] }, @@ -68,7 +82,7 @@ Returns a returns "virtual node", usually abbreviated to **VNode**: a plain obje ```js render() { - return Vue.h('h1', {}, 'Some title') + return h('h1', {}, 'Some title') } ``` @@ -231,7 +245,7 @@ Allows resolving a `component` by its name, if it is available in the current ap Returns a `Component` or `undefined` when not found. ```js -const app = Vue.createApp({}) +const app = createApp({}) app.component('MyComponent', { /* ... */ }) @@ -296,7 +310,7 @@ Allows resolving a `directive` by its name, if it is available in the current ap Returns a `Directive` or `undefined` when not found. ```js -const app = Vue.createApp({}) +const app = createApp({}) app.directive('highlight', {}) ``` From 061abb97f291b6ab919c093d734d65deafb2700f Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Tue, 1 Jun 2021 22:27:32 +0900 Subject: [PATCH 08/12] fix resolveComponent return type error (vuejs/docs-next/commit/174a439) --- src/api/global-api.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/api/global-api.md b/src/api/global-api.md index 14f5c141..547d2772 100644 --- a/src/api/global-api.md +++ b/src/api/global-api.md @@ -242,7 +242,7 @@ const AsyncComp = defineAsyncComponent({ Allows resolving a `component` by its name, if it is available in the current application instance. -Returns a `Component` or `undefined` when not found. +Returns a `Component` or the argument `name` when not found. ```js const app = createApp({}) From 1899563d5091310b70ce87cc87f362d320b8e0d0 Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Tue, 1 Jun 2021 22:28:42 +0900 Subject: [PATCH 09/12] docs: add Vue.version and app.version to the API reference (vuejs/docs-next/commit/4a437b6) --- src/api/global-api.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/src/api/global-api.md b/src/api/global-api.md index 547d2772..c0d6c223 100644 --- a/src/api/global-api.md +++ b/src/api/global-api.md @@ -532,3 +532,21 @@ Accepts one argument: `name` - **Details:** The name of the CSS module. Defaults to `'$style'`. + +## version + +Provides the installed version of Vue as a string. + +```js +const version = Number(Vue.version.split('.')[0]) + +if (version === 3) { + // Vue 3 +} else if (version === 2) { + // Vue 2 +} else { + // Unsupported versions of Vue +} +``` + +**See also**: [Application API - version](/api/application-api.html#version) From 1b6c74151c19655ed21be4d32b2f8ac6ff4c3af5 Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Tue, 1 Jun 2021 22:29:40 +0900 Subject: [PATCH 10/12] fix: remove duplicate word 'returns' from h description (vuejs/docs-next/commit/9449bc4) --- src/api/global-api.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/api/global-api.md b/src/api/global-api.md index c0d6c223..dfc0e0e1 100644 --- a/src/api/global-api.md +++ b/src/api/global-api.md @@ -78,7 +78,7 @@ export type CreateAppFunction = ( ## h -Returns a returns "virtual node", usually abbreviated to **VNode**: a plain object which contains information describing to Vue what kind of node it should render on the page, including descriptions of any child nodes. It is intended for manually written [render functions](../guide/render-function.md): +Returns a "virtual node", usually abbreviated to **VNode**: a plain object which contains information describing to Vue what kind of node it should render on the page, including descriptions of any child nodes. It is intended for manually written [render functions](../guide/render-function.md): ```js render() { From e1355b811badfc231ede71e20d0890dbe6679f10 Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Tue, 1 Jun 2021 22:30:37 +0900 Subject: [PATCH 11/12] Update global-api.md (vuejs/docs-next/commit/8525c7a) --- src/api/global-api.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/api/global-api.md b/src/api/global-api.md index dfc0e0e1..b14d93c8 100644 --- a/src/api/global-api.md +++ b/src/api/global-api.md @@ -96,7 +96,7 @@ Accepts three arguments: `type`, `props` and `children` - **Details:** - An HTML tag name, a component or an async component. Using function returning null would render a comment. This parameter is required + An HTML tag name, a component, an async component, or a functional component. Using function returning null would render a comment. This parameter is required #### props From 543155fbc021e78f46fc6fed317203cc3560ed70 Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Fri, 4 Jun 2021 20:25:32 +0900 Subject: [PATCH 12/12] docs: translate api reference > global api --- src/api/global-api.md | 228 +++++++++++++++++++++--------------------- 1 file changed, 114 insertions(+), 114 deletions(-) diff --git a/src/api/global-api.md b/src/api/global-api.md index b14d93c8..c804ba4b 100644 --- a/src/api/global-api.md +++ b/src/api/global-api.md @@ -4,33 +4,33 @@ sidebarDepth: 1 # グローバル API -If you're using a CDN build then the functions of the global API are accessible via the global `Vue` object. e.g.: +CDN ビルドを使っている場合、グローバル API の関数はグローバルな `Vue` オブジェクトを介してアクセスできます。例えば: ```js const { createApp, h, nextTick } = Vue ``` -If you're using ES modules then they can be imported directly: +ES モジュールを使っている場合、それらは直接インポートできます: ```js import { createApp, h, nextTick } from 'vue' ``` -Global functions that handle reactivity, such as `reactive` and `ref`, are documented separately. See [Reactivity API](/api/reactivity-api.html) for those functions. +`reactive` や `ref` など、リアクティビティを扱うグローバル関数は、別途ドキュメントがあります。それらの関数は [リアクティビティ API](/api/reactivity-api.html) を参照してください。 ## createApp -Returns an application instance which provides an application context. The entire component tree mounted by the application instance share the same context. +アプリケーションのコンテキストを提供するアプリケーションインスタンスを返します。このアプリケーションインスタンスがマウントしているコンポーネントツリー全体は、同じコンテキストを共有します。 ```js const app = createApp({}) ``` -You can chain other methods after `createApp`, they can be found in [Application API](./application-api.html) +`createApp` の後に他のメソッドをチェインできます。それらは [アプリケーション API](./application-api.html) に記載されています。 -### Arguments +### 引数 -The function receives a root component options object as a first parameter: +この関数は最初のパラメータとしてルートコンポーネントのオプションオブジェクトを受け取ります: ```js const app = createApp({ @@ -45,7 +45,7 @@ const app = createApp({ }) ``` -With the second parameter, we can pass root props to the application: +2 番目のパラメータでは、そのアプリケーションのルートプロパティを渡せます: ```js const app = createApp( @@ -63,7 +63,7 @@ const app = createApp( ``` -### Typing +### 型定義 ```ts interface Data { @@ -78,7 +78,7 @@ export type CreateAppFunction = ( ## h -Returns a "virtual node", usually abbreviated to **VNode**: a plain object which contains information describing to Vue what kind of node it should render on the page, including descriptions of any child nodes. It is intended for manually written [render functions](../guide/render-function.md): +一般的に **VNode** と略される「仮想ノード」を返します: これは Vue がページ上でレンダリングするノードの種類を記述した情報を含むプレーンオブジェクトで、子ノードの記述も含まれています。これは手動で書かれた [Render 関数](../guide/render-function.md) のためのものです: ```js render() { @@ -86,33 +86,33 @@ render() { } ``` -### Arguments +### 引数 -Accepts three arguments: `type`, `props` and `children` +3 つの引数を受け取ります: `type` と `props` と `children` #### type -- **Type:** `String | Object | Function` +- **型:** `String | Object | Function` -- **Details:** +- **詳細:** - An HTML tag name, a component, an async component, or a functional component. Using function returning null would render a comment. This parameter is required + HTML タグ名、コンポーネント、非同期コンポーネント、または関数型コンポーネント。 null を返す関数を使うと、コメントがレンダリングされます。このパラメータは必須です。 #### props -- **Type:** `Object` +- **型:** `Object` -- **Details:** +- **詳細:** - An object corresponding to the attributes, props and events we would use in a template. Optional + テンプレートで使う属性、プロパティ、イベントに対応するオブジェクトです。省略可能です。 #### children -- **Type:** `String | Array | Object` +- **型:** `String | Array | Object` -- **Details:** +- **詳細:** - Children VNodes, built using `h()`, or using strings to get "text VNodes" or an object with slots. Optional + `h()` を使って構築された子供の VNode、または文字列をつかった「テキスト VNode」、もしくはスロットを持つオブジェクトです。省略可能です。 ```js h('div', {}, [ @@ -126,11 +126,11 @@ Accepts three arguments: `type`, `props` and `children` ## defineComponent -Implementation-wise `defineComponent` does nothing but return the object passed to it. However, in terms of typing, the returned value has a synthetic type of a constructor for manual render function, TSX and IDE tooling support. +実装的には `defineComponent` なにもせず、渡されたオブジェクトを返します。しかし型付けの面において、返り値は手動の Render 関数、TSX、IDE ツールがサポートするためのコンストラクタの合成型を持っています。 -### Arguments +### 引数 -An object with component options +コンポーネントのオプションを持つオブジェクトです。 ```js import { defineComponent } from 'vue' @@ -147,7 +147,7 @@ const MyComponent = defineComponent({ }) ``` -Or a `setup` function, function name will be used as component name +または `setup` 関数、関数名はコンポーネント名として使われます。 ```js import { defineComponent, ref } from 'vue' @@ -160,11 +160,11 @@ const HelloWorld = defineComponent(function HelloWorld() { ## defineAsyncComponent -Creates an async component that will be loaded only when it's necessary. +必要なときにだけ読み込まれる非同期コンポーネントを作成します。 -### Arguments +### 引数 -For basic usage, `defineAsyncComponent` can accept a factory function returning a `Promise`. Promise's `resolve` callback should be called when you have retrieved your component definition from the server. You can also call `reject(reason)` to indicate the load has failed. +基本的な使い方として、 `defineAsyncComponent` は `Promise` を返すファクトリ関数を受け取れます。 Promise の `resolve` コールバックは、サーバからコンポーネントの定義を取得したときに呼び出される必要があります。また、読み込みに失敗したことを示すために `reject(reason)` を呼び出すこともできます。 ```js import { defineAsyncComponent } from 'vue' @@ -176,7 +176,7 @@ const AsyncComp = defineAsyncComponent(() => app.component('async-component', AsyncComp) ``` -When using [local registration](../guide/component-registration.html#local-registration), you can also directly provide a function that returns a `Promise`: +[ローカル登録](../guide/component-registration.html#ローカル登録) を使っている場合は、`Promise` を返す関数を直接指定できます: ```js import { createApp, defineAsyncComponent } from 'vue' @@ -191,58 +191,58 @@ createApp({ }) ``` -For advanced usage, `defineAsyncComponent` can accept an object: +上級者向けには、 `defineAsyncComponent` にオブジェクトを受け取ることもできます: -The `defineAsyncComponent` method can also return an object of the following format: +`defineAsyncComponent` メソッドは、次のような形式のオブジェクトを返すこともできます: ```js import { defineAsyncComponent } from 'vue' const AsyncComp = defineAsyncComponent({ - // The factory function + // ファクトリ関数 loader: () => import('./Foo.vue') - // A component to use while the async component is loading + // 非同期コンポーネントが読み込み中に使うコンポーネント loadingComponent: LoadingComponent, - // A component to use if the load fails + // 読み込みが失敗したときに使うコンポーネント errorComponent: ErrorComponent, - // Delay before showing the loading component. Default: 200ms. + // 読み込み中のコンポーネントを表示するまでの時間。デフォルト: 200ms. delay: 200, - // The error component will be displayed if a timeout is - // provided and exceeded. Default: Infinity. + // タイムアウトが指定されていて、それを超えた場合、 + // エラーコンポーネントが表示されます。デフォルト: Infinity. timeout: 3000, - // Defining if component is suspensible. Default: true. + // コンポーネントがサスペンド可能かの定義。デフォルト: true. suspensible: false, /** * - * @param {*} error Error message object - * @param {*} retry A function that indicating whether the async component should retry when the loader promise rejects - * @param {*} fail End of failure - * @param {*} attempts Maximum allowed retries number + * @param {*} error エラーメッセージのオブジェクト + * @param {*} retry 読み込みを待つ Promise がリジェクトされたときに、非同期コンポーネントが再試行するかを示す関数 + * @param {*} fail 失敗時の後処理 + * @param {*} attempts 再試行する最大数 */ onError(error, retry, fail, attempts) { if (error.message.match(/fetch/) && attempts <= 3) { - // retry on fetch errors, 3 max attempts + // fetch のエラーを 3 回まで再試行 retry() } else { - // Note that retry/fail are like resolve/reject of a promise: - // one of them must be called for the error handling to continue. + // retry と fail は Promise の resolve と reject のようなものです: + // エラー処理を継続するために、これらのうち 1 つが呼び出される必要があります。 fail() } }, }) ``` -**See also**: [Dynamic and Async components](../guide/component-dynamic-async.html) +**参照**: [動的 & 非同期コンポーネント](../guide/component-dynamic-async.html) ## resolveComponent :::warning -`resolveComponent` can only be used within `render` or `setup` functions. +`resolveComponent` は `render` または `setup` 関数内でのみ使えます。 ::: -Allows resolving a `component` by its name, if it is available in the current application instance. +現在のアプリケーションインスタンスで `component` が利用可能ならば、その名前で解決できます。 -Returns a `Component` or the argument `name` when not found. +`Component` か、見つからなければ引数の `name` を返します。 ```js const app = createApp({}) @@ -258,27 +258,27 @@ render() { } ``` -### Arguments +### 引数 -Accepts one argument: `name` +1 つの引数を受け取ります: `name` #### name -- **Type:** `String` +- **型:** `String` -- **Details:** +- **詳細:** - The name of a loaded component. + 読み込まれたコンポーネント名です。 ## resolveDynamicComponent :::warning -`resolveDynamicComponent` can only be used within `render` or `setup` functions. +`resolveDynamicComponent` は `render` または `setup` 関数内でのみ使えます。 ::: -Allows resolving a `component` by the same mechanism that `` employs. +`` が採用しているのと同じ方法で `component` を解決できます。 -Returns the resolved `Component` or a newly created `VNode` with the component name as the node tag. Will raise a warning if the `Component` was not found. +解決した `Component` か、コンポーネント名をノードタグに持つ新しく作成された `VNode` を返します。 `Component` が見つからなければ、警告を出します。 ```js import { resolveDynamicComponent } from 'vue' @@ -287,27 +287,27 @@ render () { } ``` -### Arguments +### 引数 -Accepts one argument: `component` +1 つの引数を受け取ります: `component` #### component -- **Type:** `String | Object (component’s options object)` +- **型:** `String | Object (コンポーネントのオプションオブジェクト)` -- **Details:** +- **詳細:** - For more details, refer to the documentation on [Dynamic Components](../guide/component-dynamic-async.html). + 詳しくは [動的コンポーネント](../guide/component-dynamic-async.html) のドキュメントを参照してください。 ## resolveDirective :::warning -`resolveDirective` can only be used within `render` or `setup` functions. +`resolveDirective` は `render` または `setup` 関数内でのみ使えます。 ::: -Allows resolving a `directive` by its name, if it is available in the current application instance. +現在のアプリケーションインスタンスで `directive` が利用可能ならば、その名前で解決できます。 -Returns a `Directive` or `undefined` when not found. +`Directive` か、見つからなければ `undefined` を返します。 ```js const app = createApp({}) @@ -321,25 +321,25 @@ render () { } ``` -### Arguments +### 引数 -Accepts one argument: `name` +1 つの引数を受け取ります: `name` #### name -- **Type:** `String` +- **型:** `String` -- **Details:** +- **詳細:** - The name of a loaded directive. + 読み込まれたディレクティブ名です。 ## withDirectives :::warning -`withDirectives` can only be used within `render` or `setup` functions. +`withDirectives` は `render` または `setup` 関数内でのみ使えます。 ::: -Allows applying directives to a **VNode**. Returns a VNode with the applied directives. +ディレクティブを **VNode** に適用できます。ディレクティブを適用した VNode を返します。 ```js import { withDirectives, resolveDirective } from 'vue' @@ -352,43 +352,43 @@ return withDirectives(h('div'), [ ]) ``` -### Arguments +### 引数 -Accepts two arguments: `vnode` and `directives`. +2 つの引数を受け取ります: `vnode` と `directives` #### vnode -- **Type:** `vnode` +- **型:** `vnode` -- **Details:** +- **詳細:** - A virtual node, usually created with `h()`. + 通常 `h()` で作成される仮想ノードです。 #### directives -- **Type:** `Array` +- **型:** `Array` -- **Details:** +- **詳細:** - An array of directives. + ディレクティブの配列です。 - Each directive itself is an array, which allows for up to 4 indexes to be defined as seen in the following examples. + 各ディレクティブ自身が配列で、次の例のように 4 つまでの要素を定義できます。 - - `[directive]` - The directive by itself. Required. + - `[directive]` - ディレクティブ自身。必須。 ```js const MyDirective = resolveDirective('MyDirective') const nodeWithDirectives = withDirectives(h('div'), [[MyDirective]]) ``` - - `[directive, value]` - The above, plus a value of type `any` to be assigned to the directive + - `[directive, value]` - 上記に加えて、ディレクティブに割り当てる `any` 型の値。 ```js const MyDirective = resolveDirective('MyDirective') const nodeWithDirectives = withDirectives(h('div'), [[MyDirective, 100]]) ``` - - `[directive, value, arg]` - The above, plus a `String` argument, ie. `click` in `v-on:click` + - `[directive, value, arg]` - 上記に加えて、`String` の引数、例えば `v-on:click` の `click`。 ```js const MyDirective = resolveDirective('MyDirective') @@ -397,7 +397,7 @@ Accepts two arguments: `vnode` and `directives`. ]) ``` - - `[directive, value, arg, modifiers]` - The above, plus a `key: value` pair `Object` defining any modifiers. + - `[directive, value, arg, modifiers]` - 上記に加えて、任意の修飾子を定義する `key: value` のペア `Object`。 ```js const MyDirective = resolveDirective('MyDirective') @@ -408,14 +408,14 @@ Accepts two arguments: `vnode` and `directives`. ## createRenderer -The createRenderer function accepts two generic arguments: -`HostNode` and `HostElement`, corresponding to Node and Element types in the -host environment. +createRenderer 関数は 2 つの一般的な引数を受け取ります: +ホスト環境のノードと要素の型に一致する +`HostNode` と `HostElement` です。 -For example, for runtime-dom, HostNode would be the DOM -`Node` interface and HostElement would be the DOM `Element` interface. +例えば runtime-dom の場合、 HostNode は DOM の `Node` インターフェイスに、 +HostElement は DOM の `Element` インターフェイスになります。 -Custom renderers can pass in the platform specific types like this: +カスタムレンダラは、このようにプラットフォーム固有の型を渡せます: ```ts import { createRenderer } from 'vue' @@ -425,29 +425,29 @@ const { render, createApp } = createRenderer({ }) ``` -### Arguments +### 引数 -Accepts two arguments: `HostNode` and `HostElement` +2 つの引数を受け取ります: `HostNode` と `HostElement` #### HostNode -- **Type:** `Node` +- **型:** `Node` -- **Details:** +- **詳細:** - The node in the host environment. + ホスト環境のノードです。 #### HostElement -- **Type:** `Element` +- **型:** `Element` -- **Details:** +- **詳細:** - The element in the host environment. + ホスト環境の要素です。 ## nextTick -Defer the callback to be executed after the next DOM update cycle. Use it immediately after you’ve changed some data to wait for the DOM update. +次の DOM 更新サイクルの後に実行するようにコールバックを遅延します。いくつかのデータを変更した直後に使って、DOM の更新を待ちます。 ```js import { createApp, nextTick } from 'vue' @@ -464,13 +464,13 @@ const app = createApp({ }) ``` -**See also**: [`$nextTick` instance method](instance-methods.html#nexttick) +**参照**: [`$nextTick` インスタンスメソッド](instance-methods.html#nexttick) ## mergeProps -Takes multiple objects containing VNode props and merges them into a single object. A newly created object is returned, the objects passed as arguments are not modified. +VNode のプロパティを含む複数のオブジェクトを受け取り、それらを単一のオブジェクトにマージします。新しく作られたオブジェクトが返され、引数として渡されたオブジェクトは変更されません。 -Any number of objects can be passed, with properties from later arguments taking precedence. Event listeners are handled specially, as are `class` and `style`, with the values of these properties being merged rather than overwritten. +いくつでもオブジェクトを渡すことができますが、後ろの引数のプロパティが優先されます。イベントリスナは `class` や `style` と同じくらい特別に扱われ、これらのプロパティの値は上書きではなくマージされます。 ```js import { h, mergeProps } from 'vue' @@ -480,7 +480,7 @@ export default { render() { const props = mergeProps({ - // The class will be merged with any class from $attrs + // class は $attrs の class とマージされます class: 'active' }, this.$attrs) @@ -492,10 +492,10 @@ export default { ## useCssModule :::warning -`useCssModule` can only be used within `render` or `setup` functions. +`useCssModule` は `render` または `setup` 関数内でのみ使えます。 ::: -Allows CSS modules to be accessed within the [`setup`](/api/composition-api.html#setup) function of a [single-file component](/guide/single-file-component.html): +[単一ファイルコンポーネント](/guide/single-file-component.html) の [`setup`](/api/composition-api.html#setup) 関数内で、CSS モジュールにアクセスできるようになります: ```vue