همان طور که از اسم عبارت لاتین مشخص است computed properties به خاصیت هایی گفته می شود که قبلا محاسبه شده اند و دیگر نیازی به محاسبه ی مجدد آنها وجود ندارد.
اگر تجربه ی برنامه نویسی شما با فریمورک vue js بیش از یک سال باشد، حتماً تا به حال برای شما پیش آمده است که بعضی وقت ها، داده ها یا خروجی متدهای شما تکراری شده باشند و از این بابت حس خوبی به شما دست نداده باشد، چون احساس می کردید که کد شما به اندازه ی کافی بهینه نشده است که چنین خروجی هایی دارد. در چنین شرایطی احتمالاً دوست داشتید که کدهای شما به شکلی باشند که تنها در صورتی که مقدار داده ها تغییر داشته باشند، متدهای شما نیز صدا زده شوند و در صورتی که داده ها هیچ گونه تغییری نکرده باشند از صدا زدن متدها و درنتیجه به وجود آمدن خروجی های مشابه قبل، جلوگيري شود.
بگذارید برای درک بهتر مطالب بیان شده یک مثال ساده را با هم شروع کنیم و مرحله به مرحله توضیح های لازم را بیان کنیم.
یک فایل HTML را باز می کنیم و درون آن کد مربوط به دو دکمه و دو المان نمایش اطلاعات را همانند کدهای زیر می نویسیم:
دقت کنید که در کنار ساخت فایل HTML فایل دیگری برای نوشتن کدهای جاوااسکریپت لازم هست که کدهای اولیه ی آن در زیر آورده شده است.
فایل index.html:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="vue-app">
<h1>Computed Peroprties</h1>
<button v-on:click="a++">Add to A</button>
<button v-on:click="b++">Add to B</button>
<p>A: {{a}}</p>
<p>B: {{b}}</p>
</div>
<script src="app.js"></script>
</body>
</html>فایل app.js:
new Vue({
el:'#vue-app',
data:{
age: 20,
a:0,
b:0
},
methods:{
}
})خوب تا اینجای کار خروجی به صورت زیر است:
همان طور که مشاهده می کنید با هر بار کلیک روی هر یک از دکمه ها، مقادیر متغیر مربوط به آن دکمه یک واحد بیشتر می شود.
حال قصد داریم دو متد جدید تعریف کنیم و در آن ها از متغیر age نیز استفاده کنیم. این متدها حاصل جمع متغیرهای a یا b را با age نشان می دهند. با کلیک روی هر یک از دکمه ها، علاوه بر تغییر المان های قبلی، المان های مربوط به حاصل جمع نیز تغییر می کنند.
کد ها و خروجی مربوط به این متدها به صورت زیر است:
فایل index.html:
<div id="vue-app">
<h1>Computed Peroprties</h1>
<button v-on:click="a++">Add to A</button>
<button v-on:click="b++">Add to B</button>
<p>A: {{a}}</p>
<p>B: {{b}}</p>
<p>A + Age = {{addToA()}}</p>
<p>B + Age = {{addToB()}}</p>
</div>فایل app.js:
methods: {
addToA: function () {
return this.a + this.age;
},
addToB: function () {
return this.b + this.age;
},
},خروجی کدهای نوشته شده (وقتی که چند بار دکمه ها را فشار دهیم):
حال در هر دو متد قبل از دستور return، از یک رشته ی دلخواه (برای مثال ‘addToA’) () console.log بگیرید. من متدهای نوشته شده را به صورت زیر تغییر دادم.
methods: {
addToA: function () {
console.log('addToA');
return this.a + this.age;
},
addToB: function () {
console.log('addToB');
return this.b + this.age;
},
},همانطور که می دانید دو متد تعریف شده، در لحظه ی اولیه render شدن DOM، صدا زده می شوند و خروجی آنها نمایش داده می شود. و هر وقت که تغییری در DOM صورت گیرد، هر دوی این متدها نیز صدا زده می شوند.
بنابراین، با هر بار زدن روی هر یک از این دکمه ها، دوبار ()console.log اتفاق می افتد و رشته های ‘addToA’ و ‘addToB’ در کنسول ظاهر می شوند. ظاهر شدن هر دو رشته در هر بار فشردن یکی از دکمه ها به این معنی است که هر دو متد اجرا می شوند.
فرض کنید که یک پروژه ی بزرگ دارید و در داخل آن از تعداد زیادی متد مانند دو متد بالا، اما بسیار پیچیده تر از آن ها، استفاده شده است، که با اعمال کوچک ترین تغییری در DOM، این متدها نیز اجرا شوند. در این صورت برنامه یا سایت ساخته شده، ممکن است با مشکلاتی از جمله سرعت عملکردی بسیار پایین، روبرو شود. برای رفع چنین عیبی، بهتر است به جای استفاده از متدها، از computed property ها استفاده کرد.
حالا برای تبدیل متدهای بالا به computed property کافی است مانند زیر عمل کنید.
methods: {
// your methods
},
computed: {
addToA: function () {
console.log('addToA');
return this.a + this.age;
},
addToB: function () {
console.log('addToB');
return this.b + this.age;
},
},البته، دقت کنید که computed property ها تابع نیستند بلکه رفتاری مانند داده ها دارند بنابراین، نیازی نیست که برای صدا زدن، از ‘()’ در جلوی آن ها استفاده شود.
<div id="vue-app">
<h1>Computed Peroprties</h1>
<button v-on:click="a++">Add to A</button>
<button v-on:click="b++">Add to B</button>
<p>A: {{a}}</p>
<p>B: {{b}}</p>
<p>A + Age = {{addToA}}</p>
<p>B + Age = {{addToB}}</p>
</div>حالا اگر دقت کنید با هر بار فشردن یکی از این دکمه ها، فقط computed property مربوط به آن اجرا می شود و بنابراین، تنها یک ()console.log اجرا می شود.
به طور خلاصه می توان گفت computed property ها برای جلوگیری از محاسبات اضافی و تکراری استفاده می شوند و باعث بهبود عملکرد و سرعت سایت یا برنامه ما می شوند.
برای درک بهتر مطالب بیان شده، حتماً از computed property ها در پروژه های واقعی خود استفاده کنید.
