Vue study notes (3) calculated attributes and listening attributes

Vue study notes (3) calculated attributes and listening attributes

1. Calculated properties (computed)

(1) Calculation properties

The original intention of the template design is to handle simple logic (declarative logic), adding too much logic to the template will make the template difficult to read and maintain

<!DOCTYPE html > < html > < head > < title > Demo </title > < script src = "https://unpkg.com/vue/dist/vue.js" > </script > </head > < body > < div id = "app" > < p > Original string: {{ message }} </p > <!-- For example, perform complex string inversion operations on message in the template--> < p > Reverse string: {{ message.split('').reverse().join('') }} </p > </div > < script > var vm = new Vue({ el : '#app' , data : { message : 'hello' } }) </script > </body > </html > Copy code

At this time, we should consider using calculated attributes instead of complex template logic

<!DOCTYPE html > < html > < head > < title > Demo </title > < script src = "https://unpkg.com/vue/dist/vue.js" > </script > </head > < body > < div id = "app" > < p > Original string: {{ message }} </p > <!-- Use calculated attributes directly in the template--> < p > Reverse string: { {reversedMessage }} </p > </div > < script > var vm = new Vue({ el : '#app' , data : { message : 'hello' }, //computed is the computed attribute of the Vue instance. //It can be an object, where the key of each item is the name of the computed attribute, and the value is the function computed for the computed attribute : { //Here, we declare the computed attribute reversedMessage, using After storing the reversed string //The provided function defaults to the getter function of the calculated property (in fact, the setter function can also be provided) //The calculated property reversedMessage here depends on the message //That is, when the message changes , ReversedMessage will automatically update reversedMessage : function () { return this .message.split( '' ).reverse().join( '' ) } } }) </script > </body > </html > Copy code

(2) computed & methods

I don t know if you still remember, we have an example in the previous article, using methods to achieve the effect of reversing strings

<!DOCTYPE html > < html > < head > < title > Demo </title > < script src = "https://cdn.jsdelivr.net/npm/vue" > </script > </head > < body > < div id = "app" > < p > Original string: {{ message }} </p > <!-- Display the return result of the method in the template--> < p > Reverse the string: {{ reversedMessage() }} </p > </div > < script type = "text/javascript" > var vm = new Vue({ el : '#app' , data : { message : "Hello Vue" }, methods : { //Define the method reversedMessage(), and return the reversed string reversedMessage : function () { return this .message.split( '' ).reverse().join( '' ) } } }) </script > </body > </html > Copy code

As you can see, the functions implemented by computed and methods are roughly the same, but their differences are:

  1. is computed property call , and methods is the method call
  2. It is computed based on the cache , rather than methods

For calculated attributes, the calculated results will be cached. If a dependency is outside the scope of the instance, then the calculated attributes will not be updated

But for methods, calling the method will always execute the code again. We can see the difference between them from a simple example:

<!DOCTYPE html > < html > < head > < title > Demo </title > < script src = "https://cdn.jsdelivr.net/npm/vue" > </script > </head > < body > < div id = "app" > <!-- Note, here is the attribute call--> < p > The first call to computed: {{ msg_in_computed }} </p > < p >The second call to computed : msg_in_computed {{}} </P > < br/> <! - note that this is a method call -> < P > first call methods: {{msg_in_methods ()}} </P > < P > Call methods for the second time: {{ msg_in_methods() }} </p > </div > < script> var cnt_for_computed = 0 ; var cnt_for_methods = 0 ; var vm = new Vue({ el : '#app' , computed : { //Define the calculated attribute msg_in_computed, multiple calls will not update the data //because its dependence on cnt_for_computed is non-responsive Attribute, not within the scope of the instance msg_in_computed : function () { cnt_for_computed += 1 ; return cnt_for_computed } }, methods : { //Define the method msg_in_methods(), each call will always execute the code msg_in_methods : function () { cnt_for_methods += 1 ; return cnt_for_methods } } }) </script > </body > </html > <!-- Output result The first call to computed: 1 The second call to computed: 1 The first call to methods: 1 The second call to methods: 2 --> Copy code

(3) getter & setter

Calculated properties only have getter functions by default

<!DOCTYPE html > < html > < head > < title > Demo </title > < script src = "https://cdn.jsdelivr.net/npm/vue" > </script > </head > < body > < div id = "app" > < p > fullName: {{ fullName }} </p > < p > firstName: {{ firstName }} </p > < p > lastName: {{ lastName }} </p > </div > < script > var vm = new Vue({ el : '#app' , data : { firstName : ', lastName : 'Jobs' }, computed : { //If a function is provided for the computed property, the function will default to the getter function of the computed property fullName : function () { return this .firstName + '' + this .lastName } } }) //When modifying the value of the calculated attribute, the getter function of the calculated attribute will be automatically called vm.firstName = 'Stephen' </script > </body > </html > <!-- Output result fullName: Stephen Jobs firstName: Stephen lastName: Jobs --> Copy code

However, we can also provide a setter function when needed

<!DOCTYPE html > < html > < head > < title > Demo </title > < script src = "https://cdn.jsdelivr.net/npm/vue" > </script > </head > < body > < div id = "app" > < p > fullName: {{ fullName }} </p > < p > firstName: {{ firstName }} </p > < p > lastName: {{ lastName }} </p > </div > < script > var vm = new Vue({ el : '#app' , data : { firstName : 'Steve', lastName : 'Jobs' }, computed : { fullName : { //getter function get : function () { return this .firstName + '' + this .lastName }, //setter function set : function ( newValue ) { var names = newValue.split( '' ) this .firstName = names[ 0 ] this .lastName = names[names.length- 1 ] } } } }) //When modifying the value of the calculated property, the setter function of the calculated property will be automatically called vm.fullName = 'Tim Cook' </script > </body > </html > <!-- Output result fullName: Tim Cook firstName: Tim lastName: Cook --> Copy code

2. Listening attributes (watch)

Listener attribute is an object, the key is the need to observe the expression, value corresponding to a callback function or contains options objects

  • Corresponding callback function
<!DOCTYPE html > < html > < head > < title > Demo </title > < script src = "https://cdn.jsdelivr.net/npm/vue" > </script > </head > < body > < div id = "app" > < p > Counter: {{ counter }} </p > < button @ click = "counter++" > click me </button > </ div > < script type = "text/javascript" > var vm = new Vue({ el : '#app' , data : { counter :1 }, watch : { //When the counter changes, it will automatically call its corresponding callback function to print a message counter : function ( val, oldVal ) { alrt( 'Counter changed from' + val + 'to' + oldVal); } } }); </script > </body > </html > Copy code
  • Object containing options
var vm = new Vue({ el : '#app' , data : { counter : 1 }, watch : { //Use the object to add more configuration information for the monitor attribute counter : { handler : function ( val, oldVal ) { alrt( 'Counter changed from' + val + 'to' + oldVal); }, deep : true , //When the properties of the monitoring object change (regardless of the depth of nesting), the callback is triggered immediate : true //After the listening starts, the callback is triggered immediately }, } }); Copy code