Watcher و input binding در VueJS

Watcher و input binding در VueJS

به انتهای مجموعه آموزش های Vuejs نزدیک می شویم و شما در انتهای این دوره ی مقدماتی، Vuejs را به صورت مختصر فرا خواهید گرفت. اما در این قسمت باید حتما Watcher ها را یاد بگیرید.

در این قسمت با دو مفهوم مهم Watcher و input binding آشنا خواهیم شد. در یک مثال ساده هر دو مفهوم بی نظیر را شرح می دهیم.

<html>

<head>
    <title>Sokan Academy - part 7</title>
</head>

<body>
<div id="app">
    <label>What's your favorite car company?</label>
    <br>
    <input type="text" >

    <hr>

    <p>{{ response }}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                favoriteCar: null,
                response: ''
            }
        }
    });
</script>
</body>

</html>

در مثال بالا، داخل <div id="app"> یک label و یک فرم خیلی ساده با یک <input> ایجاد کرده ایم. در ادامه می خواهیم مقادیر وارد شده در ورودی را در {{response}} نشان دهیم.

داخل Vue و data دو متغیر تعریف کرده ایم به نام های response و favoriteCar. توجه داشته باشید که ما از ()data به صورت تابع استفاده کرده ایم و مقادیر مورد نظر حتما باید درون return تعریف شوند، درغیراین صورت v-model کار نمی کند.

مقصود کلی از این قسمت مثال، این است که ابتدا بتوانیم مقادیر ورودی <input> را در یک متغیر ذخیره کنیم و سپس به صورتی که جلوتر می بینیم، از آن استفاده کنیم.

ممکن است در JS یا حتی jQuery سعی کرده باشید تا مقادیر ورودی <input> را با document.querySelector یا (‘input’)$ دریافت کنید. اما در Vuejs یک راه ساده تر برای دستیابی به این مقادیر وجود دارد.

 

v-model

همانطور که قبلا یادگرفتیم، هر چیزی که با v- آغاز می شود، یک Vue Directive است. به صورت خیلی ساده باید گفت که v-model:

به عنوان یک directive برای یک input به کار رفته، مقادیر آن ورودی را در یک متغیر دریافت کرده و سپس یک رابطه دوطرفه با آن <input> برقرار می کند، به صورتی که با کوچک ترین تغییر در مقدار ورودی <input> توسط کاربر، مقدار آن متغیر هم تغییر می کند. همچنین برعکس، هر زمانی که مقدار متغیر مورد نظر در هر کجای کد تغییر کند، v-model و به دنبال آن مقادیر <input> هم تغییر می کند.

اکنون این مفهوم را در مثال، با اضافه کردن v-model ، به صورت قابل لمس می بینیم:

<input type="text" v-model="favoriteCar">

با دادن متغیر favoriteCar به v-model ، تمامی ورودی های دریافتی از <input> در این متغیر ذخیره می شوند و با جابه جا کردن favoriteCar به جای response می توانید خروجی را در مرورگر خود ببینید. اما بدون جابه جا کردن این دو متغیر با یکدیگر هم می توانید نتیجه را در قسمت Vue devtools در مرورگر خود ببینید.

Vue در رابطه با انواع مختلف <input> در فرم ها بسیار هوشمندانه عمل می کند و تنها کافیست تا در <input> از v-model استفاده کنیم تا قدرت و هوشمندی خود را در رابطه با ورودی ها نشان دهد.

در پشت پرده ی v-model directive در حقیقت از یک v-bind:value و همچنین یک v-on:input تشکیل شده است. برای اطلاع بیشتر از ویژگی ها و شیوه کارایی دقیق این directive می توانید به این لینک مراجعه کنید.

Watchers:

قبلا آموختیم که مقادیری که در data تعریف می شوند را می توانید به راحتی و به صورت {{favoriteCar}} در template خود قرار دهید و همچنین یاد گرفتیم که چگونه در داخل یک method یا computed از این مقادیر (که به صورت this.favoriteCar بود) استفاده کنیم. اما چگونه هر زمانی که این مقادیر تغییر کردند ما متوجه شده و از آن ها استفاده کنیم؟!

ویژگی های computed در محاسبات تکراری و دادن خروجی منطقی از اعداد فوق العاده هستند، اما اگر ما بخواهیم یک بخش دیگر یا حتی state های کد خود را تغییر دهیم یا بعد از یک ارسال درخواست بخواهیم کاری انجام شود، باید چه کاری انجام دهیم؟!

در اینجا watcher ها به کمک ما می آیند که نمونه ی ساده ای از این ویژگی را در مثال می بینیم:

<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                favoriteCar: null,
                response: ''
            }
        },

        // Watchers here
        watch: {
            favoriteCar(newValue, oldValue) {
                console.log('Favorite car was ' + oldValue + ' and now is ' + newValue)
            }
        }
    });
</script>

