পদ্ধতি বনাম গণিত

Question

Vue.js এ একটি পদ্ধতি এবং গণনা মানের মধ্যে প্রধান পার্থক্য কী?

তারা দেখতে একই এবং বিনিময়যোগ্য।

Comments

আপনার জন্য সম্ভবত সহায়ক: vuejs.org/v2/guide/computes.html# সংশ্লেষিত

— প্রপার্টি

@ এক্সড্রিমকোডিং আপনার যে লিঙ্কটি যুক্ত করেছেন তার উত্তর এই প্রশ্নের পক্ষে আসলেই ঘটে তবে কোনওভাবেই এই প্রশ্নটি সদৃশ নয়। এছাড়াও এটি আরও বিখ্যাত।

— রোমেন ভিনসেন্ট

গণিত

— ধ্যানী

Answer 1

গণিত মান এবং পদ্ধতিগুলি ভ্যুতে খুব আলাদা এবং সম্ভবত বেশিরভাগ ক্ষেত্রে বিনিময়যোগ্য নয়।

গণিত সম্পত্তি

গণিত মানের জন্য আরও উপযুক্ত নাম একটি গণিত সম্পত্তি । প্রকৃতপক্ষে, যখন ভ্যু তাত্ক্ষণিক হয়, গণিত বৈশিষ্ট্যগুলি একটি গেটর এবং কখনও কখনও একটি সেটারের সাহায্যে ভ্যুর সম্পত্তিতে রূপান্তরিত হয়। মূলত আপনি একটি গণিত মানকে একটি উত্পন্ন মান হিসাবে ভাবতে পারেন যা যখনই গণনার জন্য ব্যবহৃত অন্তর্নিহিত মানগুলির কোনওটি আপডেট করা হয় তখন স্বয়ংক্রিয়ভাবে আপডেট হয়ে যায়। আপনি একটি গণিত কল করবেন না এবং এটি কোনও পরামিতি গ্রহণ করে না। আপনি যেমন একটি ডেটা সম্পত্তি হিসাবে ঠিক একটি গণিত সম্পত্তি রেফারেন্স। এখানে ডকুমেন্টেশন থেকে সর্বোত্তম উদাহরণ :

computed: {
  // a computed getter
  reversedMessage: function () {
    // `this` points to the vm instance
    return this.message.split('').reverse().join('')
  }
}

যা ডিওএম এ যেমন উল্লেখ করা হয়:

<p>Computed reversed message: "{{ reversedMessage }}"</p>

গণিত মানগুলি আপনার ভুয়ে থাকা ডেটা ম্যানিপুলেট করার জন্য খুব মূল্যবান। যখনই আপনি আপনার ডেটা ফিল্টার বা রূপান্তর করতে চান, সাধারণত আপনি সেই উদ্দেশ্যে একটি গণিত মান ব্যবহার করবেন।

data:{
    names: ["Bob", "Billy", "Mary", "Jane"]
},
computed:{
    startsWithB(){
        return this.names.filter(n => n.startsWith("B"))
    }
}

<p v-for="name in startsWithB">{{name}}</p>

গণিত মানগুলি পুনরুক্তি করে এমন কোনও মান গণনা করা এড়ানোর জন্যও ক্যাশে করা হয় যা পরিবর্তিত না হয়ে পুনরায় গণনার প্রয়োজন হয় না (উদাহরণস্বরূপ এটি কোনও লুপে নাও থাকতে পারে)।

পদ্ধতি

একটি পদ্ধতি হ'ল ভিউ উদাহরণের সাথে আবদ্ধ একটি ফাংশন। আপনি কেবল স্পষ্টভাবে কল করলেই এটি মূল্যায়ন করা হবে। সমস্ত জাভাস্ক্রিপ্ট ফাংশনগুলির মতো এটি প্যারামিটারগুলি গ্রহণ করে এবং যতবার এটি ডাকা হয় ততবার পুনরায় মূল্যায়ন করা হবে। পদ্ধতিগুলি একই পরিস্থিতিতে কার্যকর হয় যে কোনও ফাংশন কার্যকর।

