“This is the 18th day of my participation in Gwen Challenge.

Computed attributes: The difference between 1.computed and Methods: 1.computed stores computed attributes, not functions, and does not write parentheses when called. 2. The calculated properties specify the data monitoring, when specified data change, will be triggered watch listen attributes: object delegates to monitor data, object values for the operation of the data changes to do (callback function), monitoring data of the latest value will pass in the form of parameters in the function, triggering action only to monitor the data update

Differences between Watch and computed:

Watch has the following characteristics:

1. There is no return value

2. Write asynchronous code

3. Only listen for a single variable

For example, the difference between computed and methods: When all variables trigger a re-render, all methods in methods are executed once; Properties in computed perform operations only when a change in the monitored data triggers a re-render

<div id="app">
	<! -- Operation variable count-->
    <button v-on:click="increase()">count+1</button>
    <button v-on:click="de()">count-1</button>
    <p>{{count}}</p>
    <p>{{result()}}</p>
    <p>{{output}}</p>
    
    <! -- Operation variable count2-->
    <button v-on:click="count2++">count2+1</button>
    <p>{{count2}}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app".data: {count:0.count2:0
        },
        computed: {output : function(){
                console.log("output");
                return this.count>5 ? "Greater than 5":"Less than 5"}},// Calculate attributes
        methods: {increase: function(){
                this.count++;
            },
            de:function(){
                this.count--;
            },
            result: function(){
                console.log("result")
                return this.count>5 ? "Greater than 5":"Less than 5"}}})</script>
Copy the code

When the first two buttons are clicked, add or subtract count. Result () and output check if count is greater than 5.

The third button is for count2. When you click this button, count2 is incremented and the bottom value changes. Result () has nothing to do with count2, but is executed as well

\

If count2 is not displayed, the page has not changed, and only count2+1 is clicked, the page does not trigger a re-rendering, and methods will not trigger

Comment out the p tag showing the value of count2:

<! -- <p>{{count2}}</p> -->
Copy the code

Count2 +1: result() and output () are not triggered:



Differences between computed and Watch:

// Listen for a single variable without return (greater than 5/ less than 5)
new Vue({
    el: "#app".data: {count:0.output2:""
    },
    watch: {count:function(val){
            this.output2 = val > 5 ? "Greater than 5":"Less than 5" / / there is no return
        } // At first output2 is not displayed
    },
    computed: {output: function(){
            return this.count > 5 ? "Greater than 5":"Less than 5"
        } // Display output at the beginning}})Copy the code
<div id="app">
    <button v-on:click="increase()">count+1</button>
    <button v-on:click="de()">count-1</button>
    <p>{{count}}</p>
    <p>{{output}} | {{output2}}</p>
</div>
Copy the code