Watcher ها در قسمت watch از vue یا component تعریف می شوند، و باید به ازای هرکدام از مقادیر در data یا هرکدام از prop ها در component که می خواهیم بدانیم چه زمانی تغییر کرده است، یک method به watch ارجاع داده شود.

به عبارت ساده تر، هر مقادیری از data یا prop که به اصلاح می خواهیم watch کنیم، باید به همان اسمی که دارند در watch تعریف شوند و این تعریف بسیار شبیه به تعریف کردن یک method است. در مثال بالا ما می خواهیم مقدار favoriteCar را watch کنیم و بعد از تغییر مقدار آن یک عملیات روی آن انجام شود، پس ما باید با همان اسم در watch این تابع را تعریف کنیم.

هر کدام از توابعی که در watch تعریف می شود، دو ورودی می گیرد. اولین ورودی newValue و دومین ورودی oldValue است که در این توابع از هر دو مقدار می توانیم استفاده کنیم. با اجرای مثال بالا خواهیم دید که با هر بار تایپ کردن در ورودی، مقدار favoriteCar تغییر کرده و در console مرورگر، هرباری که مقدار آن تغییر می کند، تابعی که در watch نوشته ایم، صدا زده و اجرا می شود.

اکنون با دانستن مفاهیم اولیه، یک مثال جالب را با هم اجرا کرده و از متغیر response که قبلا آن را تعریف کرده ایم استفاده می کنیم.

watch: {
    favoriteCar(newValue, oldValue) {
        if (!newValue) return // If its an empty string, pass

        // If the new value contains the keyword BMW
        if (newValue.toLowerCase().indexOf('bmw') !== -1) {
            this.response = 'this company have very nice cars!'
            return
        }

        // If the new value contains the word Mercedes Benz
        if (newValue.toLowerCase().indexOf('mercedes benz') !== -1) {
            this.response = 'this company have luxury cars'
            return
        }

        // If the OLD value was BMW, and user changed it something else
        if (
            oldValue.toLowerCase().indexOf('bmw') !== -1 &&
            newValue.toLowerCase().indexOf('bmw') === -1
        ) {
            this.response = 'the bmw was good but this is better'
            return
        }

        // Default response
        this.response = 'is this a car company?'
    }
}

با فرض اینکه شما با تابع indexOf آشنایی ندارید، این تابع تمام طول string ورودی را بررسی می کند و زمانی که دقیقا همان string را پیدا نکرد -1 بر می گرداند. اما اگر همان string را پیدا کند، شماره ی index ابتدایی string پیدا شده را برمی گرداند.

امیدواریم که اکنون به قدرت خاصیت watch پی برده باشید. یکی از استفاده های مفیدی که ما در این مثال داشتیم، این بود که اگر متغیر خاصی تغییر کند ما با استفاده از watch به راحتی می توانیم به این موضوع واکنش نشان دهیم. اما برای استفاده هایی به غیر از این مورد بهتر است از computed ها استفاده کنیم.

مثالی که امروز بررسی کردیم را به صورت کامل در اینجا قرار می دهیم:

<html>

<head>
    <title>Sokan Academy - part 7</title>
</head>

<body>
<div id="app">
    <label>What's your favorite car company?</label>
    <br>

    <input type="text" v-model="favoriteCar">

    <hr>

    <p>{{ favoriteCar }}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                favoriteCar: null,
                response: ''
            }
        },

        // Watchers here
        watch: {
            favoriteCar(newValue, oldValue) {
                if (!newValue) return // If its an empty string, pass

                // If the new value contains the keyword BMW
                if (newValue.toLowerCase().indexOf('bmw') !== -1) {
                    this.response = 'this company have very nice cars!'
                    return
                }

                // If the new value contains the word Mercedes Benz
                if (newValue.toLowerCase().indexOf('mercedes benz') !== -1) {
                    this.response = 'this company have luxury cars'
                    return
                }

                // If the OLD value was BMW, and user changed it something else
                if (
                    oldValue.toLowerCase().indexOf('bmw') !== -1 &&
                    newValue.toLowerCase().indexOf('bmw') === -1
                ) {
                    this.response = 'the bmw was good but this is better'
                    return
                }

                // Default response
                this.response = 'is this a car company?'
            }
        }
    });
</script>
</body>

</html>

تبریک! شما توانستید با موفقیت دوره آموزش مقدماتی Vue را به پایان برسانید. اکنون ما مفاهیم ابتدایی برای ایجاد یک اپلیکیشن یا وب سایت با Vue را فراگرفته ایم. با این وجود هنوز موارد و مفاهیم بسیار زیادی باقیست تا این framework را به طور کامل یاد بگیریم.

برای مطالعه و یادگیری مفاهیم بیشتر این فریم ورک می توانید از سایت اصلی فریم ورک Vue استفاده کنید.

نظرات
اگر login نکردی برامون ایمیلت رو بنویس: