Usage scenario of Vue calculation attribute computed and listener Watch

Time:2020-4-5

Original link: HTTPS: / / dsx2016. COM /? P = 679
WeChat official account: Senior brother 2016

Features and differences

vueOfcomputedOption is mainly used to synchronize data processing, whilewatchOption is mainly used for event dispatch, asynchronous

Both of them can achieve the same effect, but based on their respective characteristics, there will be some differences in the use scenarios

computedWith the cache attribute, only when the dependent data changes, the associated data will change, which is suitable for computing or formatting data scenarios

watchListening data is related but not dependent. As long as some data changes, you can process some data or dispatch events and execute synchronously / asynchronously

Usage scenario of Vue calculation attribute computed and listener Watch

Calculated attribute

Abstract concept is not easy to understand. It’s natural to be familiar with more high-frequency scenes. Computing attributes represent synchronous data processing

Instalments in the financial sector,P2PAnnualized income, which is computational in nature, can be given prioritycomputed.

You don’t need to pay attention to click events or other data, as long as you write the calculation rules in the properties, you can get the corresponding data in real time

Usage scenario of Vue calculation attribute computed and listener Watch

Shopping cart statistics in the field of e-commerce, one data depends on one or more data

When the number of shopping carts and products change, the sum of price * quantity will be calculated automatically

If there are coupons or discounts, automatically subtract the discount and calculate the discount amount, as above

As long as the purchase quantity, purchase price, coupons, discount coupons and any other change, the total price will automatically track the change

Usage scenario of Vue calculation attribute computed and listener Watch

Listener

watchCalculation properties that listeners can docomputedIt can also be done. When is it suitable to use a listener?

It is mainly applicable to scenarios related to events and interactions, where data change is a condition, and it is applicable to one data triggering multiple things at the same time

If the loan limit is greater than the loanable limit, a toast prompt will pop up, and the current loan limit will be adjusted to the maximum limit

It can be seen that the change of data is trigger pop-up prompt, which is triggered only under certain amount condition, rather than real-time trigger

Usage scenario of Vue calculation attribute computed and listener Watch

Abstract conception

Interactive event such as pop-up prompt, applicable towatch, applicable to data calculation and character processingcomputed

computer

A last name input box, a first name input box, real-time display of the full name

<div id="name">  {{fullName}}  </div>

<script>
    export default {  
        name: 'test',  
        data: {  
            firstName: 'da',  
            lastName: 'shixiong',  
        },  
        computed: {  
            fullName: function () {  
                return this.firstName + ' ' + this.lastName  
            }  
        }  
    }
</script>

Usage scenario of Vue calculation attribute computed and listener Watch

watch

An amount input box to monitor the value of the amount and give a warm prompt when the condition is met

<div id="Amount">  
    <input v-model="Amount" /> 
</div>

<script>
    export default {  
        name: 'test',  
        data: {  
            Amount: 100,  
        },  
        watch: {  
            Amount: function (newVal,oldVal) {  
                if(newVal>5000) {
                    Alert ("maximum amount can be borrowed 5000 yuan")
                    this.Amount=5000
                }
            }  
        }  
    }
</script>

Usage scenario of Vue calculation attribute computed and listener Watch