ویوو جی‌اس از راه بهتر - همه چیز درباره computed پراپرتی‌ها

<div id="app">
    {{ reversedMsg }}
    <!-- output: allerbmU -->
</div>

یا توی نمونه و بیرون از View:

const app = new Vue({
    // ...
    mounted() {
        alert(this.reversedMsg); // allerbmU
    },
    // ...
});

alert(app.reversedMsg); // allerbmU

اگه مقدار پراپرتی خام message رو تغییر بدیم، پراپرتی محاسبه‌شده‌ی reversedMsg هم بصورت خودکار از این تغییرات با خبر میشه:

app.message = "Step on no pets";

console.log(app.reversedMsg); // step on no petS

Setter در پراپرتی‌های computed

ابتدا با مفاهیم توابع getter و setter آشنا بشیم. این مفهوم کلی هست و توی همه‌ی زبان‌ها وجود داره و قابل اجرا هست. برای یک عضو (پراپرتی) مثلا x می‌تونیم یک تابع getter درست کنیم تا x براساس فرمت دلخواه ما نشون داده بشه. و بلعکس می‌تونیم برای x یک تابع setter درست کنیم تا هنگامی مقدار x داره تغییر می‌کنه، بر اساس محاسبات خودمون تغییر کنه.

تا الان پراپرتی‌های computed ما فقط getter بودن. یعنی برای message فقط فر‌آیند نمایش براساس فرمت دلخواه رو نوشتیم. می‌تونیم تابع setter رو اضافه کنیم تا هنگامی که مقدار پراپرتی computed ما از بیرون می‌خواد تغییر کنه، بر اساس محاسبات دلخواه ما این اتفاق بیوفته. کد زیر رو ببینید:

const app = new Vue({
    data: {
        message: "Umbrella"
    },
    computed: {
        reversedMsg: {
            get() {
                return this.message.split('').reverse().join('');
            },
            set(newValue) {
                if (typeof newValue !== 'string') {
                    alert('Failed. String please!');
                    return;
                }

                this.message = newValue;
            }
        }
    }
});

همونطور که می‌بینیم نوع reversedMsg دیگه تابع نیست. بلکه یک آبجکت هست که توی اون دو متد به اسم get() و set() تعریف کردیم. بعد، کاری که قبلا پراپرتی reversedMsg انجام میداد (معکوس کردن) رو بردیم توی متد get. و نهایتا توی متد set گفتیم که برای آپدیت شدن مقدار این پراپرتی، فقط نوع رشته رو قبول کن. در غیر این صورت مانع انجام این کار بشو.

تفاوت متدها و پراپرتی‌های computed

شاید به ذهنتون رسیده باشه که چرا از متدها استفاده نمی‌کنیم. اگه با متد‌ها آشنایی ندارین این قسمت رو ببینین. کد زیر دقیقا مشابه کار پراپرتی‌های computed رو انجام میده:

<div id="app">
    {{ reverseMsg() }}
</div>

<script>
const app = new Vue({
    //...
    methods: {
        reverseMsg() {
            return this.message.split('').reverse().join('');
        }
    }
});
</script>

خروجی کد بالا دقیقا مثل پراپرتی‌های computed هست. اما چیزی که پشت پرده اتفاق می‌افته متفاوت هست. یکی از ویژگی‌های منحصر به فرد پراپرتی‌های computed، کش کردن خروجی هست.

پراپرتی‌ محاسبه شده‌ی reversedMsg رو درنظر بگیرید که از mesage داره استفاده می‌کنه. محاسبات توی تابع reversedMsg() فقط و فقط یک بار اجرا و سپس خروجی کش میشه. پس با n بار استفاده از اون پراپرتی، محاسبات فقط یک بار انجام میشه. مگر اینکه مقدار message تغییر کنه که در این صورت محاسبات دوباره انجام میشه:

<div id="app">
    {{ reversedMsg }}
    {{ reversedMsg }}
    {{ reversedMsg }}
    {{ reversedMsg }}
    {{ reversedMsg }}
</div>

<script>
const app = new Vue({
    el: "#app",
    data: {
        message: "Umbrella"
    },
    computed: {
        reversedMsg: function() {
            alert();
            return this.message.split('').reverse().join('');
        }
    }
});
</script>

توی کد بالا توی تابع reversedMsg() یک alert نوشتم که این نکته رو تست کنیم. اگه این کد رو امتحان کنیم می‌بینیم که فقط یک بار alert می‌گیریم. در صورتی که ۵ بار از اون پراپرتی داریم استفاده می‌کنیم.

همچنین چون تابع reversedMsg() فقط به message وابسته هست، فقط درصورتی دوباره محاسبات رو انجام میده که فقط مقدار message تغییر کنه، نه بقیه‌ی اعضای data.

اما توی متدها قضیه فرق می‌کنه:

<div id="app">
    {{ reverseMsg() }}
    {{ reverseMsg() }}
    {{ reverseMsg() }}
    {{ reverseMsg() }}
    {{ reverseMsg() }}
</div>

<script>
const app = new Vue({
    el: "#app",
    data: {
        message: "Umbrella"
    },
    methods: {
        reverseMsg: function() {
            alert();
            return this.message.split('').reverse().join('');
        }
    }
});
</script>

alert توی متد reverseMsg() به ازای هر بار استفاده از این متد تکرار میشه. اوضاع می‌تونه وخیم‌تر هم بشه. با هر بار رندر شدن View، متد reverseMsg() هم دوباره اجرا میشه. رندر شدن View هم به سادگی تغییر دادن یک عضو data صورت می‌گیره:

<div id="app">
    {{ reverseMsg() }}
    {{ reverseMsg() }}
    {{ reverseMsg() }}
    {{ reverseMsg() }}
    {{ reverseMsg() }}

    {{ letter }}
</div>

<script>
const app = new Vue({
    el: "#app",
    data: {
        message: "Umbrella",
        letter: "Roses are #FF0000",
    },
    methods: {
        reverseMsg: function() {
            alert();
            return this.message.split('').reverse().join('');
        }
    }
});
</script>

توی کد بالا اگه مقدار letter رو تغییر بدیم‌:

app.letter = "Violets are #0000FF"

View هم دوباره رندر و متد reverseMsg() پنج بار دیگه اجرا میشه! حالا تصور کنین متد reverseMsg() یک عملیات سنگین انجام میده. مثلا درخواست ای‌جکس. و با هر بار رندر شدن View تصور کنین چه اتفاقی می‌افته ¯\_(ツ)_/¯

خب دوستان این قسمت هم به پایان رسید. روزتون خوش 😉 ✌️