Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

lifecycle-and-template-refs #52

Merged
merged 1 commit into from
Nov 8, 2023
+9 −9
Merged

lifecycle-and-template-refs #52

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions src/tutorial/src/step-9/description.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
# Lifecycle and Template Refs {#lifecycle-and-template-refs}

So far, Vue has been handling all the DOM updates for us, thanks to reactivity and declarative rendering. However, inevitably there will be cases where we need to manually work with the DOM.
تا اینجا، Vue به ما کمک کرده است تا تمام به‌روزرسانی‌های DOM به صورت خودکار انجام شود، از طریق reactivity (واکنش‌پذیری) و declarative rendering (رندرینگ صریح). با این حال، بدون شک مواردی وجود دارد که نیاز به دسترسی مستقیم به DOM داریم.

We can request a **template ref** - i.e. a reference to an element in the template - using the <a target="_blank" href="/api/built-in-special-attributes.html#ref">special `ref` attribute</a>:
می‌توانیم یک template ref را با استفاده از <a target="_blank" href="/api/built-in-special-attributes.html#ref">attribute مخصوصی به نام ref</a> دریافت کنیم (به عبارت دقیق‌تر یک ارجاع به یک عنصر در تمپلیت):

```vue-html
<p ref="pElementRef">hello</p>
```

<div class="composition-api">

To access the ref, we need to declare<span class="html"> and expose</span> a ref with matching name:
برای دسترسی به ref، باید یک ref با همان نام تعریف کنیم<span class="html"> و اجازه دهیم تا کدهای دیگر به این ref دسترسی پیدا کنند</span>:

<div class="sfc">

Expand All @@ -33,9 +33,9 @@ setup() {

</div>

Notice the ref is initialized with `null` value. This is because the element doesn't exist yet when <span class="sfc">`<script setup>`</span><span class="html">`setup()`</span> is executed. The template ref is only accessible after the component is **mounted**.
توجه کنید که ref با مقدار null مقداردهی اولیه می‌شود. این به این دلیل است که عنصر هنوز وجود ندارد زمانی که <span class="sfc">`<script setup>`</span> <span class="html">`setup()‎`</span> اجرا می‌شوند. template ref تنها پس از اینکه کامپوننت به صورت **mounted** شده باشد، قابل دسترسی است.

To run code after mount, we can use the `onMounted()` function:
برای اجرای کد بعد از mount شدن، می‌توانیم از تابع `onMounted()‎` استفاده کنیم:

<div class="sfc">

Expand Down Expand Up @@ -67,9 +67,9 @@ createApp({

<div class="options-api">

The element will be exposed on `this.$refs` as `this.$refs.pElementRef`. However, you can only access it after the component is **mounted**.
عنصر به عنوان `this.$refs.pElementRef` در `this.$refs` قابل دسترسی خواهد بود. با این حال، شما فقط زمانی می‌توانید به آن دسترسی پیدا کنید پس از اینکه کامپوننت به صورت **mounted** باشد.

To run code after mount, we can use the `mounted` option:
برای اجرای کد بعد از mount شدن، می‌توانیم از گزینه `mounted` استفاده کنیم:

<div class="sfc">

Expand All @@ -95,6 +95,6 @@ createApp({
</div>
</div>

This is called a **lifecycle hook** - it allows us to register a callback to be called at certain times of the component's lifecycle. There are other hooks such as <span class="options-api">`created` and `updated`</span><span class="composition-api">`onUpdated` and `onUnmounted`</span>. Check out the <a target="_blank" href="/guide/essentials/lifecycle.html#lifecycle-diagram">Lifecycle Diagram</a> for more details.
این به نام **هوک‌های چرخه حیات (lifecycle hook)** نیز شناخته می‌شود - این به ما امکان می‌دهد تا بازخوردی را در زمان‌های خاصی از چرخه حیات کامپوننت دریافت کنیم. هوک‌های دیگری نیز وجود دارند مانند <span class="options-api">`created` و `updated`</span><span class="composition-api">`onUpdated` و `onUnmounted`</span>. جهت کسب اطلاعات بیشتر می‌توانید به <a target="_blank" href="/guide/essentials/lifecycle.html#lifecycle-diagram">دیاگرام چرخه حیات (Lifecycle Diagram)</a> مراجعه کنید.

Now, try to add <span class="options-api">a `mounted`</span><span class="composition-api">an `onMounted`</span> hook, access the `<p>` via <span class="options-api">`this.$refs.pElementRef`</span><span class="composition-api">`pElementRef.value`</span>, and perform some direct DOM operations on it (e.g. changing its `textContent`).
حالا تلاش کنید تا یک هوک <span class="options-api">`mounted`</span><span class="composition-api">`onMounted`</span> اضافه کنید، از طریق <span class="options-api">`this.$refs.pElementRef`</span><span class="composition-api">`pElementRef.value`</span> به عنصر `<p>` دسترسی پیدا کنید و عملیات مستقیمی روی DOM انجام دهید (مثلاً تغییر `textContent` آن).