data:{
    names: ["Bob", "Billy", "Mary", "Jane"]
},
computed:{
    startsWithB(){
        return this.startsWithChar("B")
    },
    startsWithM(){
        return this.startsWithChar("M")
    }
},
methods:{
    startsWithChar(whichChar){
        return this.names.filter(n => n.startsWith(whichCharacter))
    }
}

ভয়ের ডকুমেন্টেশনগুলি সত্যই ভাল এবং সহজেই অ্যাক্সেসযোগ্য। আমি এটি সুপারিশ।

Comments

যদি ব্যবহারকারীর থেকে দুটি ইনপুট থাকে যেমন তাপমাত্রায় সি থেকে এফ রূপান্তর হয় এবং বিপরীতে যেখানে উভয় ইনপুট একে অপরের মান নির্ধারণ করতে পারে। দেখুন albireo.ch/temperatureconverter এবং যে দুটি ইনপুট রূপান্তর বোতাম টিপুন স্বয়ংক্রিয়ভাবে প্রতিক্রিয়া। গণিত বা পদ্ধতি ব্যবহার করতে কোনটি সবচেয়ে উপযুক্ত?

— বুটস্ট্র্যাপ

সেই নির্দিষ্ট ইউআইয়ের সাথে যেখানে ইনপুটগুলির মধ্যে বিজ্ঞপ্তিপূর্ণ সম্পর্ক রয়েছে, আমি পদ্ধতিগুলির সাথে যেতে চাই। কোডেপেন.ইও

— বার্ট

@ বুটস্ট্র্যাপ 4 যদিও এখানে একটি গণিত রয়েছে তবে এটি আরও প্রশংসিত। কোডেপেন.ইও

— বার্ট

> একটি পদ্ধতি ... কেবল তখনই মূল্যায়ন করা হবে যখন আপনি স্পষ্টভাবে এটি কল করবেন। এই ভিডিও অনুসারে নয়: youtube.com/watch?v=O14qJr5sKXo

— ক্যামেরন হাডসন

@ ক্যামেরনহডসন ভিডিওর উদাহরণে, পদ্ধতিগুলি মূল্যায়ন করা হয় কারণ সেগুলি টেম্পলেটে স্পষ্টভাবে উল্লেখ করা হয়েছে । এখানে একটি উদাহরণ যা পার্থক্যটি দেখায় । নোট করুন যে পদ্ধতিগুলি কেবল তখনই ডাকা হয় যখন ডেটা পরিবর্তন হয় যদি সেগুলি টেমপ্লেটে স্পষ্টভাবে উল্লেখ করা হয়।

— বার্ট

Answer 2

@ বিলেঙ্ক যেমন পদ্ধতি এবং গণ্য বৈশিষ্ট্যগুলির মধ্যে ক্যাশে এবং নির্ভরতার পার্থক্যটি সুস্পষ্ট করার জন্য একটি বাস্তব উদাহরণ চেয়েছিলেন, আমি একটি সাধারণ দৃশ্য প্রদর্শন করব:

app.js

new Vue({
    el: '#vue-app',
    data: {
        a: 0,
        b: 0,
        age: 20
    },
    methods: {
        addToAmethod: function(){
            console.log('addToAmethod');
            return this.a + this.age;
        },
        addToBmethod: function(){
            console.log('addToBmethod');
            return this.b + this.age;
        }
    },
    computed: {
        addToAcomputed: function(){
            console.log('addToAcomputed');
            return this.a + this.age;
        },
        addToBcomputed: function(){
            console.log('addToBcomputed');
            return this.b + this.age;
        }
    }
});

এখানে আমাদের কাছে 2 টি পদ্ধতি এবং 2 টি গুণযুক্ত বৈশিষ্ট্য রয়েছে যা একই টাস্কটি সম্পাদন করে। পদ্ধতিগুলি addToAmethodএবং addToBmethodগণিত বৈশিষ্ট্য addToAcomputedএবং addToBcomputedসমস্ত +20 (অর্থাত্ ageমান) উভয়ই aবা একটিতে যুক্ত করে b। পদ্ধতিগুলি সম্পর্কে, উভয়কেই তালিকাভুক্ত বৈশিষ্ট্যের উপর যখন কোনও ক্রিয়া সম্পাদন করা হয়েছে ততবারই ডেকে আনা হয় , এমনকি যদি কোনও নির্দিষ্ট পদ্ধতির নির্ভরতা পরিবর্তন না হয়। গণিত বৈশিষ্ট্যের জন্য, কোডটি তখনই কার্যকর করা হয় যখন কোনও নির্ভরতা পরিবর্তিত হয়; উদাহরণস্বরূপ, নির্দিষ্ট সম্পত্তি মানগুলির মধ্যে একটি যা A বা B কে বোঝায় যথাক্রমে ট্রিগার করবে বা ।addToAcomputedaddToBcomputed

