Calculate attribute

Take the name case

Target requirement: Enter the last name, first name, the page automatically output the full name, separated by ‘-‘

Available implementation methods:

1. Native implementation

Let p = {firstName :' zhang ', lastName :' three '} object.defineProperty (p,'fullname',{set(value){const arr = value.split('-'); this.firstname = arr[0]; this.lastname = arr[1]; }, get(){ return this.firstname + '-' + this.lastname; }})Copy the code

Use the defineProperty method when the attribute to be appended is processed from another existing attribute. DefineProperty method, when fullName attribute is called, get function is triggered, and when fullname attribute is changed, set function is triggered. By setting the internal code of set function, the original object attribute can be changed in turn. Vue source data monitoring is based on the set and GET functions.

2. Interpolation method

<div id="root"> surname: <input type="text" V-model =" firstName "> name: <div type="text" v-model=" lastName "> {{firstname + '-' + lastname}} < / span > < / div > < script > new Vue ({el: '# root, data: {firstname:' a ', }}) </script>Copy the code

The interpolation method can be used when only the full name needs to be computed to display the full name.

3. The methods to realize

<div id="root"> surname: <input type="text" V-model =" firstName "> name: <div type="text" v-model=" lastName "> {{getFullName ()}} < / span > < / div > < script > new Vue ({el: '# root, data: {lastname firstname:' a ':' 3 '}, methods:{ getFullName(){ return this.firstname + '-' + this.lastname; }}})Copy the code

4.Computed Computing property implementation

Const vm = new Vue({el:'#root', data:{firstname:' zhang ', lastname:' 3 '}, computed:{ fullName:{ set(value){ const arr = value.split('-'); this.firstname = arr[0]; this.lastname = arr[1]; },get(){ return this.firstname + '-' + this.lastname; }}}})Copy the code

If you only need to compute the fullName, you can abbreviate the computed attribute to fullName(){return this.firstname + ‘-‘ + this.lastname; } Because we want to further change the full name and change the first or last name, we use the full form, that is, we call the set and get functions. The set function retrieves the changed value. Note: The fullName attribute in computed is invoked by vm objects, so its this refers to Vue objects.

Compare the Methods implementation with the computed implementation:

When implemented with methods, methods in methods are called once whenever there is a slight change in the global data.

With a computed implementation, methods in computed are re-invoked only when the dependent properties change. Compared with methods, computed has a caching mechanism and is more efficient.

Data monitoring

Take the name case

The watch implementation of the name case

<div id="root"> surname: <input type="text" V-model =" firstName "> <br> <input type="text" v-model="lastname"> <br><br> <span> fullname: {{fullname}}</span> </div> <script> '#root', data: {firstName: 'immediate ', fullname: ''}, watch: {firstname: {immediate: // If immediate is true, handler(newValue, oldValue) {this. fullName = newValue + '-' + this. lastName; } }, lastname(newValue, oldValue) { this.fullname = this.firstname + '-' + newValue; } } }) </script>Copy the code

The handler function is written in full so that you can add the immediate attribute so that watch is called once during initialization. If you don’t need an initial call, you can abbreviate it.

The handler function in watch can detect changes in the corresponding data and return old and new values, much like for computed, but for computed set, it seems unable to return old values. In general, all functions that can be realized by computed tomography can be realized by watch, but functions that computed can be realized by watch may not be realized by computed. For example, the watch can be completed asynchronously (timer), but it should be noted that the function of timer must be written as arrow function. Otherwise, this inside the function points to the window.

Watch can be wrapped outside of Vue, and using vm.$watch(‘ property ‘,{}) can be used to deal with situations where there is no initial decision on which object to monitor.

An important principle in Vue is:

For all functions managed by Vue, do not write arrow functions such as those in computed and watch.

For all functions that are not managed by Vue, write arrow functions – timer callbacks, Ajax callbacks, for example.