Vue difference calculation methods and properties

First look at the methods method

// html
<div id="vue">
    <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>age : {{age}}</p>

    <- Method using methods ->
    <p>age + a = {{addtoa()}}</p>
    <p>age + b = {{addtob()}}</p>
    <p>cc = {{cc()}}</p>
</div>

// js 
new view ({
    el : "#vue",

    data : {
        a : 0,
        b : 0,
        age : 20,
    },

    methods: {
        addtoa() {
            the console.log ( "method using a addtoa" );
             return  the this II.A + the this .age;
        },
        addtob() {
            the console.log ( "method using a addtob" );
             return  the this .B + the this .age;
        },
        cc() {
            the console.log ( 'method uses cc' );
             return 'cc' ;
        },
    },
})

Open your browser to view the console, shown below

Then click on a button 'add to a', the console displays the following

Click 'add to a', just let the value of a plus 1, while the other values ​​are not changed, but found not only with a value associated addtoa execution method, but all methods in the method are performed. Then click 'add to b', you will find all the methods are implemented

 

 Look at computed to calculate property

// html
<div id="vue">
    <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>age : {{age}}</p>

    <! - computed using the computed attribute, note that no parentheses ->
    <p>age + a = {{addtoa}}</p>
    <! - Note that this is also calculated once addtoa ->
    <p>age + a = {{addtoa}}</p>
    <p>age + b = {{addtob}}</p>
    <p>cc = {{cc}}</p>
</div>

// js 
new view ({
    el: "#vue",

    data: {
        a: 0,
        b: 0,
        age: 20,
    },

    computed : { 
        addtoa() {
            the console.log ( "attribute used addtoa" )
             return  the this II.A + the this .age;
        },
        addtob() {
            the console.log ( "attribute used addtob" )
             return  the this .B + the this .age;
        },
        cc() {
            the console.log ( 'attributes used cc' )
             return 'cc'
        },
    },
})

Open your browser to view the console, shown below

Then click on a button 'add to a', the console displays the following

Html found in clearly written twice addtoa property, but only the beginning of a line of print 'use addtoa property', and when changing a value, only the data related to the property that is addtoa was recalculated, and it is also the only print line 'using addtoa properties'

 

to sum up

Two examples are a function defined as methods or properties, on the final results, in fact, they are the same

But the calculation is based on property type dependent response caching only when data changes, will be recalculated, otherwise the call directly to the cache

The method of calculating the properties as compared to methods thus more efficiency performance

For any complex logic, it should be calculated using properties