পদ্ধতি এবং গণনা করা বিবরণগুলি দেখতে বেশ একই রকম মনে হয়, তবে @ আবদুল্লাহ খান ইতিমধ্যে এটি নির্দিষ্ট করে দিয়েছেন, সেগুলি একই জিনিস নয় ! এখন সমস্ত কিছু একসাথে চালানোর জন্য কিছু এইচটিএমএল যুক্ত করার চেষ্টা করি এবং দেখুন কোথায় পার্থক্য রয়েছে।

মেথড কেস ডেমো

new Vue({
    el: '#vue-app',
    data: {
        a: 0,
        b: 0,
        age: 20
    },
    methods: {
        addToAmethod: function(){
            console.log('addToAmethod');
            return this.a + this.age;
        },
        addToBmethod: function(){
            console.log('addToBmethod');
            return this.b + this.age;
        }
    }
});

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>VueJS Methods - stackoverflow</title>
            <link href="style.css" rel="stylesheet" />
            <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.min.js"></script>
    
        </head>
        <body>
            <div id="vue-app">
                <h1>Methods</h1>
                <button v-on:click="a++">Add to A</button>
                <button v-on:click="b++">Add to B</button>
                <p>Age + A = {{ addToAmethod() }}</p>
                <p>Age + B = {{ addToBmethod() }}</p>
            </div>
        </body>
        
        <script src="app.js"></script>
    </html>

বর্ণিত ফলাফল

আমি যখন "এ এড করুন" বোতামে ক্লিক করি , সমস্ত পদ্ধতি বলা হয় (উপরের কনসোল লগ স্ক্রিনের ফলাফলটি দেখুন), addToBmethod()এটিও কার্যকর হয় তবে আমি "বি তে যোগ করুন" বোতাম টিপতাম না; বি এর সাথে সম্পর্কিত সম্পত্তি মানটি পরিবর্তিত হয়নি। "বি তে যুক্ত করুন" বোতামটি ক্লিক করার সিদ্ধান্ত নিয়েই একই আচরণটি আসে , কারণ আবার উভয় পদ্ধতিই নির্ভরতা পরিবর্তনের জন্য স্বাধীনভাবে বলা হবে। এই পরিস্থিতি অনুসারে এটি একটি খারাপ অনুশীলন কারণ আমরা প্রতিবারই পদ্ধতিগুলি প্রয়োগ করি, এমনকি নির্ভরতা পরিবর্তিত হয়নি। এটি সত্যই সম্পদ গ্রহণকারী কারণ সম্পত্তির মানগুলির কোনও ক্যাশে নেই যা পরিবর্তিত হয়নি।

গণিত সম্পত্তি কেস ডেমো

new Vue({
    el: '#vue-app',
    data: {
        a: 0,
        b: 0,
        age: 20
    },

    computed: {
        addToAcomputed: function(){
            console.log('addToAcomputed');
            return this.a + this.age;
        },
        addToBcomputed: function(){
            console.log('addToBcomputed');
            return this.b + this.age;
        }
    }
});

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>VueJS Computed properties - stackoverflow</title>
            <link href="style.css" rel="stylesheet" />
            <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.min.js"></script>
        </head>
        <body>
            <div id="vue-app">
                <h1>Computed Properties</h1>
                <button v-on:click="a++">Add to A</button>
                <button v-on:click="b++">Add to B</button>
                <p>Age + A = {{ addToAcomputed }}</p>
                <p>Age + B = {{ addToBcomputed }}</p>
            </div>
        </body>
        
        <script src="app.js"></script>
    </html>

বর্ণিত ফলাফল

