computed

Computed, though written like a function, actually computes properties. It does some computation on the data object of the data, just like getters and setters create an accessor property. It has a feature that Vue does internal caching and only recalculates and triggers rendering if its dependency properties change. Otherwise, the calculation will not be triggered again.

writing

Type: {[key: string] : Function | {get: the Function, the set: the Function}}

longhand

const vm=new Vue({
	data: {a:1
    },
    computed: {b:function(){
        	return this.a+1
        },
        c(){ / / es6 writing
        return this.a+2
        }
    }
})
vm.b / / 2
vm.c / / 3
Copy the code

The above properties only have getter effects, and we can only read the value of the calculated property

Accessor writing

const vm=new Vue({
	data: {n:1},
    computed: {a: {get(){return this.n+1},
            set(value){this.n=value-1}
        }	
    
    }
})
vm.n / / 1
vm.a =3
vm.n / / 2
Copy the code

The accessor is written to look like setting a property, and we can also set the value of the compute property. The above writing affects the reactive property n, which also changes when setting vm.a.

Computed has a caching effect by default, and does not recalculate or re-render when computed properties have not changed.

watch

Type: {[key: string] : string | Function | Object | Array}

Watch translates to observe, and in VUE it is a listener that listens (observes) for dependent properties. When the listening property changes, a function is executed. It is important to note that watch is an asynchronous function, so if our property needs to listen before performing a change, we can use the $nextTick API

writing

let vm = new Vue({
    data: {
        a: 1.b: {
            c: 2
        },
        d: {
            e: {
                f: 3}}},watch: {
        a(newvalue, oldValue) {
            console.log( Changed 'a')},b: {
            handler: function (v, oldv) {
                console.log(Changed "b")},immediate: true // Call the callback function when listening starts
        },
        'b.c': function (v, oldv) {
            console.log("The biggest change")},d: {
            handler: function (v, oldv) {
                console.log(Changed "d")},deep: true // Listen for any changes in d, d.e, and D.E.F}}})/ / vm. B
vm.a=2 / / a change
vm.b={c:2} / / b changed
vm.b={c:2.x:3} / / b changed
vm.b={c:3} //b changes b.c changes
vm.b.c=100 / / the biggest change
vm.d.e.f=4 / / d
Copy the code

To understand watch, you first need to know the types of properties that change.

Different attribute values affect watch results

  • When the attribute value is a simple data type, for example, vm.a, the attribute value is a simple data type, so it is easy to monitor its change. Property value! == The changed attribute value will trigger watch

  • When the attribute value is a complex data type, for example, vm.b, it holds the {c:2} value.

If its memory address changes, that is, the original {c:2} memory address is not the same as the {c:2} memory address I set later, so b will change,

conclusion

  • When the value of the listening attribute is a simple data type, the value is compared and the watch is triggered if the value is different

  • Addresses are compared if the value of the listening attribute is a complex data type. Different addresses trigger the watch

Deep and immediate

Deep means deep listening, that is, the property value corresponding to the property I set. Even if the complex data type is added deep, it will listen in all directions, including the address, the address of the inner property, and the property value of the inner property.

Immediate indicates that the callback function is fired first when the listener starts. By default, the watch effect is not fired at first, but only the listener.

The application scenarios of both

Computed is recommended when we are trying to create another property from a data object

Watch can be used when we are trying to do something by listening for changes to the data object (such as executing a function), especially when using watch for asynchronous execution.