You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/api/options-lifecycle-hooks.md
+78-78Lines changed: 78 additions & 78 deletions
Original file line number
Diff line number
Diff line change
@@ -1,182 +1,182 @@
1
-
# Lifecycle hooks
1
+
# ライフサイクルフック
2
2
3
3
:::tip Note
4
-
All lifecycle hooks automatically have their `this`context bound to the instance, so that you can access data, computed properties, and methods. This means **you should not use an arrow function to define a lifecycle method**(e.g.`created: () => this.fetchTodos()`). The reason is arrow functions bind the parent context, so `this`will not be the component instance as you expect and `this.fetchTodos`will be undefined.
Called synchronously after the instance is created. At this stage, the instance has finished processing the options which means the following have been set up: data observation, computed properties, methods, watch/event callbacks. However, the mounting phase has not been started, and the `$el`property will not be available yet.
Called after the instance has been mounted, where element, passed to [`app.mount`](/api/application-api.html#mount)is replaced by the newly created `vm.$el`. If the root instance is mounted to an in-document element, `vm.$el`will also be in-document when `mounted` is called.
Note that `mounted`does**not**guarantee that all child components have also been mounted. If you want to wait until the entire view has been rendered, you can use [vm.$nextTick](../api/instance-methods.html#nexttick)inside of `mounted`:
Called when data changes, before the DOM is patched. This is a good place to access the existing DOM before an update, e.g. to remove manually added event listeners.
68
+
データが変更されるとき、DOM に patch (Virtual DOM の処理プロセス)される前に呼び出されます。これは例えば、手動で追加されたイベントリスナを削除するといった、更新前に既存の DOM にアクセスするのに適しています。
69
69
70
-
**This hook is not called during server-side rendering, because only the initial render is performed server-side.**
Called after a data change causes the virtual DOM to be re-rendered and patched.
80
+
データの変更後に仮想 DOM が再レンダリングされ、patch が適用された後に呼び出されます。
81
81
82
-
The component's DOM will have been updated when this hook is called, so you can perform DOM-dependent operations here. However, in most cases you should avoid changing state inside the hook. To react to state changes, it's usually better to use a [computed property](./options-data.html#computed)or [watcher](./options-data.html#watch)instead.
82
+
このフックが呼び出されたときには、コンポーネントの DOM は更新されているので、ここで DOM に依存した操作を行うことができます。しかしほとんどの場合、フックの中で状態を変更することは避けるべきです。状態を変更するためには、通常代わりに [算出プロパティ](./options-data.html#computed)や [ウォッチャ](./options-data.html#watch)を使うほうがよいでしょう。
83
83
84
-
Note that `updated`does**not** guarantee that all child components have also been re-rendered. If you want to wait until the entire view has been re-rendered, you can use [vm.$nextTick](../api/instance-methods.html#nexttick)inside of `updated`:
Called after a component instance has been unmounted. When this hook is called, all directives of the component instance have been unbound, all event listeners have been removed, and all child component instance have also been unmounted.
Called when an error from any descendent component is captured. The hook receives three arguments: the error, the component instance that triggered the error, and a string containing information on where the error was captured. The hook can return `false`to stop the error from propagating further.
You can modify component state in this hook. However, it is important to have conditionals in your template or render function that short circuits other content when an error has been captured; otherwise the component will be thrown into an infinite render loop.
-By default, all errors are still sent to the global `config.errorHandler`if it is defined, so that these errors can still be reported to an analytics service in a single place.
-An `errorCaptured`hook can return `false`to prevent the error from propagating further. This is essentially saying "this error has been handled and should be ignored." It will prevent any additional `errorCaptured`hooks or the global `config.errorHandler`from being invoked for this error.
Called when virtual DOM re-render is tracked. The hook receives a `debugger event`as an argument. This event tells you what operation tracked the component and the target object and key of that operation.
177
+
仮想 DOM の再レンダリングが追跡されたときに呼び出されます。このフックは引数として `debugger event`を受け取ります。このイベントは、どの操作がコンポーネントを追跡したのか、その操作のターゲットオブジェクトとキーを教えてくれます。
178
178
179
-
-**Usage:**
179
+
-**使用方法:**
180
180
181
181
```html
182
182
<divid="app">
@@ -194,7 +194,7 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
194
194
},
195
195
renderTracked({ key, target, type }) {
196
196
console.log({ key, target, type })
197
-
/*This will be logged when component is rendered for the first time:
197
+
/*これはコンポーネントの初回レンダリングに記録されます:
198
198
{
199
199
key: "cart",
200
200
target: {
@@ -216,13 +216,13 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
216
216
217
217
## renderTriggered
218
218
219
-
-**Type:**`(e: DebuggerEvent) => void`
219
+
-**型:**`(e: DebuggerEvent) => void`
220
220
221
-
-**Details:**
221
+
-**詳細:**
222
222
223
-
Called when virtual DOM re-render is triggered. Similarly to [`renderTracked`](#rendertracked), receives a `debugger event`as an argument. This event tells you what operation triggered the re-rendering and the target object and key of that operation.
223
+
仮想 DOM の再レンダリングが実行されたときに呼び出されます。[`renderTracked`](#rendertracked) と同様に、引数として `debugger event`を受け取ります。このイベントは、どの操作が再レンダリングのきっかけとなったか、その操作のターゲットオブジェクトとキーを教えてくれます。
224
224
225
-
-**Usage:**
225
+
-**使用方法:**
226
226
227
227
```html
228
228
<divid="app">
@@ -244,7 +244,7 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
0 commit comments