আমি যখন "এ এড করুন" বাটনে ক্লিক করি তখন কেবল গণিত সম্পত্তি addToAcomputedবলা হয় কারণ আমরা ইতিমধ্যে বলেছি যে গণনা করা বৈশিষ্ট্যগুলি কেবল তখনই নির্বাহ করা হয় যখন কোনও নির্ভরতা পরিবর্তিত হয়। এবং যেহেতু আমি "বিতে অ্যাড" বোতাম টিপলাম না এবং বি এর জন্য বয়সের সম্পত্তির মান পরিবর্তিত হয়নি, তাই গণনা করা সম্পত্তিটি কল করতে এবং সম্পাদন করার কোনও কারণ নেই addToBcomputed। সুতরাং, একটি নির্দিষ্ট অর্থে, গণিত সম্পত্তি এক ধরণের ক্যাশের মতো বি সম্পত্তিটির জন্য "একই অপরিবর্তিত" মান বজায় রাখছে। এবং এই পরিস্থিতিতে এটি ভাল অনুশীলন বিবেচনা করা হয় ।

Comments

1 টি বোতাম টিপে গেলে কেন সমস্ত পদ্ধতি কার্যকর করা হয়? কারণ / যুক্তি কি?

— বিসিয়েন

@ বিসিয়েন এটি একটি ভাল প্রশ্ন: কারণটি হ'ল মূলত ভ্য জানেন না যে কোনটি আপডেট হয়েছে তার উপর নির্ভর করে কোন পদ্ধতিটি চালানো দরকার। এবং এটি এই ধরণের অপারেশন যা গণিত বৈশিষ্ট্যগুলি করে, তারা ভেরিয়েবলগুলি দেখে যেগুলি গণনা করা বা পুনরায় গণনা করা প্রয়োজন এবং তারা কেবল যখন প্রয়োজন তখন চালিত হয়।

— জিউলিও বাম্বিনি

এবং পদ্ধতিগুলি ব্যবহারের কারণগুলি কী কী? দেখে মনে হচ্ছে গণনা করা বৈশিষ্ট্যগুলি আরও উন্নত (ধরে নিই আমরা 'get' পদ্ধতির বিষয়ে কথা বলছি) ...

— ব্যবহারকার 3529607

@ ব্যবহারকারী 3529607 কিন্তু গণিত বৈশিষ্ট্যগুলি আর্গুমেন্ট গ্রহণ করে না।

— রডিয়ন গোলভুশকিন

@ ব্যবহারকারী 3529607 আমি যা বুঝতে পারি তা থেকে, মানগুলি মাউন্ট করার সময় বা তৈরির সময় পদ্ধতিগুলি কার্যকর হতে পারে। গণিত বৈশিষ্ট্যগুলির সাথে একই কাজ করা যায় না। এছাড়াও, গুণিত বৈশিষ্ট্যের জন্য আমাদের মানটি ফিরিয়ে দিতে হবে।

— ধাওয়াল ছেদা

Answer 3

থেকে docs

.. সংযুক্ত বৈশিষ্ট্যগুলি তাদের নির্ভরতার উপর নির্ভর করে ক্যাশে করা হয়। একটি গণিত সম্পত্তি কেবল তখনই মূল্যায়ন করবে যখন এর কিছু নির্ভরতা পরিবর্তিত হবে।

আপনি যদি ডেটা ক্যাশেড করতে চান তবে অন্যদিকে গণিত বৈশিষ্ট্যগুলি ব্যবহার করুন যদি আপনি না চান যে ডেটা ক্যাশেড করা যায় তবে সহজ পদ্ধতি বৈশিষ্ট্যগুলি ব্যবহার করুন।

Comments

হাই, আপনি ব্যবহারিক ব্যবহারের পার্থক্য দেখানোর জন্য একটি দরকারী উদাহরণ লিখতে পারেন?

— ডেভিড ডি মায়েস্ট্রি

@gleenk আমি আপনাকে পদ্ধতি এবং গণ্য বৈশিষ্ট্যের মধ্যে এই ক্যাশে / নির্ভরতা পার্থক্য দেখানোর জন্য একটি ব্যবহারিক উদাহরণ যুক্ত করব। আমি আশা করি আপনি এটি প্রশংসা করব।

— জিউলিও বাম্বিনি

