feat: guide/scaling-up/sfc (#30)

* watcher section translated

* ways of using vue is done

* plugin section translated

* sfc translated

src/guide/scaling-up/sfc.md

@@ -1,8 +1,8 @@
-# Single-File Components {#single-file-components}
+# کامپوننت های تک فایلی | SFC {#single-file-components}
 
-## Introduction {#introduction}
+## مقدمه {#introduction}
 
-Vue Single-File Components (a.k.a. `*.vue` files, abbreviated as **SFC**) is a special file format that allows us to encapsulate the template, logic, **and** styling of a Vue component in a single file. Here's an example SFC:
+ فایل‌هایی با پسوند `*.vue` و به صورت مخفف **SFC**  یک فرمت ویژه هستند که به ما اجازه می‌دهند تا الگو، منطق، و استایل یک کامپوننت Vue را در یک فایل واحد بنویسیم. در مثال زیر نمونه ای از یک فایل SFC را مشاهده می کنید:
 
 <div class="options-api">
 
@@ -53,32 +53,36 @@ const greeting = ref('Hello World!')
 
 </div>
 
-As we can see, Vue SFC is a natural extension of the classic trio of HTML, CSS and JavaScript. The `<template>`, `<script>`, and `<style>` blocks encapsulate and colocate the view, logic and styling of a component in the same file. The full syntax is defined in the [SFC Syntax Specification](/api/sfc-spec).
 
-## Why SFC {#why-sfc}
+همانطور که میبینید ، کامپوننت‌های تک‌ فایلی Vue ترکیبی از HTML، CSS و JavaScript هستند. بلوک‌های `<template>`، `<script>` و `<style>` عناصر نمایشی، منطق و استایل یک کامپوننت را در یک فایل واحد جای می دهند . جزئیات کامل تر را در بخش  [مشخصات کامپوننت‌های تک‌فایلی (SFC)](/api/sfc-spec)  میتوانید ببینید .
 
-While SFCs require a build step, there are numerous benefits in return:
+## چرا  SFC ؟ {#why-sfc}
 
-- Author modularized components using familiar HTML, CSS and JavaScript syntax
-- [Colocation of inherently coupled concerns](#what-about-separation-of-concerns)
-- Pre-compiled templates without runtime compilation cost
-- [Component-scoped CSS](/api/sfc-css-features)
-- [More ergonomic syntax when working with Composition API](/api/sfc-script-setup)
-- More compile-time optimizations by cross-analyzing template and script
-- [IDE support](/guide/scaling-up/tooling#ide-support) with auto-completion and type-checking for template expressions
-- Out-of-the-box Hot-Module Replacement (HMR) support
+هرچند که SFC ها نیاز به نصب Vue دارند، اما مزایای زیادی در استفاده از آنها وجود دارد:
 
-SFC is a defining feature of Vue as a framework, and is the recommended approach for using Vue in the following scenarios:
+- ماژولار کردن کامپوننت ها ، با استفاده از سینتکس آشنای Css , HTML و جاوااسکریپت
+- [تفکیک دغدغه‌ها](#what-about-separation-of-concerns)
+- تمپلیت ها قبل از استفاده پردازش می‌شوند، بنابراین وقتی در برنامه استفاده می‌شوند، نیاز به پردازش مجدد نیست.
+- [استفاده از CSS محدود به کامپوننت](/api/sfc-css-features)
+- [سینتکس بهتر در هنگام استفاده از Composition API](/api/sfc-script-setup)
+- بهینه‌سازی‌های بیشتر در زمان کامپایل ، با تحلیل همزمان تمپلیت و اسکریپت
+- پشتیبانی (IDE) با تکمیل خودکار و بررسی نوع داده ها در نوشتن متغیر ها در تمپلیت 
+- نمایش تغییرات بدون نیاز به لود مجدد صفحه
 
-- Single-Page Applications (SPA)
-- Static Site Generation (SSG)
-- Any non-trivial frontend where a build step can be justified for better development experience (DX).
 
-That said, we do realize there are scenarios where SFCs can feel like overkill. This is why Vue can still be used via plain JavaScript without a build step. If you are just looking for enhancing largely static HTML with light interactions, you can also check out [petite-vue](https://github.com/vuejs/petite-vue), a 6 kB subset of Vue optimized for progressive enhancement.
+در سناریو های زیر از SFC ها استفاده کنید :
 
-## How It Works {#how-it-works}
+- اپلیکیشن های تک صفحه ای (SPA)
+- تولید سایت استاتیک (SSG)
+- در هر پروژهٔ فرانت‌اند پیچیده‌ای که مرحله‌ای از ساخت (build) می‌تواند به تجربه توسعه بهتر  (DX) کمک کند.
+
+در یک سری از سناریو ها استفاده از کامپوننت های تک فایلی می تواند زیاده روی باشد ، بخاطر همین Vue میتواند در کد script ساده هم استفاده شود.
+اگر فقط میخواهید یک صفحه HTML نسبتاً استاتیک با تعاملات سبک را بهبود دهید ، به [petite-vue](https://github.com/vuejs/petite-vue) نیز نگاهی بیندازید؛ این یک نسخه بهینه‌شده با حجم 6 کیلوبایتی از Vue است.
+
+## چطور کار می‌کند؟ {#how-it-works}
+
+ کامپوننت های تک فایلی ، یک فرمت وابسته به فریم ورک هستند و باید توسط [@vue/compiler-sfc](https://github.com/vuejs/core/tree/main/packages/compiler-sfc) به جاوااسکریپت و CSS کامپایل شوند. یک SFC کامپایل شده در واقع یک ماژول جاوااسکریپت استاندارد (ES) است - یعنی با تنظیمات مناسب، می‌توانید یک SFC را مانند یک ماژول وارد کنید:
 
-Vue SFC is a framework-specific file format and must be pre-compiled by [@vue/compiler-sfc](https://github.com/vuejs/core/tree/main/packages/compiler-sfc) into standard JavaScript and CSS. A compiled SFC is a standard JavaScript (ES) module - which means with proper build setup you can import an SFC like a module:
 
 ```js
 import MyComponent from './MyComponent.vue'
@@ -90,18 +94,18 @@ export default {
 }
 ```
 
-`<style>` tags inside SFCs are typically injected as native `<style>` tags during development to support hot updates. For production they can be extracted and merged into a single CSS file.
+به طور معمول، تگ‌های `<style>` داخل کامپوننت های تک فایلی (SFCs) در طول توسعه به عنوان تگ‌های `<style>` اصلی درج می‌شوند تا بتوان بدون نیاز به لود مجدد ، صفحه را به روز رسانی کرد. برای محصول نهایی، می‌توان آن‌ها را استخراج و در یک فایل CSS ادغام کرد.
 
-You can play with SFCs and explore how they are compiled in the [Vue SFC Playground](https://play.vuejs.org/).
+ برای درک بهتر SFC ها، میتوانید کامپوننت های تک فایلی را در[Vue SFC Playground](https://play.vuejs.org/) امتحان کنید.
 
-In actual projects, we typically integrate the SFC compiler with a build tool such as [Vite](https://vitejs.dev/) or [Vue CLI](http://cli.vuejs.org/) (which is based on [webpack](https://webpack.js.org/)), and Vue provides official scaffolding tools to get you started with SFCs as fast as possible. Check out more details in the [SFC Tooling](/guide/scaling-up/tooling) section.
+در پروژه‌های واقعی، معمولاً کامپایلر SFC را با ابزار هایی مانند [Vite](https://vitejs.dev/) یا [Vue CLI](http://cli.vuejs.org/) (که بر اساس [webpack](https://webpack.js.org/) است) ادغام می‌کنیم، و Vue ابزارهای ساخت معتبری را فراهم می‌کند تا شما بتوانید تجربه بهتری از کامپوننت های تک فایلی داشته باشید. جزئیات بیشتر را در بخش [ابزارهای SFC](/guide/scaling-up/tooling) بررسی کنید.
 
-## What About Separation of Concerns? {#what-about-separation-of-concerns}
+## تفکیک دغدغه‌ها چه می شود؟ {#what-about-separation-of-concerns}
 
-Some users coming from a traditional web development background may have the concern that SFCs are mixing different concerns in the same place - which HTML/CSS/JS were supposed to separate!
+بعضی از کاربران ، ممکن است نگران باشند که کامپوننت‌های تک‌فایلی (SFCs) وظایف مختلف را با هم ترکیب می‌کنند - وظایفی که HTML ، CSS و JS باید جداگانه انجام دهند !
 
-To answer this question, it is important for us to agree that **separation of concerns is not equal to the separation of file types**. The ultimate goal of engineering principles is to improve the maintainability of codebases. Separation of concerns, when applied dogmatically as separation of file types, does not help us reach that goal in the context of increasingly complex frontend applications.
+برای پاسخ به این سوال، مهم است که توافق داشته باشیم که **تفکیک نگرانی ها مساوی با جداسازی فایل ها نیست**. هدف نهایی بهبود کد بیس ها و توسعه پذیری آن هاست. تفکیک دغدغه‌ها، زمانی که به صورت جداسازی انواع فایل ها اعمال می‌شود، به ما در رسیدن به کد بیس بهینه در اپلیکیشن های پیچیده‌ کمکی نمی‌کند.
 
-In modern UI development, we have found that instead of dividing the codebase into three huge layers that interweave with one another, it makes much more sense to divide them into loosely-coupled components and compose them. Inside a component, its template, logic, and styles are inherently coupled, and colocating them actually makes the component more cohesive and maintainable.
+در توسعه رابط کاربری مدرن، ما متوجه شده‌ایم که به جای تقسیم کد به سه لایه بزرگ HTML , Css ,Js ، تقسیم آنها به کامپوننت های مستقل و سپس ترکیب آنها منطقی‌تر است. درون یک کامپوننت، الگو، منطق و استایل‌های آن  با هم ترکیب شده‌اند، و این ترکیب  کامپوننت را منسجم‌تر و قابل نگهداری‌تر می‌کند.
 
-Note even if you don't like the idea of Single-File Components, you can still leverage its hot-reloading and pre-compilation features by separating your JavaScript and CSS into separate files using [Src Imports](/api/sfc-spec#src-imports).
+توجه داشته باشید حتی اگر ایده کامپوننت‌های تک فایلی را دوست ندارید، می‌توانید با جدا کردن جاوا اسکریپت و CSS خود به فایل‌های جداگانه با استفاده از [Src Imports](/api/sfc-spec) از ویژگی‌های از پیش‌ کامپایل شده آن استفاده کنید.