Analysis of Vue's template syntax, calculated properties, and listeners

The content shared with you in this article is about the analysis of Vue’s template syntax, calculated properties and listeners. Friends in need can refer to it.

TemplateSyntax,ComputationProperties and listeners

Goal:

1,Proficient in usingvue’stemplate syntax

2. Understand theusageandapplication scenariosof computed properties

1.Template syntax

    
 first: {{firstName}}
 last: {{lastName}}
 {{firstName + ' ' + lastName}} 
   
  
123
   
 

2. Computed properties(computed)

Computed properties and methods are different,Computed properties are cached based on their dependencies,,When the relevant variables of the calculated attribute change, the calculation will be recalculated,Otherwise, the previous calculation result will be read directly from the cache.(This can reduce performance consumption)

Computed properties includegetterandsetter,You can define the functions that will be executed when setting and getting the value respectively.

3. Listener(watch)

If we only need to listen to one piece of data,or perform some operations when a piece of data changes(To change multiple data),And these changes may not have dependencies on this data,then you can use the listener.

##Listener,can listen for changes in a data,Then perform the corresponding operations.

4. Usage scenarios

is good at processing: a data Affecting multiple data(One change)2.computed
Scenarios that are good at processing: one data is affected by multiple data(Multiple changes,Finally returns one data)

relative Normally,needs to actively trigger,may also make the code complicated,And if the scenarios like the above,usemethod, there will be greater performance consumption.

Related recommendations:

vue life cycle, vue instance, template syntax

The above is the detailed content of Analysis of Vue's template syntax, calculated properties, and listeners. For more information, please follow other related articles on the PHP Chinese website!