Vue computing and listening properties

Time:2020-11-19

Computed property computed

Computational properties are useful when dealing with complex logic. We can use methods instead of computed, and the effect is the same, but computed is based on its dependency cache, and the value will be retrieved only when the dependency changes. With methods, when rendering again, the function will always be called again.
It can be said that the performance is better with computed, but if you don’t want caching, you can use the methods property.
The computed property has only getter by default, but you can also provide a setter if necessary.
The bidirectional data binding function in computed must have get(), set()

<template>
    <div id="home">
        <p>{{num}}</p>
        <p>double {{double1}}</p>
        <input type="text" v-model="double2">
    </div>
</template>
<script>
    export default {
        name: "Home",
        data() {
            return {
                num: 20
            }
        },
        computed: {
            double1: function () {
                return this.num * 2;
            },
            double2: {
                get: function () {
                    return this.num * 2;
                },
                set: function (val) {
                    this.num = val / 2;
                }
            }
        }
    }
</script>

Listening Property Watch

We can respond to changes in data through watch.

<template>
    < button @ Click = "counter + +" > Click me < / button >
</template>
<script>
    data() {
        return {
            counter: 0,
        }
    },
    watch:{
        counter:function(nval,oval) {
            Alert ('change of counter value: '+ oval +' becomes' + NVAL + '!');
        },
    }
</script>

Watch is shallow monitoring by default. (only the surface changes are monitored.)
Shallow listening for reference type (object array): it can only listen to its own layer, and its sub layer and the following changes cannot be monitored. So use deep monitoring. How is watch a deep monitor?

data() {
    return {
        MSG: "this is the home page.",
        counter: 0,
        info:{
            city:"beijing"
        }
    }
},
watch: {
    //Value type. Oldval and newval can be obtained normally
    counter: function (newVal, oldVal) {
        Alert ('change of counter value: '+ oldval +' becomes' + newval + '!');
    },
    //Reference type. Oldval cannot be obtained because the pointer is the same and points to the same heap address. At this point, it points to the new val
    info: {
        handler(oval, nval) {
            console.log("watch info", oval, nval);
        },
        Deep: true // deep listening
    }
}

Watch listens for the reference type. Oldval cannot be obtained
Because the pointers are the same, the new value and the old value point to the address of the same heap. At this point, the new Val is pointed to.

Recommended Today

PHP 12th week function learning record

sha1() effect sha1()Function to evaluate the value of a stringSHA-1Hash. usage sha1(string,raw) case <?php $str = “Hello”; echo sha1($str); ?> result f7ff9e8b7bb2e09b70935a5d785e0cc5d9d0abf0 sha1_file() effect sha1_file()Function calculation fileSHA-1Hash. usage sha1_file(file,raw) case <?php $filename = “test.txt”; $sha1file = sha1_file($filename); echo $sha1file; ?> result aaf4c61ddcc5e8a2dabede0f3b482cd9aea9434d similar_text() effect similar_text()Function to calculate the similarity between two strings. usage similar_text(string1,string2,percent) case […]