diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js index 75293509..b473fad3 100644 --- a/src/.vuepress/config.js +++ b/src/.vuepress/config.js @@ -6,7 +6,8 @@ const sidebar = { children: [ '/cookbook/', '/cookbook/editable-svg-icons', - // '/cookbook/debugging-in-vscode' + '/cookbook/debugging-in-vscode', + '/cookbook/automatic-global-registration-of-base-components' ] } ], @@ -171,6 +172,7 @@ const sidebar = { ], migration: [ '/guide/migration/introduction', + '/guide/migration/migration-build', { title: '詳細', collapsable: false, diff --git a/src/.vuepress/public/images/breakpoint_hit.png b/src/.vuepress/public/images/breakpoint_hit.png new file mode 100644 index 00000000..35020edc Binary files /dev/null and b/src/.vuepress/public/images/breakpoint_hit.png differ diff --git a/src/.vuepress/public/images/breakpoint_set.png b/src/.vuepress/public/images/breakpoint_set.png new file mode 100644 index 00000000..af5a7064 Binary files /dev/null and b/src/.vuepress/public/images/breakpoint_set.png differ diff --git a/src/.vuepress/public/images/config_add.png b/src/.vuepress/public/images/config_add.png new file mode 100644 index 00000000..a99ae3e2 Binary files /dev/null and b/src/.vuepress/public/images/config_add.png differ diff --git a/src/.vuepress/public/images/devtools-timetravel.gif b/src/.vuepress/public/images/devtools-timetravel.gif new file mode 100644 index 00000000..83d007b8 Binary files /dev/null and b/src/.vuepress/public/images/devtools-timetravel.gif differ diff --git a/src/.vuepress/public/images/editable-svg-icons-sizes.png b/src/.vuepress/public/images/editable-svg-icons-sizes.png new file mode 100644 index 00000000..348d813c Binary files /dev/null and b/src/.vuepress/public/images/editable-svg-icons-sizes.png differ diff --git a/src/.vuepress/public/images/editable-svg-icons.jpg b/src/.vuepress/public/images/editable-svg-icons.jpg new file mode 100644 index 00000000..fb9b8e23 Binary files /dev/null and b/src/.vuepress/public/images/editable-svg-icons.jpg differ diff --git a/src/api/composition-api.md b/src/api/composition-api.md index 2494474f..e641fffe 100644 --- a/src/api/composition-api.md +++ b/src/api/composition-api.md @@ -117,6 +117,9 @@ The component instance context is also set during the synchronous execution of l - `errorCaptured` -> `onErrorCaptured` - `renderTracked` -> `onRenderTracked` - `renderTriggered` -> `onRenderTriggered` + - `activated` -> `onActivated` + - `deactivated` -> `onDeactivated` + - **See also**: [Composition API lifecycle hooks](../guide/composition-api-lifecycle-hooks.html) diff --git a/src/api/global-api.md b/src/api/global-api.md index 3a056c4e..c804ba4b 100644 --- a/src/api/global-api.md +++ b/src/api/global-api.md @@ -1,21 +1,39 @@ +--- +sidebarDepth: 1 +--- + # グローバル API +CDN ビルドを使っている場合、グローバル API の関数はグローバルな `Vue` オブジェクトを介してアクセスできます。例えば: + +```js +const { createApp, h, nextTick } = Vue +``` + +ES モジュールを使っている場合、それらは直接インポートできます: + +```js +import { createApp, h, nextTick } from 'vue' +``` + +`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 = Vue.createApp({}) +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 = Vue.createApp({ +const app = createApp({ data() { return { ... @@ -27,10 +45,10 @@ const app = Vue.createApp({ }) ``` -With the second parameter, we can pass root props to the application: +2 番目のパラメータでは、そのアプリケーションのルートプロパティを渡せます: ```js -const app = Vue.createApp( +const app = createApp( { props: ['username'] }, @@ -45,7 +63,7 @@ const app = Vue.createApp( ``` -### Typing +### 型定義 ```ts interface Data { @@ -60,41 +78,41 @@ 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): +一般的に **VNode** と略される「仮想ノード」を返します: これは Vue がページ上でレンダリングするノードの種類を記述した情報を含むプレーンオブジェクトで、子ノードの記述も含まれています。これは手動で書かれた [Render 関数](../guide/render-function.md) のためのものです: ```js render() { - return Vue.h('h1', {}, 'Some title') + return h('h1', {}, 'Some title') } ``` -### 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 or an async 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', {}, [ @@ -108,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' @@ -129,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' @@ -142,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' @@ -158,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' @@ -173,48 +191,61 @@ 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, - // 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 + // コンポーネントがサスペンド可能かの定義。デフォルト: true. + suspensible: false, + /** + * + * @param {*} error エラーメッセージのオブジェクト + * @param {*} retry 読み込みを待つ Promise がリジェクトされたときに、非同期コンポーネントが再試行するかを示す関数 + * @param {*} fail 失敗時の後処理 + * @param {*} attempts 再試行する最大数 + */ + onError(error, retry, fail, attempts) { + if (error.message.match(/fetch/) && attempts <= 3) { + // fetch のエラーを 3 回まで再試行 + retry() + } else { + // 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 `undefined` when not found. +`Component` か、見つからなければ引数の `name` を返します。 ```js -const app = Vue.createApp({}) +const app = createApp({}) app.component('MyComponent', { /* ... */ }) @@ -227,27 +258,27 @@ render() { } ``` -### Arguments +### 引数 -Accepts one argument: `component` +1 つの引数を受け取ります: `name` -#### component +#### 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' @@ -256,30 +287,30 @@ 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 = Vue.createApp({}) +const app = createApp({}) app.directive('highlight', {}) ``` @@ -290,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' @@ -321,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') @@ -366,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') @@ -377,16 +408,16 @@ 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: +カスタムレンダラは、このようにプラットフォーム固有の型を渡せます: -```js +```ts import { createRenderer } from 'vue' const { render, createApp } = createRenderer({ patchProp, @@ -394,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' @@ -433,4 +464,89 @@ const app = createApp({ }) ``` -**See also**: [`$nextTick` instance method](instance-methods.html#nexttick) +**参照**: [`$nextTick` インスタンスメソッド](instance-methods.html#nexttick) + +## mergeProps + +VNode のプロパティを含む複数のオブジェクトを受け取り、それらを単一のオブジェクトにマージします。新しく作られたオブジェクトが返され、引数として渡されたオブジェクトは変更されません。 + +いくつでもオブジェクトを渡すことができますが、後ろの引数のプロパティが優先されます。イベントリスナは `class` や `style` と同じくらい特別に扱われ、これらのプロパティの値は上書きではなくマージされます。 + +```js +import { h, mergeProps } from 'vue' + +export default { + inheritAttrs: false, + + render() { + const props = mergeProps({ + // class は $attrs の class とマージされます + class: 'active' + }, this.$attrs) + + return h('div', props) + } +} +``` + +## useCssModule + +:::warning +`useCssModule` は `render` または `setup` 関数内でのみ使えます。 +::: + +[単一ファイルコンポーネント](/guide/single-file-component.html) の [`setup`](/api/composition-api.html#setup) 関数内で、CSS モジュールにアクセスできるようになります: + +```vue + + + +``` + +CSS モジュールの使い方について詳しくは、 [Vue Loader - CSS Modules](https://vue-loader.vuejs.org/guide/css-modules.html) を参照してください。 + +### 引数 + +1 つの引数を受け取ります: `name` + +#### name + +- **型:** `String` + +- **詳細:** + + CSS モジュール名。デフォルトは `'$style'`。 + +## version + +インストールされている Vue のバージョンを文字列で提供します。 + +```js +const version = Number(Vue.version.split('.')[0]) + +if (version === 3) { + // Vue 3 +} else if (version === 2) { + // Vue 2 +} else { + // Unsupported versions of Vue +} +``` + +**参照**: [Application API - version](/api/application-api.html#version) diff --git a/src/api/options-data.md b/src/api/options-data.md index 34d854bb..f5cfbdbb 100644 --- a/src/api/options-data.md +++ b/src/api/options-data.md @@ -2,26 +2,26 @@ ## data -- **Type:** `Function` +- **型:** `Function` -- **Details:** +- **詳細:** - The function that returns a data object for the component instance. In `data`, we don't recommend to observe objects with their own stateful behavior like browser API objects and prototype properties. A good idea would be to have here just a plain object that represents component data. + コンポーネントインスタンスのデータオブジェクトを返す関数です。 `data` では、ブラウザの API オブジェクトや prototype プロパティのような独自のステートフルな振る舞いをするオブジェクトを監視することはお勧めしません。よい考え方としては、コンポーネントのデータを表すただのプレーンオブジェクトをここで持つべきです。 - Once observed, you can no longer add reactive properties to the root data object. It is therefore recommended to declare all root-level reactive properties upfront, before creating the instance. + 一度監視されると、ルートのデータオブジェクトにリアクティブなプロパティを追加することはできなくなります。そのため、インスタンスを作成する前に、すべてのルートレベルのリアクティブプロパティを前もって宣言しておくことをお勧めします。 - After the instance is created, the original data object can be accessed as `vm.$data`. The component instance also proxies all the properties found on the data object, so `vm.a` will be equivalent to `vm.$data.a`. + インスタンスが作成された後に、`vm.$data` として元のデータオブジェクトアクセスできます。コンポーネントインスタンスは、データオブジェクトのすべてのプロパティをプロキシするため、`vm.a` は `vm.$data.a` と同じになります。 - Properties that start with `_` or `$` will **not** be proxied on the component instance because they may conflict with Vue's internal properties and API methods. You will have to access them as `vm.$data._property`. + Vue の内部プロパティや API メソッドと競合する可能性があるため、`_` や `$` からはじまるプロパティはコンポーネントインスタンスで **プロキシされません**。これらは `vm.$data._property` としてアクセスする必要があります。 -- **Example:** +- **例:** ```js - // direct instance creation + // 直接インスタンスを生成 const data = { a: 1 } - // The object is added to a component instance - const vm = Vue.createApp({ + // コンポーネントインスタンスにオブジェクトを追加 + const vm = createApp({ data() { return data } @@ -30,48 +30,48 @@ console.log(vm.a) // => 1 ``` - Note that if you use an arrow function with the `data` property, `this` won't be the component's instance, but you can still access the instance as the function's first argument: + `data` プロパティでアロー関数を使う場合、`this` はコンポーネントのインスタンスになりませんが、関数の第 1 引数としてそのインスタンスにアクセスできるということは忘れないでください。 ```js data: vm => ({ a: vm.myProp }) ``` -- **See also:** [Reactivity in Depth](../guide/reactivity.html) +- **参照:** [リアクティビティの探求](../guide/reactivity.html) ## props -- **Type:** `Array | Object` +- **型:** `Array | Object` -- **Details:** +- **詳細:** - A list/hash of attributes that are exposed to accept data from the parent component. It has an Array-based simple syntax and an alternative Object-based syntax that allows advanced configurations such as type checking, custom validation and default values. + 親コンポーネントからデータを受け取るために公開されている属性のリストかハッシュです。配列ベースの単純な構文と、型チェックやカスタムバリデーション、デフォルト値などの高度な設定ができるオブジェクトベースの構文があります。 - With Object-based syntax, you can use following options: + オブジェクトベースの構文では、以下のオプションを使用できます: - - `type`: can be one of the following native constructors: `String`, `Number`, `Boolean`, `Array`, `Object`, `Date`, `Function`, `Symbol`, any custom constructor function or an array of those. Will check if a prop has a given type, and will throw a warning if it doesn't. [More information](../guide/component-props.html#prop-types) on prop types. + - `type`: 次のネイティブコンストラクタのいずれかになります: `String`、`Number`、`Boolean`、`Array`、`Object`、`Date`、`Function`、`Symbol`、任意のカスタムコンストラクタ関数、またはそれらの配列。プロパティが与えられた型を持っているか確認して、そうでない場合には警告を出します。プロパティの型について [詳細な情報](../guide/component-props.html#プロパティの型) を参照してください。 - `default`: `any` - Specifies a default value for the prop. If the prop is not passed, this value will be used instead. Object or array defaults must be returned from a factory function. + プロパティのデフォルト値を指定します。プロパティが渡されない場合、この値が変わりに使用されます。オブジェクト、または配列のデフォルト値はファクトリ関数から返さなければなりません。 - `required`: `Boolean` - Defines if the prop is required. In a non-production environment, a console warning will be thrown if this value is truthy and the prop is not passed. + プロパティが必須かどうかを定義します。非本番環境では、この値が true ならプロパティが渡されない場合、コンソールに警告を出します。 - `validator`: `Function` - Custom validator function that takes the prop value as the sole argument. In a non-production environment, a console warning will be thrown if this function returns a falsy value (i.e. the validation fails). You can read more about prop validation [here](../guide/component-props.html#prop-validation). + プロパティの値を唯一の引数として受け取るカスタムバリデータ関数です。非本番環境では、この関数が false を返す場合（例えばバリデーションが失敗した場合）、コンソールに警告を出します。プロパティのバリデーションについて、詳しくは [こちら](../guide/component-props.html#プロパティのバリデーション) を参照してください。 -- **Example:** +- **例:** ```js - const app = Vue.createApp({}) + const app = createApp({}) - // simple syntax + // 単純な構文 app.component('props-demo-simple', { props: ['size', 'myMessage'] }) - // object syntax with validation + // バリデーションありのオブジェクト構文 app.component('props-demo-advanced', { props: { - // type check + // 型チェック height: Number, - // type check plus other validations + // 型チェックと追加のバリデーション age: { type: Number, default: 0, @@ -84,17 +84,17 @@ }) ``` -- **See also:** [Props](../guide/component-props.html) +- **参照:** [プロパティ](../guide/component-props.html) ## computed -- **Type:** `{ [key: string]: Function | { get: Function, set: Function } }` +- **型:** `{ [key: string]: Function | { get: Function, set: Function } }` -- **Details:** +- **詳細:** - Computed properties to be mixed into the Vcomponent instance. All getters and setters have their `this` context automatically bound to the component instance. + コンポーネントのインスタンスに混入される算出プロパティです。すべてのゲッターとセッターは、そのコンポーネントのインスタンスへ自動的に束縛される `this` コンテキストを持っています。 - Note that if you use an arrow function with a computed property, `this` won't be the component's instance, but you can still access the instance as the function's first argument: + 算出プロパティでアロー関数を使う場合、`this` はコンポーネントのインスタンスになりませんが、関数の第 1 引数としてそのインスタンスにアクセスできるということは忘れないでください。: ```js computed: { @@ -102,21 +102,21 @@ } ``` - Computed properties are cached, and only re-computed on reactive dependency changes. Note that if a certain dependency is out of the instance's scope (i.e. not reactive), the computed property will **not** be updated. + 算出プロパティはキャッシュされ、リアクティブな依存の変更でのみ再計算されます。ある依存がインスタンスのスコープ外にある場合（例えばリアクティブでない場合）、算出プロパティは **更新されない** ことに注意してください。 -- **Example:** +- **例:** ```js - const app = Vue.createApp({ + const app = createApp({ data() { return { a: 1 } }, computed: { - // get only + // 取得のみ aDouble() { return this.a * 2 }, - // both get and set + // 取得と値の設定の両方 aPlus: { get() { return this.a + 1 @@ -135,24 +135,24 @@ console.log(vm.aDouble) // => 4 ``` -- **See also:** [Computed Properties](../guide/computed.html) +- **参照:** [算出プロパティ](../guide/computed.html) ## methods -- **Type:** `{ [key: string]: Function }` +- **型:** `{ [key: string]: Function }` -- **Details:** +- **詳細:** - Methods to be mixed into the component instance. You can access these methods directly on the VM instance, or use them in directive expressions. All methods will have their `this` context automatically bound to the component instance. + コンポーネントのインスタンスに混入されるメソッドです。これらのメソッドは、VM インスタンスで直接アクセスすることも、ディレクティブ式で使うこともできます。すべてのメソッドは、コンポーネントインスタンスに自動的に束縛された `this` コンテキストを持ちます。 :::tip Note - Note that **you should not use an arrow function to define a method** (e.g. `plus: () => this.a++`). The reason is arrow functions bind the parent context, so `this` will not be the component instance as you expect and `this.a` will be undefined. + **メソッドの定義にアロー関数を使ってはいけない** ということに注意してください（例: `plus: () => this.a++`）。その理由は、アロー関数が親のコンテキストを束縛するため、`this` が期待したとおりのコンポーネントインスタンスにならないのと、`this.a` が未定義になるからです。 ::: -- **Example:** +- **例:** ```js - const app = Vue.createApp({ + const app = createApp({ data() { return { a: 1 } }, @@ -169,20 +169,20 @@ console.log(vm.a) // => 2 ``` -- **See also:** [Event Handling](../guide/events.html) +- **参照:** [イベントハンドリング](../guide/events.html) ## watch -- **Type:** `{ [key: string]: string | Function | Object | Array}` +- **型:** `{ [key: string]: string | Function | Object | Array}` -- **Details:** +- **詳細:** - An object where keys are expressions to watch and values are the corresponding callbacks. The value can also be a string of a method name, or an Object that contains additional options. The component instance will call `$watch()` for each entry in the object at instantiation. + キーが監視するリアクティブなプロパティで、例えば [data](/api/options-data.html#data-2) または [computed](/api/options-data.html#computed) プロパティを含み、値が対応するコールバックとなるオブジェクトです。値はメソッド名の文字列や、追加のオプションを含むオブジェクトを指定することもできます。コンポーネントインスタンスはインスタンス化の際に、オブジェクトの各エントリに対して `$watch()` を呼び出します。`deep`、`immediate`、または `flush` オプションの詳細については [$watch](instance-methods.html#watch) を参照してください。 -- **Example:** +- **例:** ```js - const app = Vue.createApp({ + const app = createApp({ data() { return { a: 1, @@ -190,31 +190,36 @@ c: { d: 4 }, - e: 'test', - f: 5 + e: 5, + f: 6 } }, watch: { + // トップレベルのプロパティを監視 a(val, oldVal) { console.log(`new: ${val}, old: ${oldVal}`) }, - // string method name + // メソッド名の文字列 b: 'someMethod', - // the callback will be called whenever any of the watched object properties change regardless of their nested depth + // 監視しているオブジェクトのプロパティが変更されると入れ子の深さに関わらずコールバックが呼び出されます c: { handler(val, oldVal) { console.log('c changed') }, deep: true }, - // the callback will be called immediately after the start of the observation + // 入れ子になった 1 つのプロパティを監視 + 'c.d': function (val, oldVal) { + // do something + }, + // 監視が開始した直後にコールバックが呼び出されます e: { handler(val, oldVal) { console.log('e changed') }, immediate: true }, - // you can pass array of callbacks, they will be called one-by-one + // コールバックの配列を渡せて、それらは 1 つずつ呼び出されます f: [ 'handle1', function handle2(val, oldVal) { @@ -244,27 +249,28 @@ ``` ::: tip Note - Note that _you should not use an arrow function to define a watcher_ (e.g. `searchQuery: newValue => this.updateAutocomplete(newValue)`). The reason is arrow functions bind the parent context, so `this` will not be the component instance as you expect and `this.updateAutocomplete` will be undefined. + _ウォッチャの定義にアロー関数を使ってはいけない_ ということに注意してください（例: `searchQuery: newValue => this.updateAutocomplete(newValue)`）。その理由は、アロー関数が親のコンテキストを束縛するため、`this` は期待したとおりのコンポーネントインスタンスにはならないのと、`this.updateAutocomplete` が未定義になるからです。 ::: -- **See also:** [Watchers](../guide/computed.html#watchers) + +- **参照:** [ウォッチャ](../guide/computed.html#ウォッチャ) ## emits -- **Type:** `Array | Object` +- **型:** `Array | Object` -- **Details:** +- **詳細:** - A list/hash of custom events that can be emitted from the component. It has an Array-based simple syntax and an alternative Object-based syntax that allows to configure an event validation. + コンポーネントから発行されるカスタムイベントのリストやハッシュです。配列ベースの単純な構文と、イベントのバリデーションを設定できるオブジェクトベースの構文があります。 - In Object-based syntax, the value of each property can either be `null` or a validator function. The validation function will receive the additional arguments passed to the `$emit` call. For example, if `this.$emit('foo', 1)` is called, the corresponding validator for `foo` will receive the argument `1`. The validator function should return a boolean to indicate whether the event arguments are valid. + オブジェクトベースの構文では、各プロパティの値は `null` か、バリデーション関数のどちらかです。バリデーション関数は `$emit` の呼び出しに渡された追加の引数を受け取ります。例えば、`this.$emit('foo', 1)` が呼び出された場合、`foo` に対応するバリデータは、引数 `1` を受け取ります。バリデーション関数は、イベントの引数が妥当かどうかを示すブール値を返す必要があります。 -- **Usage:** +- **使用方法:** ```js - const app = Vue.createApp({}) + const app = createApp({}) - // Array syntax + // 配列の構文 app.component('todo-item', { emits: ['check'], created() { @@ -272,13 +278,13 @@ } }) - // Object syntax + // オブジェクトの構文 app.component('reply-form', { emits: { - // no validation + // バリデーションなし click: null, - // with validation + // バリデーションあり submit: payload => { if (payload.email && payload.password) { return true @@ -292,7 +298,7 @@ ``` ::: tip Note - Events listed in the `emits` option **will not** be inherited by the root element of the component and also will be excluded from the `$attrs` property. + `emits` オプションにリスト化されたイベントは、コンポーネントのルート要素には **継承されません**。また、`$attrs` プロパティからも除外されます。 ::: -* **See also:** [Attribute Inheritance](../guide/component-attrs.html#attribute-inheritance) +* **参照:** [属性の継承](../guide/component-attrs.html#属性の継承) diff --git a/src/api/options-dom.md b/src/api/options-dom.md index 5aca0f1a..e29a02a0 100644 --- a/src/api/options-dom.md +++ b/src/api/options-dom.md @@ -2,34 +2,35 @@ ## template -- **Type:** `string` +- **型:** `string` -- **Details:** +- **詳細:** - A string template to be used as the markup for the component instance. The template will **replace** the mounted element. Any existing markup inside the mounted element will be ignored, unless content distribution slots are present in the template. + コンポーネントインスタンスのマークアップとして使われる文字列のテンプレートです。そのテンプレートはマウントされた要素の `innerHTML` を **置換** します。マウントされた要素内の既存マークアップは、テンプレート内にコンテンツ配信スロットが存在しない限り、どれも無視されます。 - If the string starts with `#` it will be used as a `querySelector` and use the selected element's innerHTML as the template string. This allows the use of the common ` +``` + +## 謝辞 + +このレシピは、[Kenneth Auchenberg](https://twitter.com/auchenberg) 氏からの寄稿を元にしています。[元の記事](https://github.com/Microsoft/VSCode-recipes/tree/master/vuejs-cli)。 diff --git a/src/cookbook/editable-svg-icons.md b/src/cookbook/editable-svg-icons.md index 804924ac..4c534983 100644 --- a/src/cookbook/editable-svg-icons.md +++ b/src/cookbook/editable-svg-icons.md @@ -1,26 +1,26 @@ -# Editable SVG Icon Systems +# 編集可能な SVG アイコンシステム -## Base Example +## 基本的な例 -There are many ways to create an SVG Icon System, but one method that takes advantage of Vue's capabilities is to create editable inline icons as components. Some of the advantages of this way of working is: +SVG アイコンシステムを作成する方法はいろいろありますが、 Vue の機能を生かした方法として、編集可能なインラインのアイコンをコンポーネントとして作成する方法があります。この方法のいくつかの利点としては: -- They are easy to edit on the fly -- They are animatable -- You can use standard props and defaults to keep them to a typical size or alter them if you need to -- They are inline, so no HTTP requests are necessary -- They can be made accessible dynamically +- 即座に編集することが簡単です +- アニメーションが可能です +- 標準的なプロパティとデフォルトを利用して標準サイズを保つことができ、必要に応じて変更することもできます +- インラインなので HTTP リクエストが不要です +- 動的にアクセスすることが可能です -First, we'll create a folder for all of the icons, and name them in a standardized fashion for easy retrieval: +まず、すべてのアイコンを入れるフォルダを作り、検索しやすいように一定のルールで命名します: - `components/icons/IconBox.vue` - `components/icons/IconCalendar.vue` - `components/icons/IconEnvelope.vue` -Here's an example repo to get you going, where you can see the entire setup: [https://github.com/sdras/vue-sample-svg-icons/](https://github.com/sdras/vue-sample-svg-icons/) +ここにセットアップの全体像を見られるサンプルのリポジトリがあります: [https://github.com/sdras/vue-sample-svg-icons/](https://github.com/sdras/vue-sample-svg-icons/) -![Documentation site](https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/screendocs.jpg 'Docs demo') +![Documentation site](/images/editable-svg-icons.jpg 'Docs demo') -We'll create a base icon (`IconBase.vue`) component that uses a slot. +スロットを利用した基本となるアイコン（`IconBase.vue`）コンポーネントを作成します。 ```html ``` -You can use this base icon as is- the only thing you might need to update is the `viewBox` depending on the `viewBox` of your icons. In the base, we're making the `width`, `height`, `iconColor`, and name of the icon props so that it can be dynamically updated with props. The name will be used for both the `` content and its `id` for accessibility. +アイコンの `viewBox` に応じて `viewBox` を更新する必要があるだけで、この基本となるアイコンをそのまま使うことができます。この基本では、 `width` と `height` と `iconColor` とアイコン名をプロパティにして、プロパティから動的に更新できるようにしています。名前は `<title>` のコンテンツと、アクセシビリティのための `id` の両方に使われます。 -Our script will look like this, we'll have some defaults so that our icon will be rendered consistently unless we state otherwise: +スクリプト部分はこのようになります。いくつかのデフォルトがあり、特に指定しない限り、アイコンが一貫してレンダリングされるようにします: ```js export default { @@ -67,32 +67,32 @@ export default { } ``` -The `currentColor` property that's the default on the fill will make the icon inherit the color of whatever text surrounds it. We could also pass in a different color as a prop if we wish. +塗りつぶし色のデフォルト `currentColor` プロパティは、アイコンの周囲のテキスト色を継承します。必要なら、別の色をプロパティとして渡すこともできます。 -We can use it like so, with the only contents of `IconWrite.vue` containing the paths inside the icon: +アイコンのパスを内包する `IconWrite.vue` だけを内容にすると、このように使えます: ```html <icon-base icon-name="write"><icon-write /></icon-base> ``` -Now, if we'd like to make many sizes for the icon, we can do so very easily: +さまざまなサイズのアイコンを作りたいとなったら、とても簡単にできます: ```html <p> - <!-- you can pass in a smaller `width` and `height` as props --> + <!-- より小さい `width` と `height` をプロパティとして渡せます --> <icon-base width="12" height="12" icon-name="write"><icon-write /></icon-base> - <!-- or you can use the default, which is 18 --> + <!-- あるいはデフォルトも使えます。デフォルトは 18 です --> <icon-base icon-name="write"><icon-write /></icon-base> - <!-- or make it a little bigger too :) --> + <!-- または少し大きくすることも :) --> <icon-base width="30" height="30" icon-name="write"><icon-write /></icon-base> </p> ``` -<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/Screen%20Shot%202018-01-01%20at%204.51.40%20PM.png" width="450" /> +<img src="/images/editable-svg-icons-sizes.png" width="450" /> -## Animatable Icons +## アニメーション可能なアイコン -Keeping icons in components comes in very handy when you'd like to animate them, especially on an interaction. Inline SVGs have the highest support for interaction of any method. Here's a very basic example of an icon that's animated on click: +アイコンをコンポーネントに入れておくと、特にインタラクションによってアニメーションさせたいときにとても便利です。インライン SVG は、いろいろなやり方の中で最もインタラクションをサポートします。これはクリックでアニメーションするアイコンのとても基本的な例です: ```html <template> @@ -141,27 +141,27 @@ export default { } ``` -We're applying `refs` to the groups of paths we need to move, and as both sides of the scissors have to move in tandem, we'll create a function we can reuse where we'll pass in the `refs`. The use of GreenSock helps resolve animation support and `transform-origin` issues across browser. +移動する必要のあるパスのグループに `refs` を適用します。また、はさみの両側は連動して動く必要があるので、 `refs` を渡す再利用可能な関数を作成します。 GreenSock を使うとアニメーションのサポートや、ブラウザ間の `transform-origin` の問題を解決することができます。 <common-codepen-snippet title="Editable SVG Icon System: Animated icon" slug="dJRpgY" :preview="false" :editable="false" version="2" theme="0" /> <p style="margin-top:-30px">Pretty easily accomplished! And easy to update on the fly.</p> -You can see more animated examples in the repo [here](https://github.com/sdras/vue-sample-svg-icons/) +他のアニメーションの例は、 [こちらの](https://github.com/sdras/vue-sample-svg-icons/) リポジトリで見ることができます。 -## Additional Notes +## 補足 -Designers may change their minds. Product requirements change. Keeping the logic for the entire icon system in one base component means you can quickly update all of your icons and have it propagate through the whole system. Even with the use of an icon loader, some situations require you to recreate or edit every SVG to make global changes. This method can save you that time and pain. +デザイナーの考えは変わるかもしれません。製品要件は変わります。アイコンシステム全体のロジックを 1 つの基本となるコンポーネントにまとめておけば、すべてのアイコンを素早く更新して、システム全体に広めることができます。アイコンローダーを使っても、場合によってはグローバルな変更を行うために、すべての SVG を再作成または編集しなければなりません。この方法ならば、そのような時間と苦痛からあなたを救うことができます。 -## When To Avoid This Pattern +## このパターンを回避するケース -This type of SVG icon system is really useful when you have a number of icons that are used in different ways throughout your site. If you're repeating the same icon many times on one page (e.g. a giant table with a delete icon in each row), it might make more sense to have all of the sprites compiled into a sprite sheet and use `<use>` tags to load them. +このような SVG アイコンシステムは、サイト全体にさまざまな方法で使われているアイコンがたくさんある場合にとても便利です。1 つのページで同じアイコンを繰り返し使うならば（例えば、各行に削除アイコンのある巨大なテーブル）、すべてのスプライトをスプライトシートにコンパイルして `<use>` タグで読み込むほうが合理的でしょう。 -## Alternative Patterns +## 代替パターン -Other tooling to help manage SVG icons includes: +SVG アイコンを管理するのに役立つ他のツールには、以下のものがあります: - [svg-sprite-loader](https://github.com/kisenka/svg-sprite-loader) - [svgo-loader](https://github.com/rpominov/svgo-loader) -These tools bundle SVGs at compile time, but make them a little harder to edit during runtime, because `<use>` tags can have strange cross-browser issues when doing anything more complex. They also leave you with two nested `viewBox` properties and thus two coordinate systems. This makes the implementation a little more complex. +これらのツールはコンパイル時に SVG をバンドルしますが、実行時にそれらを編集することが少し難しくなります。これは `<use>` タグが複雑な処理をする際に、おかしなクロスブラウザの問題を引き起こす可能性があるからです。2 つの入れ子になった `viewBox` プロパティがあるために、2 つの座標系が存在します。このため実装が少し複雑になります。 diff --git a/src/guide/class-and-style.md b/src/guide/class-and-style.md index 66a26b04..55947941 100644 --- a/src/guide/class-and-style.md +++ b/src/guide/class-and-style.md @@ -3,6 +3,7 @@ データバインディングに一般に求められることの 1 つは、要素のクラスリストとインラインスタイルを操作することです。それらはどちらも属性であるため、`v-bind` を使って扱うことができます。最終的な文字列を式で計算するだけです。しかしながら、文字列の連結に手を出すのは煩わしく、エラーのもとです。そのため、Vue は `v-bind` が `class` と `style` と一緒に使われるとき、特別な拡張機能を提供します。文字列だけではなく、式はオブジェクトまたは配列を返すことができます。 ## HTML クラスのバインディング +<VideoLesson href="https://vueschool.io/lessons/dynamic-css-classes-with-vue-3?friend=vuejs" title="Free Vue.js Dynamic Classes Lesson">Watch a free video lesson on Vue School</VideoLesson> ### オブジェクト構文 @@ -228,9 +229,9 @@ data() { <div :style="[baseStyles, overridingStyles]"></div> ``` -### 自動プリフィックス +### 自動プレフィックス -`:style` で[ベンダー接頭辞](https://developer.mozilla.org/ja/docs/Glossary/Vendor_Prefix)を要求される CSS プロパティを使用するとき、例えば、`transform` においては、Vue.js は自動的に適切な接頭辞を検出し、適用されるスタイルに追加します。 +`:style` で [ベンダープレフィックス](https://developer.mozilla.org/ja/docs/Glossary/Vendor_Prefix) が必要な CSS プロパティを使用するとき、Vue は自動的に適切なプレフィックスを追加します。Vue は現在のブラウザでどのスタイルプロパティがサポートされているかを実行時に確認することでこれを行います。ブラウザが特定のプロパティをサポートしていない場合は、様々なプレフィックスのバリエーションがテストされて、サポートされているものを見つけようとします。 ### 複数の値 diff --git a/src/guide/component-basics.md b/src/guide/component-basics.md index 81d2dbef..959b78be 100644 --- a/src/guide/component-basics.md +++ b/src/guide/component-basics.md @@ -54,7 +54,7 @@ app.mount('#components-demo') </div> ``` -<common-codepen-snippet title="Component basics: reusing components" slug="rNVqYvM" tab="html,result" :preview="false" /> +<common-codepen-snippet title="Component basics: reusing components" slug="rNVqYvM" tab="result" :preview="false" /> ボタンをクリックすると、それぞれが独自の `count` を保持することに注意してください。 これはコンポーネントを使用する度に新しいコンポーネントの**インスタンス**が作成されるためです。 @@ -111,7 +111,7 @@ app.mount('#blog-post-demo') </div> ``` -<common-codepen-snippet title="Component basics: passing props" slug="PoqyOaX" tab="html,result" :preview="false" /> +<common-codepen-snippet title="Component basics: passing props" slug="PoqyOaX" tab="result" :preview="false" /> しかしながら、一般的なアプリケーションではおそらく `data` に投稿の配列を持っています: @@ -227,7 +227,7 @@ app.component('blog-post', { `@enlarge-text="postFontSize += 0.1"` リスナによって、親コンポーネントはこのイベントを受け取り `postFontSize` の値を更新することができます。 -<common-codepen-snippet title="Component basics: emitting events" slug="KKpGyrp" tab="html,result" :preview="false" /> +<common-codepen-snippet title="Component basics: emitting events" slug="KKpGyrp" tab="result" :preview="false" /> コンポーネントの `emits` オプションにより発行されたイベントを一覧することができます: diff --git a/src/guide/component-dynamic-async.md b/src/guide/component-dynamic-async.md index e5636440..a56713eb 100644 --- a/src/guide/component-dynamic-async.md +++ b/src/guide/component-dynamic-async.md @@ -12,7 +12,7 @@ しかし、コンポーネントを切り替える時、コンポーネントの状態を保持したり、パフォーマンスの理由から再レンダリングを避けたいときもあるでしょう。例えば、タブインターフェースを少し拡張した場合: -<common-codepen-snippet title="Dynamic components: without keep-alive" slug="jOPjZOe" tab="html,result" :preview="false" /> +<common-codepen-snippet title="Dynamic components: without keep-alive" slug="jOPjZOe" tab="html,result" /> Posts タブの投稿を選択し、 _Archive_ タブに切り替えてから _Posts_ に戻ると、選択していた投稿が表示されないことに気づくでしょう。これは、新しいタブに切り替えるたびに、Vue が `currentTabComponent` の新しいインスタンスを作成するからです。 @@ -27,7 +27,7 @@ Posts タブの投稿を選択し、 _Archive_ タブに切り替えてから _P 以下の結果を確認してみてください: -<common-codepen-snippet title="Dynamic components: with keep-alive" slug="VwLJQvP" tab="html,result" :preview="false" /> +<common-codepen-snippet title="Dynamic components: with keep-alive" slug="VwLJQvP" tab="html,result" /> このように _Posts_ タブがレンダリングされていなくても、自身の状態（選択された投稿）を保持するようになります。 diff --git a/src/guide/component-props.md b/src/guide/component-props.md index e247ba3e..ba3b9745 100644 --- a/src/guide/component-props.md +++ b/src/guide/component-props.md @@ -145,7 +145,7 @@ data() { ```js props: ['size'], computed: { - normalizedSize: function () { + normalizedSize() { return this.size.trim().toLowerCase() } } @@ -183,22 +183,22 @@ app.component('my-component', { type: Object, // オブジェクトもしくは配列のデフォルト値は // 必ずファクトリ関数（それを生み出すための関数）を返す必要があります。 - default: function() { + default() { return { message: 'hello' } } }, // カスタムバリデーション関数 propF: { - validator: function(value) { + validator(value) { // プロパティの値は、必ずいずれかの文字列でなければならない - return ['success', 'warning', 'danger'].indexOf(value) !== -1 + return ['success', 'warning', 'danger'].includes(value) } }, // デフォルト値つきの関数型 propG: { type: Function, // オブジェクトや配列のデフォルトとは異なり、これはファクトリ関数ではありません。これは、デフォルト値としての関数を取り扱います。 - default: function() { + default() { return 'Default function' } } diff --git a/src/guide/composition-api-introduction.md b/src/guide/composition-api-introduction.md index 10a7f695..5e2f8e87 100644 --- a/src/guide/composition-api-introduction.md +++ b/src/guide/composition-api-introduction.md @@ -76,7 +76,7 @@ export default { 新しい `setup` コンポーネントオプションは、コンポーネントが作成される前に `props` が解決されると実行され、 Composition API のエントリポイントとして機能します。 ::: warning -`setup` が実行されたときは、まだコンポーネントのインスタンスが作られないため、`setup` オプションの中では `this` を使用できません。これは `props` を除いて、コンポーネント内で宣言されているあらゆるプロパティ (**ローカルの state** や **computed プロパティ**、**methods**) にアクセスできないことを意味します。 +コンポーネントのインスタンスを参照しないため、`setup` の中で `this` を使うのは避けるべきです。`setup` は `data` プロパティ、`computed` プロパティ、`methods` が解決される前に呼び出されるため、`setup` の中では利用できません。 ::: `setup` オプションは `props` と[後で](composition-api-setup.html#引数)紹介する `context` を受け付ける関数であるべきです。さらに、`setup` から返される全てのものは、コンポーネントの残りの要素 (computed プロパティ、methods、ライフサイクルフックなど) およびコンポーネントの template に公開されます。 diff --git a/src/guide/composition-api-lifecycle-hooks.md b/src/guide/composition-api-lifecycle-hooks.md index 0ec14a5b..8a01dd46 100644 --- a/src/guide/composition-api-lifecycle-hooks.md +++ b/src/guide/composition-api-lifecycle-hooks.md @@ -22,6 +22,9 @@ | `errorCaptured` | `onErrorCaptured` | | `renderTracked` | `onRenderTracked` | | `renderTriggered` | `onRenderTriggered` | +| `activated` | `onActivated` | +| `deactivated` | `onDeactivated` | + :::tip `setup` は `beforeCreate` と `created` のライフサイクルで実行されるため、これらのフックを明示的に定義する必要はありません。言い換えれば、これらのフック内のコードは、 `setup` 内に直接書くべきです。 diff --git a/src/guide/computed.md b/src/guide/computed.md index 910fc5e3..fae669ae 100644 --- a/src/guide/computed.md +++ b/src/guide/computed.md @@ -2,6 +2,8 @@ ## 算出プロパティ +<VideoLesson href="https://vueschool.io/lessons/computed-properties-in-vue-3?friend=vuejs" title="Learn how computed properties work with Vue School">Learn how computed properties work with a free lesson on Vue School</VideoLesson> + テンプレート内の式は非常に便利ですが、シンプルな操作のためのものです。テンプレートにたくさんロジックを入れすぎると、テンプレートが肥大化してメンテナンスしづらくなる可能性があります。たとえば、配列が入っているオブジェクトがあり: ```js diff --git a/src/guide/conditional.md b/src/guide/conditional.md index 2a8f3f79..df23a950 100644 --- a/src/guide/conditional.md +++ b/src/guide/conditional.md @@ -1,5 +1,7 @@ # 条件付きレンダリング +<VideoLesson href="https://vueschool.io/lessons/conditional-rendering-in-vue-3?friend=vuejs" title="Learn how conditional rendering works with Vue School">Learn how conditional rendering works with a free lesson on Vue School</VideoLesson> + ## `v-if` `v-if` ディレクティブは、ブロックを条件に応じて描画したい場合に使用されます。ブロックは、ディレクティブの式が真を返す場合のみ描画されます。 diff --git a/src/guide/custom-directive.md b/src/guide/custom-directive.md index 97f270bf..63b30e1d 100644 --- a/src/guide/custom-directive.md +++ b/src/guide/custom-directive.md @@ -132,7 +132,7 @@ app.mount('#dynamic-arguments-example') <div id="dynamicexample"> <h2>Scroll down the page</h2> <input type="range" min="0" max="500" v-model="pinPadding"> - <p v-pin:[direction]="pinPadding">Stick me {{ pinPadding + 'px' }} from the {{ direction }} of the page</p> + <p v-pin:[direction]="pinPadding">Stick me {{ pinPadding + 'px' }} from the {{ direction || 'top' }} of the page</p> </div> ``` diff --git a/src/guide/data-methods.md b/src/guide/data-methods.md index b7f97f80..bcb7ef19 100644 --- a/src/guide/data-methods.md +++ b/src/guide/data-methods.md @@ -2,6 +2,8 @@ ## データプロパティ +<VideoLesson href="https://vueschool.io/lessons/methods-in-vue-3?friend=vuejs" title="Learn how to use methods on Vue School">Learn how to work with data and methods with a free Vue School lesson</VideoLesson> + コンポーネントの `data` オプションは関数です。Vue は新しいコンポーネントのインスタンスを作成する際に、この関数を呼び出します。これはオブジェクトを返すもので、 Vue はオブジェクトをそのリアクティブシステムでラップして、コンポーネントのインスタンスに `$data` として格納します。便宜上、そのオブジェクトのトップレベルのプロパティは、コンポーネントのインスタンスを介して直接公開されます: ```js diff --git a/src/guide/events.md b/src/guide/events.md index 0e1c3c53..284acbc6 100644 --- a/src/guide/events.md +++ b/src/guide/events.md @@ -1,5 +1,7 @@ # イベントハンドリング +<VideoLesson href="https://vueschool.io/lessons/user-events-in-vue-3?friend=vuejs" title="Learn how to handle events on Vue School">Learn how to handle events in a free Vue School lesson</VideoLesson> + ## イベントの購読 `v-on` ディレクティブを使うことで、DOM イベントの購読、イベント発火時の JavaScript の実行が可能になります。これは通常 `@` に省略することができます。`v-on:click="methodName"` もしくは `@click="methodName"` と書いて使用します。 @@ -25,7 +27,7 @@ Vue.createApp({ 結果: -<common-codepen-snippet title="Event handling: basic" slug="xxGadPZ" tab="html,result" :preview="false" /> +<common-codepen-snippet title="Event handling: basic" slug="xxGadPZ" tab="result" :preview="false" /> ## メソッドイベントハンドラ @@ -62,7 +64,7 @@ Vue.createApp({ 結果: -<common-codepen-snippet title="Event handling: with a method" slug="jOPvmaX" tab="js,result" :preview="false" /> +<common-codepen-snippet title="Event handling: with a method" slug="jOPvmaX" tab="result" :preview="false" /> ## インラインメソッドハンドラ @@ -87,7 +89,7 @@ Vue.createApp({ 結果: -<common-codepen-snippet title="Event handling: with an inline handler" slug="WNvgjda" tab="html,result" :preview="false" /> +<common-codepen-snippet title="Event handling: with an inline handler" slug="WNvgjda" tab="result" :preview="false" /> 時には、インラインステートメントハンドラでオリジナルの DOM イベントを参照したいこともあるでしょう。特別な `$event` 変数を使うことでメソッドに DOM イベントを渡すことができます: diff --git a/src/guide/forms.md b/src/guide/forms.md index 83cb6c3e..9daae340 100644 --- a/src/guide/forms.md +++ b/src/guide/forms.md @@ -1,5 +1,7 @@ # フォーム入力バインディング +<VideoLesson href="https://vueschool.io/lessons/user-inputs-vue-devtools-in-vue-3?friend=vuejs" title="Learn how to handle form inputs on Vue School">Learn how to work with form inputs with a free Vue School lesson</VideoLesson> + ## 基本的な使い方 form の input 要素や textarea 要素、 select 要素に双方向データバインディングを付与するためには、`v-model` を使用することができます。`v-model` は、要素を更新する適切な方法を入力の種類に基づき自動的に選択します。少し魔法のようですが、本来 `v-model` は糖衣構文(syntax sugar)であり、ユーザの入力イベントに応じてデータを更新し、さらにエッジケースに対する特別な配慮をしてくれます。 @@ -157,7 +159,7 @@ Vue.createApp({ <span>Selected: {{ selected }}</span> ``` -<common-codepen-snippet title="Handling forms: select bound to array" slug="gOpBXPz" tab="html,result" :preview="false" /> +<common-codepen-snippet title="Handling forms: select bound to array" slug="gOpBXPz" tab="result" :preview="false" /> 動的なオプションを `v-for` により描画: diff --git a/src/guide/installation.md b/src/guide/installation.md index 113eb01c..979f3603 100644 --- a/src/guide/installation.md +++ b/src/guide/installation.md @@ -19,6 +19,8 @@ Vue.js をプロジェクトに追加するには主に 4 つの方法があり > 現在ベータ版 - Vuex と Router の統合は WIP です +<VideoLesson href="https://vueschool.io/lessons/using-vue-dev-tools-with-vuejs-3?friend=vuejs" title="Learn how to install Vue Devtools on Vue School">Learn how to install and use Vue Devtools in a free Vue School lesson</VideoLesson> + Vue を使用する場合は、ブラウザに [Vue Devtools](https://github.com/vuejs/vue-devtools#vue-devtools) をインストールすることをお勧めします。これにより、Vue アプリケーションをよりユーザーフレンドリーなインターフェースで調査、デバッグすることが可能になります。 [Chrome 拡張版を入手](https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg) diff --git a/src/guide/introduction.md b/src/guide/introduction.md index 69a90999..38a591e3 100644 --- a/src/guide/introduction.md +++ b/src/guide/introduction.md @@ -260,7 +260,8 @@ app.component('todo-item', { <ol> <!-- 各 todo-item にその内容を表す todo オブジェクトを指定することで、 - 内容が動的に変化します。後述する "key" も各コンポーネントに + 内容が動的に変化します。 + 後述する "key" も各コンポーネントに 指定する必要があります。 --> <todo-item @@ -315,7 +316,7 @@ app.mount('#todo-list-app') Vue のコンポーネントが [Web Components 仕様](https://www.w3.org/wiki/WebComponents/) の一部である **カスタム要素 (Custom Elements)** によく似ていることに気付いたかもしれません。これは Vue のコンポーネント構文はその仕様を手本にしているためです。例えば、Vue コンポーネントは [Slot API](https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md) と `is` という特別な属性を実装しています。しかしながら、いくつか重要な違いがあります: -1. Web Components の仕様は確定しましたが、全てのブラウザにネイティブ実装されているわけではありません。Safari 10.1 以上、Chrome 54 以上、Firefox 63 以上が Web Components をネイティブでサポートしています。一方、Vue コンポーネントは、サポートされる全てのブラウザ（互換ビルドでは IE11 以上）で同じ動作をします。必要があれば、Vue コンポーネントはネイティブなカスタム要素内に含めることもできます。 +1. Web Components の仕様は確定しましたが、全てのブラウザにネイティブ実装されているわけではありません。Safari 10.1 以上、Chrome 54 以上、Firefox 63 以上が Web Components をネイティブでサポートしています。一方、Vue コンポーネントは、サポートされる全てのブラウザ（Internet Explorer 11を除く - 詳細は [こちら](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0038-vue3-ie11-support.md) を確認してください）で同じ動作をします。必要があれば、Vue コンポーネントはネイティブなカスタム要素内に含めることもできます。 [//]: # 'TODO: link to compatibility build' diff --git a/src/guide/list.md b/src/guide/list.md index 03ed42e2..f0750bd0 100644 --- a/src/guide/list.md +++ b/src/guide/list.md @@ -1,5 +1,7 @@ # リストレンダリング +<VideoLesson href="https://vueschool.io/lessons/list-rendering-in-vue-3?friend=vuejs" title="Learn how to render lists on Vue School">Learn how to render list with a free Vue School lesson</VideoLesson> + ## v-for で配列に要素をマッピングする 配列に基づいて、アイテムのリストを描画するために、`v-for` ディレクティブを使用することができます。 `v-for` ディレクティブには、 `item in items` の形式の特別な構文が必要で、 `items` はソースデータの配列、 `item` は繰り返される配列要素の**エイリアス**です: @@ -217,7 +219,7 @@ methods: { 結果: -<common-codepen-snippet title="v-for with a range" slug="NWqLjNY" tab="html,result" :preview="false" /> +<common-codepen-snippet title="v-for with a range" slug="NWqLjNY" tab="html,result" /> ## `<template>` での `v-for` diff --git a/src/guide/migration/array-refs.md b/src/guide/migration/array-refs.md index 4b90a461..579a64f3 100644 --- a/src/guide/migration/array-refs.md +++ b/src/guide/migration/array-refs.md @@ -69,4 +69,11 @@ export default { - `itemRefs` は配列である必要はありません。 反復キーで参照できるオブジェクトでも構いません。 -- これにより、必要に応じて `itemRefs` をリアクティブにして監視することもできます。 \ No newline at end of file +- これにより、必要に応じて `itemRefs` をリアクティブにして監視することもできます。 + +## 移行の戦略 + +[移行ビルドのフラグ:](migration-build.html#compat-の設定) + +- `V_FOR_REF` +- `COMPILER_V_FOR_REF` diff --git a/src/guide/migration/async-components.md b/src/guide/migration/async-components.md index f5746520..828b5df1 100644 --- a/src/guide/migration/async-components.md +++ b/src/guide/migration/async-components.md @@ -95,3 +95,4 @@ const asyncComponent = defineAsyncComponent( 非同期コンポーネントの使い方のさらなる情報は、以下を見てください: - [ガイド: 動的 & 非同期コンポーネント](/guide/component-dynamic-async.html#動的コンポーネントにおける-keep-alive-の利用) +- [移行ビルドのフラグ: `COMPONENT_ASYNC`](migration-build.html#compat-の設定) diff --git a/src/guide/migration/attribute-coercion.md b/src/guide/migration/attribute-coercion.md index b1a30532..1980ad6b 100644 --- a/src/guide/migration/attribute-coercion.md +++ b/src/guide/migration/attribute-coercion.md @@ -60,16 +60,16 @@ badges: | バインディング式 | `foo` <sup>通常の属性</sup> | `draggable` <sup>列挙された属性</sup> | | ------------------- | --------------------------- | ------------------------------------- | -| `:attr="null"` | / | / <sup>†</sup> | +| `:attr="null"` | / | / <sup>*</sup> | | `:attr="undefined"` | / | / | | `:attr="true"` | `foo="true"` | `draggable="true"` | -| `:attr="false"` | `foo="false"` <sup>†</sup> | `draggable="false"` | -| `:attr="0"` | `foo="0"` | `draggable="0"` <sup>†</sup> | -| `attr=""` | `foo=""` | `draggable=""` <sup>†</sup> | -| `attr="foo"` | `foo="foo"` | `draggable="foo"` <sup>†</sup> | -| `attr` | `foo=""` | `draggable=""` <sup>†</sup> | +| `:attr="false"` | `foo="false"` <sup>*</sup> | `draggable="false"` | +| `:attr="0"` | `foo="0"` | `draggable="0"` <sup>*</sup> | +| `attr=""` | `foo=""` | `draggable=""` <sup>*</sup> | +| `attr="foo"` | `foo="foo"` | `draggable="foo"` <sup>*</sup> | +| `attr` | `foo=""` | `draggable=""` <sup>*</sup> | -<small>†: 変更点</small> +<small>*: 変更点</small> ブール属性への強制はそのままです。 @@ -125,7 +125,7 @@ badges: <td><code>"false"</code></td> </tr> <tr> - <td rowspan="2">その他の非ブール属性<br><small>例えば + <td rowspan="2">その他の非ブール属性<br><small>例えば <code>aria-checked</code>、<code>tabindex</code>、<code>alt</code>など</small></td> <td><code>undefined</code>, <code>null</code>, <code>false</code></td> <td><code>undefined</code>, <code>null</code></td> @@ -138,3 +138,8 @@ badges: </tr> </tbody> </table> + +[移行ビルドのフラグ:](migration-build.html#compat-の設定) + +- `ATTR_FALSE_VALUE` +- `ATTR_ENUMERATED_COERSION` diff --git a/src/guide/migration/attrs-includes-class-style.md b/src/guide/migration/attrs-includes-class-style.md index 4647ab4a..1e5d961b 100644 --- a/src/guide/migration/attrs-includes-class-style.md +++ b/src/guide/migration/attrs-includes-class-style.md @@ -60,6 +60,8 @@ export default { `inheritAttrs: false` を使用しているコンポーネントでは、スタイルの適用が意図したとおりに動作することを確認してください。もし以前に `class` や `style` の特別な動作に依存していた場合、これらの属性が別の要素に適用されている可能性があるため、一部の見た目が崩れている可能性があります。 +[移行ビルドのフラグ: `INSTANCE_ATTRS_CLASS_STYLE`](migration-build.html#compat-の設定) + ## 参照 - [関連する RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0031-attr-fallthrough.md) diff --git a/src/guide/migration/children.md b/src/guide/migration/children.md index 13fd84d8..a3a3fa28 100644 --- a/src/guide/migration/children.md +++ b/src/guide/migration/children.md @@ -38,3 +38,7 @@ export default { ## 3.x の更新 3.x では、 `$children` プロパティが削除され、サポートされなくなりました。代わりに、もし子コンポーネントのインスタンスにアクセスする必要がある場合は、 [$refs](/guide/component-template-refs.html#template-refs) を使用することをお勧めします。 + +## 移行の戦略 + +[移行ビルドのフラグ: `INSTANCE_CHILDREN`](migration-build.html#compat-の設定) diff --git a/src/guide/migration/custom-directives.md b/src/guide/migration/custom-directives.md index be975338..8ec9217c 100644 --- a/src/guide/migration/custom-directives.md +++ b/src/guide/migration/custom-directives.md @@ -37,7 +37,6 @@ Vue.directive('highlight', { ## 3.x での構文 - ただし、Vue 3 では、カスタムディレクティブ用のよりまとまりのある API を作成しました。Vue 2 では、似たようなイベントにフックしているにもかかわらず、コンポーネントのライフサイクルメソッドとは大きく異なります。これらを次のように統合しました。 - **created** - 追加されました！これは、要素の属性やイベントリスナーが適用される前に呼び出されます。 @@ -53,7 +52,8 @@ Vue.directive('highlight', { ```js const MyDirective = { - beforeMount(el, binding, vnode, prevVnode) {}, + created(el, binding, vnode, prevVnode) {}, // new + beforeMount() {}, mounted() {}, beforeUpdate() {}, // 追加 updated() {}, @@ -101,5 +101,9 @@ mounted(el, binding, vnode) { ``` :::warning -[fragments](/guide/migration/fragments.html#overview) のサポートにより、コンポーネントは複数のルートノードを持つ可能性があります。マルチルートコンポーネントに適用すると、ディレクティブは無視され、警告がログ出力されます。 +[fragments](/guide/migration/fragments.html#overview) のサポートにより、コンポーネントは複数のルートノードを持つ可能性があります。マルチルートコンポーネントに適用すると、カスタムディレクティブは無視され、警告がログ出力されます。 ::: + +## 移行の戦略 + +[移行ビルドのフラグ: `CUSTOM_DIR`](migration-build.html#compat-の設定) diff --git a/src/guide/migration/custom-elements-interop.md b/src/guide/migration/custom-elements-interop.md index 19421d0c..9985c350 100644 --- a/src/guide/migration/custom-elements-interop.md +++ b/src/guide/migration/custom-elements-interop.md @@ -96,6 +96,8 @@ Vue では、ブラウザで普遍的に利用できるようになる前のネ document.createElement('button', { is: 'plastic-button' }) ``` +[移行ビルドのフラグ: `COMPILER_IS_ON_ELEMENT`](migration-build.html#compat-の設定) + ## `v-is` は In-DOM テンプレートパースのための回避策 > 注: このセクションは、Vue テンプレートがページの HTML に直接記述されている場合にのみ影響します。 diff --git a/src/guide/migration/data-option.md b/src/guide/migration/data-option.md index c3f61080..1159200e 100644 --- a/src/guide/migration/data-option.md +++ b/src/guide/migration/data-option.md @@ -94,9 +94,9 @@ Vue 2.x での `$data` の結果は: ```json { - user: { - id: 2, - name: 'Jack' + "user": { + "id": 2, + "name": "Jack" } } ``` @@ -105,12 +105,14 @@ Vue 2.x での `$data` の結果は: ```json { - user: { - id: 2 + "user": { + "id": 2 } } ``` +[移行ビルドのフラグ: `OPTIONS_DATA_FN`](migration-build.html#compat-の設定) + ## 移行の戦略 オブジェクト宣言を利用しているユーザーには以下を推奨します: @@ -119,3 +121,8 @@ Vue 2.x での `$data` の結果は: - 共有データへの参照、新しい共有オブジェクトを指すようにを書き換える ミックスインのディープマージに依存しているユーザーには、そのような依存を完全に避けるためにコードをリファクタリングすることをお勧めします。ミックスインのディープマージは非常に暗黙的であり、コードロジックの理解やデバッグがより難しくなる可能性があります。 + +[移行ビルドのフラグ:](migration-build.html#compat-の設定) + +- `OPTIONS_DATA_FN` +- `OPTIONS_DATA_MERGE` diff --git a/src/guide/migration/events-api.md b/src/guide/migration/events-api.md index 8d2e9cd4..e6d82ef7 100644 --- a/src/guide/migration/events-api.md +++ b/src/guide/migration/events-api.md @@ -79,3 +79,5 @@ export default { これは Vue 2 と同じような Event Emitter API を提供します。 これらのメソッドは、Vue 3 の将来の互換ビルドでもサポートされる可能性があります。 + +[移行ビルドのフラグ: `INSTANCE_EVENT_EMITTER`](migration-build.html#compat-の設定) diff --git a/src/guide/migration/filters.md b/src/guide/migration/filters.md index b906b6ba..b1de581b 100644 --- a/src/guide/migration/filters.md +++ b/src/guide/migration/filters.md @@ -73,6 +73,11 @@ badges: フィルタを使う代わりに、算出プロパティか関数に置き換えることを推奨します。 +[移行ビルドのフラグ:](migration-build.html#compat-の設定) + +- `FILTERS` +- `COMPILER_FILTERS` + ### グローバルフィルタ もし、グローバルにフィルタを登録していて、そしてアプリケーション全体でそのフィルタを使用している場合、そのフィルタを個々のコンポーネントで算出プロパティやメソッドに置き換えるのは不便でしょう。 diff --git a/src/guide/migration/functional-components.md b/src/guide/migration/functional-components.md index 2f44d616..caa467ec 100644 --- a/src/guide/migration/functional-components.md +++ b/src/guide/migration/functional-components.md @@ -117,3 +117,4 @@ export default { - [移行: Render 関数](/guide/migration/render-function-api.html) - [ガイド: Render 関数](/guide/render-function.html) +- [移行ビルドのフラグ: `COMPONENT_FUNCTIONAL`](migration-build.html#compat-の設定) diff --git a/src/guide/migration/global-api.md b/src/guide/migration/global-api.md index c6073c22..7826959e 100644 --- a/src/guide/migration/global-api.md +++ b/src/guide/migration/global-api.md @@ -85,6 +85,7 @@ const app = createApp({}) | Vue.mixin | app.mixin | | Vue.use | app.use ([以下を参照](#a-note-for-plugin-authors)) | | Vue.prototype | app.config.globalProperties ([以下を参照](#vue-prototype-replaced-by-config-globalproperties)) | +| Vue.extend | _削除_ ([以下を参照](#vue-extend-replaced-by-definecomponent)) | グローバルに振る舞いを変更しないその他のグローバル API は [グローバル API の Treeshaking](./global-api-treeshaking.html) にあるように、名前付きエクスポートになりました。 @@ -94,6 +95,8 @@ Vue 3.x では "use production build" のヒントは、"dev + full build" (ラ ES Modules ビルドでは、モジュールバンドラーと一緒に使用されていることと、ほとんどの場合 CLI やボイラープレートで本番環境が適切に設定されているため、このヒントは表示されなくなりました。 +[移行ビルドのフラグ: `CONFIG_PRODUCTION_TIP`](migration-build.html#compat-の設定) + ### `config.ignoredElements` は `config.isCustomElement` に変更 この設定オプションはネイティブのカスタム要素をサポートする意図で導入されたため、それがわかるように名前に変更しました。新しいオプションでは、以前の文字列 / RegExp の方法より、柔軟な方法を提供する関数を期待します。 @@ -115,6 +118,8 @@ Vue 3 では、要素がコンポーネントであるかどうかのチェッ - これは、Vue CLI 設定の新しいトップレベルのオプションになります。 ::: +[移行ビルドのフラグ: `CONFIG_IGNORED_ELEMENTS`](migration-build.html#compat-の設定) + ### `Vue.prototype` は `config.globalProperties` と置換 Vue 2 では、すべてのコンポーネントでアクセス可能なプロパティを追加するために、 `Vue.prototype` がよく使われていました。 @@ -134,6 +139,58 @@ app.config.globalProperties.$http = () => {} また `globalProperties` の代わりに `provide` ([後述](#provide-inject)) を使うことも考えられます。 +[移行ビルドのフラグ: `GLOBAL_PROTOTYPE`](migration-build.html#compat-の設定) + +### `Vue.extend` の削除 + +Vue 2.x では、`Vue.extend`を使って、コンポーネントのオプションを含むオブジェクトを引数に、Vue のベースコンストラクタの「サブクラス」を作成していました。Vue 3.x では、コンポーネントコンストラクタの概念はもうありません。コンポーネントのマウントには、常に `createApp` グローバル API を使用する必要があります。 + +```js +// 以前 - Vue 2 + +// コンストラクタの作成 +const Profile = Vue.extend({ + template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>', + data() { + return { + firstName: 'Walter', + lastName: 'White', + alias: 'Heisenberg' + } + } +}) +// Profile のインスタンスを作成し、それを要素にマウントする +new Profile().$mount('#mount-point') +``` + +```js +// 今後 - Vue 3 +const Profile = { + template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>', + data() { + return { + firstName: 'Walter', + lastName: 'White', + alias: 'Heisenberg' + } + } +} + +Vue.createApp(Profile).mount('#mount-point') +``` + +#### 型推論 + +Vue 2 では、`Vue.extend`は、コンポーネントのオプションに TypeScript の型推論を提供するためにも使われていました。Vue 3 では、同じ目的のために、`defineComponent`グローバル API を`Vue.extend`の代わりに使用することができます。 + +なお、`defineComponent`の戻り値の型はコンストラクタのような型ですが、これは TSX の推論にのみ使用されます。実行時には、`defineComponent`はほとんど何もせず、オプションオブジェクトをそのまま返します。 + +#### コンポーネントの継承 + +Vue 3 では継承やミックスインよりも、 [Composition API](/api/composition-api.html) によるコンポジションを強く推奨しています。 何らかの理由でコンポーネントの継承が必要な場合は、`Vue.extend` の代わりに [`extends` オプション](/api/options-composition.html#extends) を使用することができます。 + +[移行ビルドのフラグ: `GLOBAL_EXTEND`](migration-build.html#compat-の設定) + ### プラグイン作者へのノート プラグイン作者の一般的なプラクティスとして、`Vue.use` を使ってプラグインを自動的に UMD ビルドにインストールさせるものがありました。例えば、公式の `vue-router` プラグインのブラウザ環境へのインストールは以下のようになっていました: @@ -187,6 +244,8 @@ app.directive('focus', { app.mount('#app') ``` +[移行ビルドのフラグ: `GLOBAL_MOUNT`](migration-build.html#compat-の設定) + ## Provide / Inject Vue 2.x のルートインスタンスで `provide` オプションを使用するのとどうように、Vue 3 のアプリケーションインスタンスでも、アプリケーション内の任意のコンポーネントに注入できる依存関係を提供できます: diff --git a/src/guide/migration/inline-template-attribute.md b/src/guide/migration/inline-template-attribute.md index b3019ee7..409ce867 100644 --- a/src/guide/migration/inline-template-attribute.md +++ b/src/guide/migration/inline-template-attribute.md @@ -30,6 +30,8 @@ Vue 2.x では子コンポーネントの内部のコンテンツを分散コン `inline-template` のユースケースの多くでは、すべてのテンプレートが HTML ページ内に直接書かれるようなビルドツールを使わないセットアップを想定しています。 +[移行ビルドのフラグ: `COMPILER_INLINE_TEMPLATE`](migration-build.html#compat-の設定) + ### オプション #1: `<script>` タグを使う このような場合の最も簡単な回避策は、`<script>` を代替として使うことです: diff --git a/src/guide/migration/introduction.md b/src/guide/migration/introduction.md index ec16fd96..e59536ff 100644 --- a/src/guide/migration/introduction.md +++ b/src/guide/migration/introduction.md @@ -7,7 +7,8 @@ Vue.js を使うのは初めてですか？ [エッセンシャルガイド](/gu このガイドは主に、Vue 3 の新機能と変更点について学びたい Vue 2 の経験があるユーザーを対象としています。 **Vue 3 を試す前にこのガイドを上から下まで読む必要はありません。** 多くの変更があったように見えますが、Vue についてあなたが知っていて愛していることの多くは同じままです。 しかし、私たちは可能な限り徹底し、文書化されたすべての変更について詳細な説明と例を提供したいと考えました。 - [クイックスタート](#クイックスタート) -- [注目すべき新機能](#注目すべき新機能) +- [移行ビルド](#移行ビルド) +- [注目すべき新機能](#注目すべき新機能) - [破壊的変更](#破壊的変更) - [サポートライブラリ](#サポートライブラリ) @@ -20,6 +21,8 @@ Vue.js を使うのは初めてですか？ [エッセンシャルガイド](/gu ## クイックスタート +新しいプロジェクトで Vue 3 をすぐに試してみたい場合: + - CDN 経由: `<script src="https://unpkg.com/vue@next"></script>` - [Codepen](https://codepen.io/yyx990803/pen/OJNoaZL) 上のブラウザ内プレイグラウンド - [CodeSandbox](https://v3.vue.new) 上のブラウザ内サンドボックス @@ -37,6 +40,10 @@ Vue.js を使うのは初めてですか？ [エッセンシャルガイド](/gu # select vue 3 preset ``` +## 移行ビルド + +既存の Vue 2 プロジェクトやライブラリを Vue 3 にアップグレードする場合は、Vue 2 と互換性のある API を提供する Vue 3 のビルドを提供しています。詳しくは[移行ビルド](./migration-build.html)のページをご覧ください。 + ## 注目すべき新機能 Vue 3 で注目すべきいくつかの新機能の次のとおりです。 @@ -53,10 +60,6 @@ Vue 3 で注目すべきいくつかの新機能の次のとおりです。 ## 破壊的変更 -::: info INFO -Vue 2 と互換性のある動作と、互換性のない使用法に対する実行時警告を備えた Vue 3 の移行専用ビルドの開発に取り組んでいます。 重要な Vue 2 アプリの移行を計画している場合は、よりスムーズな体験のために移行ビルドを待つことを強くお勧めします。 -::: - 以下は、2.x からの破壊的変更の一覧です。: ### グローバル API diff --git a/src/guide/migration/key-attribute.md b/src/guide/migration/key-attribute.md index a76bafbb..82fddddf 100644 --- a/src/guide/migration/key-attribute.md +++ b/src/guide/migration/key-attribute.md @@ -59,8 +59,8 @@ Vue 2.x では、`<template>` タグに `key` を含めることができませ ```html <!-- Vue 2.x --> <template v-for="item in list"> - <div :key="item.id">...</div> - <span :key="item.id">...</span> + <div :key="'heading-' + item.id">...</div> + <span :key="'content-' + item.id">...</span> </template> ``` diff --git a/src/guide/migration/keycode-modifiers.md b/src/guide/migration/keycode-modifiers.md index 71c3205e..2cf895c9 100644 --- a/src/guide/migration/keycode-modifiers.md +++ b/src/guide/migration/keycode-modifiers.md @@ -54,3 +54,8 @@ Vue.config.keyCodes = { ## 移行の戦略 キーコードを利用している場合は、ケバブケースでの命名に変更することを推奨します。 + +[移行ビルドのフラグ:](migration-build.html#compat-の設定) + +- `CONFIG_KEY_CODES` +- `V_ON_KEYCODE_MODIFIER` diff --git a/src/guide/migration/listeners-removed.md b/src/guide/migration/listeners-removed.md index 2d8ab1db..524f0e27 100644 --- a/src/guide/migration/listeners-removed.md +++ b/src/guide/migration/listeners-removed.md @@ -65,6 +65,8 @@ export default { `$listeners` の使用をすべて削除します。 +[移行ビルドのフラグ: `INSTANCE_LISTENERS`](migration-build.html#compat-の設定) + ## 参照 - [関連する RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0031-attr-fallthrough.md) diff --git a/src/guide/migration/migration-build.md b/src/guide/migration/migration-build.md new file mode 100644 index 00000000..86ec22ba --- /dev/null +++ b/src/guide/migration/migration-build.md @@ -0,0 +1,330 @@ +# 移行ビルド + +## 概要 + +`@vue/compat` (別名「移行ビルド」)は、Vue 2 と互換性のある動作を設定できる Vue 3 のビルドです。 + +移行ビルドは、デフォルトで Vue 2 モードで動作します。ほとんどのパブリック API は、ほんの少しの例外を除いて Vue 2 とまったく同じように動作します。Vue 3 で変更されたり、非推奨となった機能を使用すると実行時に警告が表示されます。機能の互換性は、コンポーネントごとに有効/無効を設定することもできます。 + +### 想定される使用例 + +- ([制限事項](#既知の制限事項)ありでの) Vue 2 アプリケーションの Vue 3 へのアップグレード +- ライブラリを Vue 3 に対応させるための移行作業 +- また、Vue 3 をまだ試していない Vue 2 の経験豊富な開発者は、移行ビルドを Vue 3 の代わりに使用してバージョン間の違いを学ぶことができます。 + +### 既知の制限事項 + +移行ビルドは Vue 2 の動作を可能な限り模倣するようにしていますが、次のようないくつかの制限事項があるため、アプリがアップグレードの対象にならない場合があります。 + +- Vue 2 の内部 API またはドキュメント化されていない動作に頼った依存関係。最も一般的なケースは、 `VNodes` プライベートプロパティの使用です。[Vuetify](https://vuetifyjs.com/en/)、[Quasar](https://quasar.dev/)、[ElementUI](https://element.eleme.io/#/en-US)などのコンポーネントライブラリに依存している場合は、Vue 3 と互換性のあるバージョンを待つことをお勧めします。 + +- Internet Explorer 11 のサポート: [Vue 3 は公式に IE11 サポートの計画を中止しました](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0038-vue3-ie11-support.md)。まだ IE11 以下をサポートする必要がある場合は、Vue 2 のままにしておく必要があります。 + +- サーバーサイドレンダリング: 移行ビルドは SSR にも使用できますが、カスタム SSR セットアップの移行はもっと複雑です。一般的な対処法は、`vue-server-renderer` を[`@vue/server-renderer`](https://github.com/vuejs/vue-next/tree/master/packages/server-renderer)に置き換えることです。Vue 3 ではバンドルレンダラが提供されなくなったため、Vue 3 の SSR を[Vite](https://vitejs.dev/guide/ssr.html)で使用することが推奨されています。また、[Nuxt.js](https://nuxtjs.org/)を使用している場合は、Nuxt 3 を待ったほうがよいでしょう。 + +### 期待すること + +今回の移行ビルドでは、公開されている Vue 2 の API と動作のみをカバーすることを目的としていることに注意してください。ドキュメント化されていない動作に依存しているために移行ビルドでアプリケーションが動作しなかったとしても、そのようなケースへの対応として移行ビルドを調整する可能性は低いでしょう。問題となっている動作への依存を排除するためのリファクタリングを検討してください。 + +注意点としては、アプリケーションの規模が大きく複雑な場合は、移行ビルドを使用しても移行が困難な場合があります。残念ながらアップグレードできない場合は、Composition API やその他の Vue 3 の機能を 2.7 のリリース(2021 年第 3 四半期後半予定)でバックポートする予定であることを覚えておいてください。 + +移行用のビルドでアプリを動作させることができた場合、移行が完了する前に本番環境にリリースすることが**可能**です。パフォーマンスや容量に若干のオーバーヘッドが発生しますが、本番環境の UX には目立った影響はありません。Vue 2 の動作に依存している依存関係があり、アップグレードや置き換えができない場合にはそうする必要があるかもしれません。 + +移行用のビルドは 3.1 から提供され、3.2 のリリースラインと並行して引き続き公開されます。移行ビルドの公開は、将来のマイナーバージョン(2021 年の年末以降)で終了する予定ですので、それまでに標準ビルドへの切り替えを目指してください。 + +## アップグレードのワークフロー + +以下のワークフローは、実際の Vue 2 アプリ(Vue HackerNews 2.0)を Vue 3 に移行する手順を示しています。完全なコミットは[こちら](https://github.com/vuejs/vue-hackernews-2.0/compare/migration)から確認できます。なお、実際に必要な手順はプロジェクトによって異なるため、これらの手順は厳密な指示ではなく一般的なガイダンスとして扱ってください。 + +### 準備 + +- まだ [非推奨の named/scoped スロット構文](https://vuejs.org/v2/guide/components-slots.html#Deprecated-Syntax) を使用している場合は、まず最新の構文にアップデートしてください(構文は 2.6 ですでにサポートされています)。 + +### インストール + +1. 必要に応じてツールをアップグレードします。 + + - カスタム webpack セットアップを使用している場合: `vue-loader` を `^16.0.0` にアップグレードします。 + - `vue-cli` を使用している場合: `vue upgrade` で最新の `@vue/cli-service` にアップグレードします。 + - (代替手段) [Vite](https://vitejs.dev/) + [vite-plugin-vue2](https://github.com/underfin/vite-plugin-vue2)に移行します。[[コミット例](https://github.com/vuejs/vue-hackernews-2.0/commit/565b948919eb58f22a32afca7e321b490cb3b074)] + +2. `package.json` で `vue` を 3.1 にアップデートし、同じバージョンの `@vue/compat` をインストールます。また `vue-template-compiler` (もしあれば) を `@vue/compiler-sfc` に置き換えます。 + + ```diff + "dependencies": { + - "vue": "^2.6.12", + + "vue": "^3.1.0", + + "@vue/compat": "^3.1.0" + ... + }, + "devDependencies": { + - "vue-template-compiler": "^2.6.12" + + "@vue/compiler-sfc": "^3.1.0" + } + ``` + + [コミット例](https://github.com/vuejs/vue-hackernews-2.0/commit/14f6f1879b43f8610add60342661bf915f5c4b20) + +3. ビルド設定で、`vue` を `@vue/compat` にエイリアスし、Vue のコンパイラオプションで compat モードを有効にします。 + + **設定のサンプル** + + <details> + <summary><b>vue-cli</b></summary> + + ```js + // vue.config.js + module.exports = { + chainWebpack: config => { + config.resolve.alias.set('vue', '@vue/compat') + + config.module + .rule('vue') + .use('vue-loader') + .tap(options => { + return { + ...options, + compilerOptions: { + compatConfig: { + MODE: 2 + } + } + } + }) + } + ``` + + </details> + + <details> + <summary><b>Plain webpack</b></summary> + + ```js + // webpack.config.js + module.exports = { + resolve: { + alias: { + vue: '@vue/compat' + } + }, + module: { + rules: [ + { + test: /\.vue$/, + loader: 'vue-loader', + options: { + compilerOptions: { + compatConfig: { + MODE: 2 + } + } + } + } + ] + } + } + ``` + + </details> + + <details> + <summary><b>Vite</b></summary> + + ```js + // vite.config.js + export default { + resolve: { + alias: { + vue: '@vue/compat' + } + }, + plugins: [ + vue({ + template: { + compilerOptions: { + compatConfig: { + MODE: 2 + } + } + } + }) + ] + } + ``` + + </details> + +4. この時点で、あなたのアプリケーションは、いくつかのコンパイル時のエラーや警告に遭遇するかもしれません(例：フィルターの使用)。まずはそれらを修正してください。コンパイラの警告がすべて消えた場合は、コンパイラを Vue 3 モードに設定することもできます。 + + [コミット例](https://github.com/vuejs/vue-hackernews-2.0/commit/b05d9555f6e115dea7016d7e5a1a80e8f825be52) + +5. エラーを修正した後、前述の[制限事項](#既知の制限事項)の対象になっていなければアプリを実行できるはずです。 + + コマンドラインとブラウザのコンソールの両方に、たくさんの警告が表示されると思います。ここでは一般的なヒントをご紹介します。 + + - ブラウザのコンソールでは、特定の警告をフィルタリングすることができます。フィルタを使用して、一度に 1 つの項目を修正することに集中することをお勧めします。また、`-GLOBAL_MOUNT` のような否定のフィルタを使うこともできます。 + + - [compat の設定](#compat-の設定)で特定の非推奨事項を抑制することができます。 + + - 警告の中には、使用している依存関係(例: `vue-router`)が原因となっているものがあります。警告のコンポーネントトレースやスタックトレース(クリックで展開)から確認できます。まず、自分のソースコードに起因する警告の修正に集中してください。 + + - `vue-router` を使用している場合は、`vue-router` v4 にアップグレードするまで、`<transition>` と `<keep-alive>` は `<router-view>` で動作しないことに注意してください。 + +6. [`<transition>` のクラス名](/guide/migration/transition.html) を更新します。これは、実行時の警告が出ない唯一の機能です。プロジェクト全体で `.*-enter` と `.*-leave` の CSS クラス名を検索することができます。 + + [コミット例](https://github.com/vuejs/vue-hackernews-2.0/commit/d300103ba622ae26ac26a82cd688e0f70b6c1d8f) + +7. [新しいグローバルマウント API](/guide/migration/global-api.html#a-new-global-api-createapp)を使用するようにアプリのエントリを更新します。 + + [コミット例](https://github.com/vuejs/vue-hackernews-2.0/commit/a6e0c9ac7b1f4131908a4b1e43641f608593f714) + +8. [`vuex` を v4 にアップグレード](https://next.vuex.vuejs.org/guide/migrating-to-4-0-from-3-x.html)します。 + + [コミット例](https://github.com/vuejs/vue-hackernews-2.0/commit/5bfd4c61ee50f358cd5daebaa584f2c3f91e0205) + +9. [`vuex-router` を v4 にアップグレード](https://next.router.vuejs.org/guide/migration/index.html)します。 `vuex-router-sync` も使用している場合は、ストアゲッターで置き換えることができます。 + + アップグレード後、`<router-view>` で `<transition>` や `<keep-alive>` を使用するには、新しい [scoped-slot ベースの構文](https://next.router.vuejs.org/guide/migration/index.html#router-view-keep-alive-and-transition) を使用する必要があります。 + + [コミット例](https://github.com/vuejs/vue-hackernews-2.0/commit/758961e73ac4089890079d4ce14996741cf9344b) + +10. 個々の警告を取り除きます。一部の機能は、Vue 2 と Vue 3 の間で矛盾した動作をすることに注意してください。例えば、Render 関数 API や、関数型コンポーネントと非同期コンポーネントの変更などがあります。アプリケーションの他の部分に影響を与えずに Vue 3 の API に移行するには、[`compatConfig` オプション](#コンポーネントごとの設定)を使用して、コンポーネントごとに Vue 3 の動作をオプトインすることができます。 + + [コミット例](https://github.com/vuejs/vue-hackernews-2.0/commit/d0c7d3ae789be71b8fd56ce79cb4cb1f921f893b) + +11. すべての警告が修正されたら、移行ビルドを削除して Vue 3 に正しく切り替えることができます。ただし、Vue 2 の動作に頼った依存関係が残っている場合は、切り替えできないことがあります。 + + [コミット例](https://github.com/vuejs/vue-hackernews-2.0/commit/9beb45490bc5f938c9e87b4ac1357cfb799565bd) + +## compat の設定 + +### グローバル設定 + +compat の機能は個別に無効にすることができます: + +```js +import { configureCompat } from 'vue' + +// 特定の機能のために compat を無効にする +configureCompat({ + FEATURE_ID_A: false, + FEATURE_ID_B: false +}) +``` + +また、アプリケーション全体をデフォルトで Vue 3 の動作にして、特定の compat 機能だけを有効にすることもできます: + +```js +import { configureCompat } from 'vue' + +// すべてを Vue 3 の動作にデフォルト化して、 +// 特定の機能のみ compat を有効にする +configureCompat({ + MODE: 3, + FEATURE_ID_A: true, + FEATURE_ID_B: true +}) +``` + +### コンポーネントごとの設定 + +コンポーネントは `compatConfig` オプションを使用することができます。このオプションには、グローバルの `configureCompat` メソッドと同じオプションが指定できます: + +```js +export default { + compatConfig: { + MODE: 3, // このコンポーネントのみ Vue 3 の動作をオプトインする + FEATURE_ID_A: true // 機能をコンポーネントレベルで切り替えることも可能です + } + // ... +} +``` + +### コンパイラ固有の設定 + +`COMPILER_` で始まる機能は、コンパイラ固有のものです。完全なビルド(ブラウザ内コンパイラ付き)を使用している場合は、実行時に設定することができます。しかし、ビルドセットアップを使用している場合は、代わりにビルド設定の `compilerOptions` で設定する必要があります(上記の設定例を参照)。 + +## 機能リファレンス + +### 互換性の種類 + +- ✔ 完全な互換性 +- ◐ 注意点付きの部分的な互換性 +- ⨂ 互換性なし(警告のみ) +- ⭘ compat のみ(警告なし) + +### 互換性なし + +> 前もって修正する必要がある、またはエラーになる可能性が高い + +| ID | 分類 | 説明 | ドキュメント | +| ------------------------------------- | ---- | ---------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | +| GLOBAL_MOUNT_CONTAINER | ⨂ | マウントされたアプリケーションは、マウント先の要素を置き換えません | [link](/guide/migration/mount-changes.html) | +| CONFIG_DEVTOOLS | ⨂ | production の devtools がビルド時のフラグになりました | [link](https://github.com/vuejs/vue-next/tree/master/packages/vue#bundler-build-feature-flags) | +| COMPILER_V_IF_V_FOR_PRECEDENCE | ⨂ | `v-if` と `v-for` が同じ要素で使われたときの優先順位が変更されました | [link](/guide/migration/v-if-v-for.html) | +| COMPILER_V_IF_SAME_KEY | ⨂ | `v-if` のブランチでは、同じキーを持つことができなくなりました | [link](/guide/migration/key-attribute.html#on-conditional-branches) | +| COMPILER_V_FOR_TEMPLATE_KEY_PLACEMENT | ⨂ | `<template v-for>` のキーは、`<template>` に置くことが必要になりました | [link](/guide/migration/key-attribute.html#with-template-v-for) | +| COMPILER_SFC_FUNCTIONAL | ⨂ | `<template functional>` は SFC でサポートされなくなりました | [link](/guide/migration/functional-components.html#single-file-components-sfcs) | | | + +### 注意点付きの部分的な互換性 + +| ID | 分類 | 説明 | ドキュメント | +| ------------------------ | ---- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- | +| CONFIG_IGNORED_ELEMENTS | ◐ | `config.ignoredElements` は `config.compilerOptions.isCustomElement` になりました(ブラウザコンパイラビルドでのみ)。ビルドセットアップを使用している場合は、`isCustomElement` をビルド設定で渡さなければなりません | [link](/guide/migration/global-api.html#config-ignoredelements-is-now-config-iscustomelement) | +| COMPILER_INLINE_TEMPLATE | ◐ | `inline-template` は削除されました(compat はブラウザのコンパイラビルドでのみサポートされます) | [link](/guide/migration/inline-template-attribute.html) | +| PROPS_DEFAULT_THIS | ◐ | props のデフォルトファクトリは `this` にアクセスできなくなりました(compat モードに置いて `this` は実際のインスタンスではなく、props、`$options` および injections を公開しているだけになります) | [link](/guide/migration/props-default-this.html) | +| INSTANCE_DESTROY | ◐ | `$destroy` インスタンスメソッドは削除されました(compat モードでは、ルートインスタンスでのみサポートされています) | | +| GLOBAL_PRIVATE_UTIL | ◐ | `Vue.util` はプライベートとなり、使用できなくなりました | | +| CONFIG_PRODUCTION_TIP | ◐ | `config.productionTip` が不要になりました | [link](/guide/migration/global-api.html#config-productiontip-は削除されました) | +| CONFIG_SILENT | ◐ | `config.silent` は削除されました | + +### compat のみ(警告なし) + +| ID | 分類 | 説明 | ドキュメント | +| ------------------ | ---- | --------------------------------------------------- | ---------------------------------------- | +| TRANSITION_CLASSES | ⭘ | トランジションの enter/leave クラスが変更されました | [link](/guide/migration/transition.html) | + +### 完全な互換性 + +| ID | 分類 | 説明 | ドキュメント | +| ---------------------------- | ---- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------ | +| GLOBAL_MOUNT | ✔ | new Vue() -> createApp | [link](/guide/migration/global-api.html#mounting-app-instance) | +| GLOBAL_EXTEND | ✔ | Vue.extend は削除されました(`defineComponent`または`extends`オプションを使用してください) | [link](/guide/migration/global-api.html#vue-extend-replaced-by-definecomponent) | +| GLOBAL_PROTOTYPE | ✔ | `Vue.prototype` -> `app.config.globalProperties` | [link](/guide/migration/global-api.html#vue-prototype-replaced-by-config-globalproperties) | +| GLOBAL_SET | ✔ | `Vue.set` は削除されました(不要になりました) | | +| GLOBAL_DELETE | ✔ | `Vue.delete` は削除されました(不要になりました) | | +| GLOBAL_OBSERVABLE | ✔ | `Vue.observable` は削除されました( `reactive` を使用してください) | [link](/api/basic-reactivity.html) | +| CONFIG_KEY_CODES | ✔ | config.keyCodes は削除されました | [link](/guide/migration/keycode-modifiers.html) | +| CONFIG_WHITESPACE | ✔ | Vue 3 では、ホワイトスペースのデフォルトは `"condense"` になりました | | +| INSTANCE_SET | ✔ | `vm.$set` は削除されました(不要になりました) | | +| INSTANCE_DELETE | ✔ | `vm.$delete` は削除されました(不要になりました) | | +| INSTANCE_EVENT_EMITTER | ✔ | `vm.$on`、`vm.$off`、`vm.$once` は削除されました | [link](/guide/migration/events-api.html) | +| INSTANCE_EVENT_HOOKS | ✔ | インスタンスが `hook:x` イベントを発行しなくなりました。 | [link](/guide/migration/vnode-lifecycle-events.html) | +| INSTANCE_CHILDREN | ✔ | `vm.$children` は削除されました | [link](/guide/migration/children.html) | +| INSTANCE_LISTENERS | ✔ | `vm.$listeners` は削除されました | [link](/guide/migration/listeners-removed.html) | +| INSTANCE_SCOPED_SLOTS | ✔ | `vm.$scopedSlots` は削除されました。 `vm.$slots` は関数を公開するようになりました。 | [link](/guide/migration/slots-unification.html) | +| INSTANCE_ATTRS_CLASS_STYLE | ✔ | `$attrs` に `class` と `style` が追加されました | [link](/guide/migration/attrs-includes-class-style.html) | +| OPTIONS_DATA_FN | ✔ | すべての場合において、`data` は関数であることが必要になりました | [link](/guide/migration/data-option.html) | +| OPTIONS_DATA_MERGE | ✔ | mixin や extension からの `data` が浅くマージされるようになりました | [link](/guide/migration/data-option.html) | +| OPTIONS_BEFORE_DESTROY | ✔ | `beforeDestroy` -> `beforeUnmount` | | +| OPTIONS_DESTROYED | ✔ | `destroyed` -> `unmounted` | | +| WATCH_ARRAY | ✔ | 配列の watch ではディープなものでない限り、 mutation を発行しなくなりました | [link](/guide/migration/watch.html) | +| V_FOR_REF | ✔ | `v-for` の中の `ref` が refs の配列を登録しなくなりました | [link](/guide/migration/array-refs.html) | +| V_ON_KEYCODE_MODIFIER | ✔ | `v-on` が keyCode 修飾子をサポートしなくなりました | [link](/guide/migration/keycode-modifiers.html) | +| CUSTOM_DIR | ✔ | カスタムディレクティブのフック名が変更されました | [link](/guide/migration/custom-directives.html) | +| ATTR_FALSE_VALUE | ✔ | バインディングの値が真偽値の `false` の場合、属性を削除しないようになりました | [link](/guide/migration/attribute-coercion.html) | +| ATTR_ENUMERATED_COERSION | ✔ | 特殊なケースの列挙された属性は廃止されました | [link](/guide/migration/attribute-coercion.html) | +| TRANSITION_GROUP_ROOT | ✔ | `<transition-group>` は、デフォルトでルート要素をレンダリングしなくなりました | [link](/guide/migration/transition-group.html) | +| COMPONENT_ASYNC | ✔ | 非同期コンポーネントの API が変更されました(`defineAsyncComponent` が必要になりました) | [link](/guide/migration/async-components.html) | +| COMPONENT_FUNCTIONAL | ✔ | 関数型コンポーネントの API が変更されました(プレーンな関数であることが必須になりました) | [link](/guide/migration/functional-components.html) | +| COMPONENT_V_MODEL | ✔ | コンポーネントの v-model が再構築されました | [link](/guide/migration/v-model.html) | +| RENDER_FUNCTION | ✔ | Render 関数の API が変更されました | [link](/guide/migration/render-function-api.html) | +| FILTERS | ✔ | フィルタは削除されました(このオプションは、ランタイムのフィルタ API にのみ影響します) | [link](/guide/migration/filters.html) | +| COMPILER_IS_ON_ELEMENT | ✔ | `is` の使用は `<component>` のみに制限されるようになりました | [link](/guide/migration/custom-elements-interop.html) | +| COMPILER_V_BIND_SYNC | ✔ | `v-bind.sync` は `v-model`に置き換えられ、引数を持つようになりました | [link](/guide/migration/v-model.html) | +| COMPILER_V_BIND_PROP | ✔ | `v-bind.prop` 修飾子は削除されました | | +| COMPILER_V_BIND_OBJECT_ORDER | ✔ | `v-bind="object"` は順番に注意が必要になりました | [link](/guide/migration/v-bind.html) | +| COMPILER_V_ON_NATIVE | ✔ | `v-on.native` 修飾子は削除されました | [link](/guide/migration/v-on-native-modifier-removed.html) | +| COMPILER_V_FOR_REF | ✔ | `v-for` 内の `ref`(コンパイラサポート) | | +| COMPILER_NATIVE_TEMPLATE | ✔ | 特別なディレクティブを持たない `<template>` がネイティブな要素としてレンダリングされるようになりました | | +| COMPILER_FILTERS | ✔ | フィルタ(コンパイラサポート) | | diff --git a/src/guide/migration/mount-changes.md b/src/guide/migration/mount-changes.md index 15c7bda6..9b395f65 100644 --- a/src/guide/migration/mount-changes.md +++ b/src/guide/migration/mount-changes.md @@ -88,6 +88,9 @@ app.mount('#app') </div> </body> ``` +## 移行の戦略 + +[移行ビルドのフラグ: `GLOBAL_MOUNT_CONTAINER`](migration-build.html#compat-の設定) ## 参照 diff --git a/src/guide/migration/props-default-this.md b/src/guide/migration/props-default-this.md index 2c7b4b94..02979ebf 100644 --- a/src/guide/migration/props-default-this.md +++ b/src/guide/migration/props-default-this.md @@ -22,11 +22,15 @@ export default { theme: { default (props) { // `props` 引数はコンポーネントに渡される生の値で、 - // 型やデフォルトの強制より前のものです。 + // 型やデフォルトの強制より前のものです。 // また、`inject` を使用して注入されたプロパティにアクセスすることもできます。 return inject('theme', 'default-theme') } } } } -``` \ No newline at end of file +``` + +## 移行の戦略 + +[移行ビルドのフラグ: `PROPS_DEFAULT_THIS`](migration-build.html#compat-の設定) diff --git a/src/guide/migration/render-function-api.md b/src/guide/migration/render-function-api.md index be661828..fb14cc5d 100644 --- a/src/guide/migration/render-function-api.md +++ b/src/guide/migration/render-function-api.md @@ -176,6 +176,8 @@ export default { ## 移行の戦略 +[移行ビルドのフラグ: `RENDER_FUNCTION`](migration-build.html#compat-の設定) + ### ライブラリの著者 `h` がグローバルにインポートされるということは、Vue コンポーネントを含むライブラリはどれも `import { h } from 'vue'` という記述がどこかに含まれていることを意味します。結果として、ライブラリの著者はビルドにおいて適切に Vue の外部化を設定することが求められるので、少し手間が増えます: diff --git a/src/guide/migration/slots-unification.md b/src/guide/migration/slots-unification.md index 651ae702..cd0a056d 100644 --- a/src/guide/migration/slots-unification.md +++ b/src/guide/migration/slots-unification.md @@ -63,3 +63,5 @@ this.$slots.header() 1. 3.x の `this.$scopedSlots` の出現箇所をすべて `this.$slots` に置き換えます。 2. `this.$slots.mySlot` のすべての出現箇所を `this.$slots.mySlot()` に置き換えます。 + +[移行ビルドのフラグ: `INSTANCE_SCOPED_SLOTS`](migration-build.html#compat-の設定) diff --git a/src/guide/migration/transition-group.md b/src/guide/migration/transition-group.md index f3379963..3f78a74b 100644 --- a/src/guide/migration/transition-group.md +++ b/src/guide/migration/transition-group.md @@ -35,6 +35,10 @@ Vue 3 では [Fragments](/guide/migration/fragments.html) があるので、コ </transition-group> ``` +## 移行の戦略 + +[移行ビルドのフラグ: `TRANSITION_GROUP_ROOT`](migration-build.html#compat-の設定) + ## 参照 - [トランジションクラスの変更](/guide/migration/transition.html) diff --git a/src/guide/migration/v-bind.md b/src/guide/migration/v-bind.md index bb3f83f7..3f0f33ae 100644 --- a/src/guide/migration/v-bind.md +++ b/src/guide/migration/v-bind.md @@ -44,3 +44,5 @@ Vue 3.x では、要素に `v-bind="object"` 構文と同一の個別のプロ ## 移行の戦略 もしこの上書きの機能を `v-bind` のために利用しているとしたら、`v-bind` 属性が個別のプロパティより前に定義されているか確認することを推奨します。 + +[移行ビルドのフラグ: `COMPILER_V_BIND_OBJECT_ORDER`](migration-build.html#compat-の設定) diff --git a/src/guide/migration/v-if-v-for.md b/src/guide/migration/v-if-v-for.md index 883965c5..97f8f58f 100644 --- a/src/guide/migration/v-if-v-for.md +++ b/src/guide/migration/v-if-v-for.md @@ -28,6 +28,8 @@ Vue.js で最も一般的に使われているディレクティブの 2 つは これをテンプレートレベルで管理するのではなく、これを実現する 1 つの方法は表示されている要素のリストを除外する算出プロパティを作成することです。 +[移行ビルドのフラグ: `COMPILER_V_IF_V_FOR_PRECEDENCE`](migration-build.html#compat-の設定) + ## 参照 - [リストレンダリング - フィルタ・ソート結果の表示](/guide/list.html#displaying-filtered-sorted-results) diff --git a/src/guide/migration/v-model.md b/src/guide/migration/v-model.md index 3a234e09..5129667b 100644 --- a/src/guide/migration/v-model.md +++ b/src/guide/migration/v-model.md @@ -182,6 +182,11 @@ this.$emit('update:title', newValue) } ``` +[移行ビルドのフラグ:](migration-build.html#compat-の設定) + +- `COMPONENT_V_MODEL` +- `COMPILER_V_BIND_SYNC` + ## 次のステップ 新しい `v-model` 構文の詳細については、以下を参照してください。 diff --git a/src/guide/migration/v-on-native-modifier-removed.md b/src/guide/migration/v-on-native-modifier-removed.md index a9a35af2..04638acd 100644 --- a/src/guide/migration/v-on-native-modifier-removed.md +++ b/src/guide/migration/v-on-native-modifier-removed.md @@ -49,6 +49,8 @@ badges: - `.native` 修飾子のすべてのインスタンスを削除します。 - すべてのコンポーネントが、 `emits` オプションでイベントを記録するようにします。 +[移行ビルドのフラグ: `COMPILER_V_ON_NATIVE`](migration-build.html#compat-の設定) + ## 参照 - [関連する RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0031-attr-fallthrough.md#v-on-listener-fallthrough) diff --git a/src/guide/migration/vnode-lifecycle-events.md b/src/guide/migration/vnode-lifecycle-events.md index 232d32eb..23552e94 100644 --- a/src/guide/migration/vnode-lifecycle-events.md +++ b/src/guide/migration/vnode-lifecycle-events.md @@ -43,6 +43,8 @@ Vue 3 では、イベント名のプレフィックスに `vnode-` がついて ほとんどの場合、プレフィックスの変更だけで済みます。ライフサイクルフックの `beforeDestroy` と `destroyed` は、それぞれ `beforeUnmount` と `unmounted` に名前が変更され、対応するイベント名も更新する必要があります。 +[移行ビルドのフラグ: `INSTANCE_EVENT_HOOKS`](migration-build.html#compat-の設定) + ## 参照 - [移行ガイド - イベント API](/guide/migration/events-api.html) diff --git a/src/guide/migration/watch.md b/src/guide/migration/watch.md index ab41a287..e6b09b2c 100644 --- a/src/guide/migration/watch.md +++ b/src/guide/migration/watch.md @@ -28,3 +28,5 @@ watch: { ## 移行の戦略 配列の変更を監視することに依存している場合は、 `deep` プロパティを追加して、コールバックが正しく実行されるようにします。 + +[移行ビルドのフラグ: `WATCH_ARRAY`](migration-build.html#compat-の設定) diff --git a/src/guide/ssr/getting-started.md b/src/guide/ssr/getting-started.md index 6443c23e..9354610a 100644 --- a/src/guide/ssr/getting-started.md +++ b/src/guide/ssr/getting-started.md @@ -14,7 +14,7 @@ yarn add @vue/server-renderer #### 注意点 -- Node.js のバージョンは 10 以上を推奨します。 +- Node.js のバージョンは 12 以上を推奨します。 - `@vue/server-renderer` と `vue` のバージョンが一致する必要があります。 - `@vue/server-renderer` はいくつかの Node.js ネイティブモジュールに依存しているため、 Node.js でのみ使用できます。将来的には他の JavaScript ランタイムで実行できるよりシンプルなビルドを提供するかもしれません。 diff --git a/src/guide/state-management.md b/src/guide/state-management.md index 9bb55630..a3159b4d 100644 --- a/src/guide/state-management.md +++ b/src/guide/state-management.md @@ -2,7 +2,7 @@ ## 公式の Flux ライクな実装 -大規模なアプリケーションは、たくさんのコンポーネント上に複数の状態が散らばっていることや、それらのコンポーネント間の相互作用が原因となって、複雑になりがちです。この問題を解消するために、Vue は Elm に触発された状態管理ライブラリの [Vuex](https://next.vuex.vuejs.org/) を提供しています。これは [vue-devtools](https://github.com/vuejs/vue-devtools) とも連携し、特別なセットアップなしで[タイムトラベルデバッグ](https://raw.githubusercontent.com/vuejs/vue-devtools/master/media/demo.gif)を提供します。 +大規模なアプリケーションは、たくさんのコンポーネント上に複数の状態が散らばっていることや、それらのコンポーネント間の相互作用が原因となって、複雑になりがちです。この問題を解消するために、Vue は Elm に触発された状態管理ライブラリの [Vuex](https://next.vuex.vuejs.org/) を提供しています。これは [vue-devtools](https://github.com/vuejs/vue-devtools) とも連携し、特別なセットアップなしで[タイムトラベルデバッグ](https://raw.githubusercontent.com/vuejs/vue-devtools/legacy/media/demo.gif)を提供します。 ### React 開発者向けの情報 diff --git a/src/guide/typescript-support.md b/src/guide/typescript-support.md index 98539ee3..69875ee3 100644 --- a/src/guide/typescript-support.md +++ b/src/guide/typescript-support.md @@ -345,7 +345,7 @@ const Component = defineComponent({ ### `ref` を型定義する -Ref は初期値から肩を推論します: +Ref は初期値から型を推論します: ```ts import { defineComponent, ref } from 'vue'