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 }}
-
-
-
-```
+## Component Instance Properties
-data プロパティに加えて、インスタンスはいくつかの便利なプロパティとメソッドを提供します。これらはユーザ定義のプロパティと区別するため、頭に `$` が付けられています。例:
+Earlier in the guide we met `data` properties. Properties defined in `data` are exposed via the component instance:
```js
-const vm = Vue.createApp({
+const app = Vue.createApp({
data() {
- return {
- a: 1
- }
+ return { count: 4 }
}
-}).mount('#example')
+})
-vm.$data.a // => 1
+const vm = app.mount('#app')
+
+console.log(vm.count) // => 4
```
-今後、全てのインスタンスプロパティとメソッドのリストを調べるには [API リファレンス](../api/instance-properties.html) を利用できます。
+There are various other component options that add user-defined properties to the component instance, such as `methods`, `props`, `computed`, `inject` and `setup`. We'll discuss each of these in depth later in the guide. All of the properties of the component instance, no matter how they are defined, will be accessible in the component's template.
+
+Vue also exposes some built-in properties via the component instance, such as `$attrs` and `$emit`. These properties all have a `$` prefix to avoid conflicting with user-defined property names.
-## インスタンスライフサイクルフック
+## Lifecycle Hooks
-それぞれのインスタンスは、作成時に一連の初期化の手順を踏みます。例えば、データの監視、テンプレートのコンパイル、インスタンスの DOM へのマウント、データ変更時の DOM の変更を準備する必要があります。この中でインスタンスは、特定の段階にコードを追加する機会をユーザに与えるために、**ライフサイクルフック (lifecycle hooks)** と呼ばれる関数を実行します。
+Each component instance goes through a series of initialization steps when it's created - for example, it needs to set up data observation, compile the template, mount the instance to the DOM, and update the DOM when data changes. Along the way, it also runs functions called **lifecycle hooks**, giving users the opportunity to add their own code at specific stages.
例えば [created](../api/options-lifecycle-hooks.html#created) フックは、インスタンスの作成後にコードを実行するために使用できます:
```js
Vue.createApp({
data() {
- return {
- a: 1
- }
+ return { count: 1 }
},
created() {
- // `this` は vm インスタンスを指します
- console.log('a is: ' + this.a) // => "a is: 1"
+ // `this` points to the vm instance
+ console.log('count is: ' + this.count) // => "count is: 1"
}
})
```
From 4e5cd47f6e74350c54092e32196cf3a6e08b4c7a Mon Sep 17 00:00:00 2001
From: Sarah Drasner
Date: Sun, 27 Dec 2020 12:21:46 -0700
Subject: [PATCH 2/5] update lifecycle diagram and optimize it (#767)
---
src/.vuepress/public/images/lifecycle.png | Bin 408945 -> 0 bytes
src/.vuepress/public/images/lifecycle.svg | 147 ++++++++++++++++++++++
src/guide/instance.md | 10 +-
3 files changed, 154 insertions(+), 3 deletions(-)
delete mode 100644 src/.vuepress/public/images/lifecycle.png
create mode 100644 src/.vuepress/public/images/lifecycle.svg
diff --git a/src/.vuepress/public/images/lifecycle.png b/src/.vuepress/public/images/lifecycle.png
deleted file mode 100644
index 36dd710759bd57813555fe9705b6553d6199bb89..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001
literal 408945
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