আপনাকে ধন্যবাদ জিউলিওবাম্বিনি

— ডেভিড ডি

Answer 4

গণিত এবং পদ্ধতির মধ্যে একটি পার্থক্য। ধরুন আমাদের একটি ফাংশন রয়েছে যা পাল্টা মান ফেরত দেবে ((কাউন্টারটি কেবলমাত্র পরিবর্তনশীল)। আসুন দেখে নেওয়া যাক গণনা এবং পদ্ধতি উভয় ক্ষেত্রে ফাংশনটি কীভাবে আচরণ করে

কম্পিউটেড

মৃত্যুদন্ড কার্যকর করার প্রথম সময়ে ফাংশনের অভ্যন্তরীণ কোডটি কার্যকর করা হবে এবং ভয়েজগুলি কাউন্টে (দ্রুত অ্যাক্সেসের জন্য) কাউন্টারের মান সংরক্ষণ করবে। কিন্তু যখন আমরা আবার ফাংশনটি Vuejs বলছি তখন আবার সেই ফাংশনের অভ্যন্তরে লেখা কোডটি কার্যকর করবে না। এটি প্রথমে কাউন্টারে করা কোনও পরিবর্তন চেক করে। যদি কোনও পরিবর্তন ঘটে থাকে তবে কেবলমাত্র এটি সেই ফাংশনের অভ্যন্তরে থাকা কোডটি পুনরায় কার্যকর করবে। যদি কাউন্টারে কোনও পরিবর্তন না করা হয় তবে পুনরায় ফাংশনটি কার্যকর করা হবে না ue এটি কেবল ক্যাশে থেকে পূর্ববর্তী ফলাফলটি ফিরিয়ে দেবে।

পদ্ধতি

এটি জাভাস্ক্রিপ্টে একটি সাধারণ পদ্ধতির মতো। আমরা যখনই পদ্ধতিটি কল করি তখন এটি কাউন্টারে পরিবর্তনগুলি নির্বিশেষে ফাংশনের অভ্যন্তরে কোডটি সর্বদা কার্যকর করে।

কোডটি পরিবর্তনগুলি নির্বিশেষে পদ্ধতি সর্বদা কোডটিকে পুনরায় মিশিয়ে তুলবে। গণিত হিসাবে কোডটি পুনরায় সংশোধন করবে কেবল তখনই যদি তার নির্ভরতার মানগুলির কোনও পরিবর্তন হয়। অন্যথায় এটি আমাদের পুনরায় পরীক্ষণ ছাড়াই ক্যাশে থেকে পূর্ববর্তী ফলাফল দেবে

Answer 5

এই প্রশ্নের একটি ভাঙ্গন এখানে।

পদ্ধতিগুলি কখন ব্যবহার করবেন

• ডিওমে ঘটে যাওয়া কিছু ইভেন্টের প্রতিক্রিয়া জানাতে
• যখন আপনার উপাদানগুলির মধ্যে কিছু ঘটে তখন কোনও ফাংশন কল করার জন্য।
• আপনি গণিত বৈশিষ্ট্য বা নজরদারি থেকে কোনও পদ্ধতি কল করতে পারেন।

গণিত বৈশিষ্ট্য কখন ব্যবহার করবেন

• আপনার বিদ্যমান ডেটা উত্স থেকে নতুন তথ্য রচনা করা দরকার
• আপনার টেমপ্লেটে আপনি একটি পরিবর্তনশীল ব্যবহার করেন যা এক বা একাধিক ডেটা বৈশিষ্ট্য থেকে তৈরি
• আপনি জটিল, নেস্টেড প্রপার্টি নামটি আরও পঠনযোগ্য এবং সহজে ব্যবহারযোগ্যতে হ্রাস করতে চান (তবে মূল সম্পত্তি পরিবর্তিত হলে এটি আপডেট করুন)
• টেমপ্লেট থেকে আপনাকে একটি মান উল্লেখ করতে হবে। এই ক্ষেত্রে, একটি গণিত সম্পত্তি তৈরি করা সেরা জিনিস, কারণ এটি ক্যাশেড।
• আপনার একাধিক ডেটা প্রোপার্টি পরিবর্তনগুলি শুনতে হবে

Answer 6

গণিত সম্পত্তি

গণিত বৈশিষ্ট্যগুলিকে গণিত মানও বলা হয়। এর অর্থ, এগুলি আপডেট হয় এবং যে কোনও সময় পরিবর্তন করা যায়। এছাড়াও, এটি পরিবর্তন না হওয়া অবধি ডেটাটিকে ক্যাশে করে। যখন ভ্যু তাত্ক্ষণিক হয়, গণিত বৈশিষ্ট্যগুলি একটি বৈশিষ্ট্যে রূপান্তরিত হয়।

আমি আরও একটি জিনিস ভাগ করতে চাই, আপনি কোনও কম্পিউটার সম্পত্তি কল করার সময় কোনও বন্ধনী আবশ্যক নয় এমন কারণেই গণিত বৈশিষ্ট্যে কোনও পরামিতি পাস করতে পারবেন না।

পদ্ধতি

পদ্ধতিগুলি ফাংশন হিসাবে একই এবং একইভাবে কাজ করে। এছাড়াও, কোনও পদ্ধতি আপনি কল না করা ছাড়া কিছুই করে না nothing এছাড়াও, সমস্ত জাভাস্ক্রিপ্ট ফাংশনের মতো, এটি প্যারামিটারগুলি গ্রহণ করে এবং যতবার এটি ডাকা হয় ততবার পুনরায় মূল্যায়ন করা হবে। এর পরে, তারা মানগুলি ক্যাশে করতে পারে না

পদ্ধতিতে কলিং বন্ধনী রয়েছে এবং আপনি এতে এক বা একাধিক প্যারামিটার পাঠাতে পারেন।

Answer 7

হোঁচট খাচ্ছে একই প্রশ্নে। আমার কাছে এটি এর মতো আরও স্পষ্ট:

1. ভ্যু.জেস যখন কোনও v-on directiveপদ্ধতি অনুসরণ করে দেখে , ঠিক কোন পদ্ধতিটি কল করতে হবে এবং কখন এটি কল করতে হবে তা তা জানে ।

<button v-on:click="clearMessage">Clear message</button> // @click
// method clearMessage is only called on a click on this button

<input v-model="message" @keyup.esc="clearMessage" @keyup.enter="alertMessage" />
/* The method clearMessage is only called on pressing the escape key
and the alertMessage method on pressing the enter key */

2. যখন কোনও পদ্ধতিকে ছাড়াইv-on directive ডাকা হয় তখন প্রতিবার পৃষ্ঠাটিতে একটি ইভেন্ট ট্রিগার করা হলে ডম আপডেট হয় (বা কেবল পৃষ্ঠার একটি অংশ পুনরায় রেন্ডার করা দরকার) called এমনকি যখন ইভেন্টটি ট্রিগার হওয়ার সাথে সেই পদ্ধতির কোনও সম্পর্ক নেই।

<p>Uppercase message: {{ messageUppercase() }}</p>
methods: {
   messageUppercase() {
      console.log("messageUpercase");
      return this.message.toUpperCase();
   }
}
/* The method `messageUppercase()` is called on every button click, mouse hover 
or other event that is defined on the page with the `v-on directive`. So every
time the page re-renders.*/

3. একটি গুণিত সম্পত্তি কেবল তখনই ডাকা হয় যখন কোনও সম্পত্তির মান পরিবর্তিত হয় যা তার ফাংশন সংজ্ঞাতে thisশব্দ দ্বারা রেফারেন্স করা হয় ।
   

<p>Uppercase message: {{ messageUppercase }}</p> 
data() {
 return {
    message: "I love Vue.js"
   }
 },
computed: {
 messageUppercase() {
    console.log("messageUpercase");
    return this.message.toUpperCase();
 }
}
/* The computed property messageUppercase is only called when the propery message is
changed. Not on other events (clicks, mouse hovers,..) unless of course a specific 
event changes the value of message.  */

এখানে পদক্ষেপ নেওয়ার বিষয়টি হল যে computedকোনও পদ্ধতির সাথে ডাকা হচ্ছে না এমন ক্ষেত্রে বৈশিষ্ট্যগুলি ব্যবহার করার পক্ষে এটি সর্বোত্তম অনুশীলন v-on directive।