From ec69feda77875061fa9835ca93c99ec71376bd46 Mon Sep 17 00:00:00 2001 From: skirtle <65301168+skirtles-code@users.noreply.github.com> Date: Sun, 4 Oct 2020 12:29:37 +0100 Subject: [PATCH 1/5] Rewrite of instance.md, introducing data-methods.md (#514) * docs: experimental rewrite of instance.md, introducing data-methods.md * docs: cut material from instance.md that isn't on topic * docs: move data-methods.md to after template-syntax.md * fix: change 'application' to 'component' in template-syntax.md * fix: use bold when introducing new terms in instance.md * docs: rewrite data-methods.md --- src/guide/instance.md | 141 ++++++++++++++++-------------------------- 1 file changed, 52 insertions(+), 89 deletions(-) diff --git a/src/guide/instance.md b/src/guide/instance.md index 3e1fab98..add6b28d 100644 --- a/src/guide/instance.md +++ b/src/guide/instance.md @@ -1,137 +1,100 @@ -# アプリケーションインスタンス +# Application & Component Instances -## インスタンスの作成 +## Creating an Application Instance 全ての Vue アプリケーションは `createApp` 関数で新しい **アプリケーションインスタンス (application instance)** を作成するところから始まります: ```js -Vue.createApp(/* options */) +const app = Vue.createApp({ /* options */ }) ``` -インスタンスが作成されたあと、コンテナを `mount` メソッドに渡すことで、これを _マウント_ できます。例えば、Vue アプリケーションを `
` にマウントしたいときは、`#app` を渡します: +The application instance is used to register 'globals' that can then be used by components within that application. We'll discuss that in detail later in the guide but as a quick example: ```js -Vue.createApp(/* options */).mount('#app') +const app = Vue.createApp({}) +app.component('SearchInput', SearchInputComponent) +app.directive('focus', FocusDirective) +app.use(LocalePlugin) ``` -[MVVM パターン](https://ja.wikipedia.org/wiki/Model_View_ViewModel)に厳密に関連づけられているわけではないにもかかわらず、Vue の設計は部分的にその影響を受けています。慣例的に、私たちはインスタンスを参照するのに変数 `vm`(ViewModel の短縮形)を使用します。 - -インスタンスを作成する際には、 **オプションオブジェクト (options object)** を渡すことができます。このガイドの多くは、意図した挙動を作るためにこれらのオプションをどのように使うことができるかを解説します。全てのオプションのリストは [API リファレンス](../api/options-data.html)で読むこともできます。 - -Vue アプリケーションは、`createApp` で作られたひとつの **ルートインスタンス (root instance)** と、入れ子になった再利用可能なコンポーネントのツリーから成ります。例えば、`todo` アプリケーションのコンポーネントツリーはこのようになるでしょう: - -``` -Root Instance -└─ TodoList - ├─ TodoItem - │ ├─ DeleteTodoButton - │ └─ EditTodoButton - └─ TodoListFooter - ├─ ClearTodosButton - └─ TodoListStatistics -``` - -[コンポーネントシステム](component-basics.html)の詳細は後ほど扱います。いまは、全てのVue コンポーネントもまたインスタンスであり、同じようなオプションオブジェクトを受け入れることだけを知っておいてください。 - -## データとメソッド - -インスタンスは作成時に、`data` で見つけられる全てのプロパティを [Vue の **リアクティブシステム (reactive system)**](reactivity.html)に追加します。これらのプロパティの値が変わると、ビューは"反応 (react)"し、新しい値に追従します。 +Most of the methods exposed by the application instance return that same instance, allowing for chaining: ```js -// データオブジェクト -const data = { a: 1 } +Vue.createApp({}) + .component('SearchInput', SearchInputComponent) + .directive('focus', FocusDirective) + .use(LocalePlugin) +``` -// オブジェクトがルートインスタンスに追加されます -const vm = Vue.createApp({ - data() { - return data - } -}).mount('#app') +You can browse the full application API in the [API reference](../api/application-api.html). -// インスタンス上のプロパティを取得すると、元のデータのプロパティが返されます -vm.a === data.a // => true +## The Root Component -// インスタンス上のプロパティへの代入は、元のデータにも影響されます -vm.a = 2 -data.a // => 2 -``` +The options passed to `createApp` are used to configure the **root component**. That component is used as the starting point for rendering when we **mount** the application. -このデータが変更されると、ビューが再レンダリングされます。`data` のプロパティは、インスタンスが作成時に存在した場合にのみ **リアクティブ (reactive)** です。次のように新しいプロパティを代入すると: +An application needs to be mounted into a DOM element. For example, if we want to mount a Vue application into ``, we should pass `#app`: ```js -vm.b = 'hi' +const RootComponent = { /* options */ } +const app = Vue.createApp(RootComponent) +const vm = app.mount('#app') ``` -`b` への変更はビューへの更新を引き起こしません。あるプロパティがのちに必要であることがわかっているが、最初は空または存在しない場合は、なんらかの初期値を設定する必要があります。例: +Unlike most of the application methods, `mount` does not return the application. Instead it returns the root component instance. -```js -data() { - return { - newTodoText: '', - visitCount: 0, - hideCompletedTodos: false, - todos: [], - error: null - } -} -``` +Although not strictly associated with the [MVVM pattern](https://en.wikipedia.org/wiki/Model_View_ViewModel), Vue's design was partly inspired by it. As a convention, we often use the variable `vm` (short for ViewModel) to refer to a component instance. -これに対する唯一の例外は `Object.freeze()` を使用し既存のプロパティが変更されるのを防ぐことです。これはリアクティブシステムが変更を _追跡 (track)_ することができないことも意味します。 +While all the examples on this page only need a single component, most real applications are organized into a tree of nested, reusable components. For example, a Todo application's component tree might look like this: -```js -const obj = { - foo: 'bar' -} +``` +Root Component +└─ TodoList + ├─ TodoItem + │ ├─ DeleteTodoButton + │ └─ EditTodoButton + └─ TodoListFooter + ├─ ClearTodosButton + └─ TodoListStatistics +``` -Object.freeze(obj) +Each component will have its own component instance, `vm`. For some components, such as `TodoItem`, there will likely be multiple instances rendered at any one time. All of the component instances in this application will share the same application instance. -const vm = Vue.createApp({ - data() { - return obj - } -}).mount('#app') -``` +We'll talk about [the component system](component-basics.html) in detail later. For now, just be aware that the root component isn't really any different from any other component. The configuration options are the same, as is the behavior of the corresponding component instance. -```html -{{ foo }}
- - -g|GBoSv(#*iKMSip)F#Aj=V>tInDwRG=3qz7%X3tMzbKqlAvUCPxV)jK%K
z^2O@@a0n&kH7D`)R<@u0hw+!}v>@*UwT3{f(cpVe%L~NCXWsJ>)exut9rFmbx1CV`
z<%R)w#)^hc76oxndE@n151@Fjxv>m<^B~*f4HLCF5+4`@%$Lar3USjK(@|;2Lk;iD
z9+v|GRCGv72AqmT`---xI&o_^nb6dz2iRTVaq`7W(;oY13i}P+j1`L{wx+=1nrFT=$Ya
z4obM0%J7gOYJ+{`QtRPESss?8T8}$_H&%3*jm2)5>A^p?xi++75oEJO!{6QvEfB0(
z{tTL)j6^@yHLYy5KZNdh60zk_Tre=}%%m3*l&%Y(^BxhJ%)TM@-&t8YShdFlzduvM
zbntLb9PiWa>wL2D0o)pNbrC4I#YZAO+J~h#!$E-Y6~1_x_wHV7x8x?f?)V}VzSCmN
z!gi>JhR5jsbSI^g`bOZ`E)&_Xo+#3AlA2tE%SQhMyB}5<_`6Tm