An example of getting started with Vue computed properties, methods, and listeners

When learning Vue for beginners, calculated properties, methods, and listeners are essential knowledge points. For convenience and simplicity, this time we use the same example to achieve the same effect using three methods: calculated properties, methods, and listeners. Without further ado, just get in the car.

Effect:

I defined two values ​​​​name1 and name2 in Vue. The expected effect is to output name in html, and name is the concatenation of name1 and name2. become. Regardless of whether name1 changes or name2 changes, name will change accordingly.

<div id="root">
        {{name}}
    </div>

    <script>
        
        // 父组件
        new Vue({
            el:"#root", 
            data:{
                name1:&#39;jiang&#39;,
                name2:&#39;he&#39;,
                name:&#39;jiang he&#39;,
            }
        })
     </script>

Browser effect:

1. Computed attribute implementation effect

<div id="root">
        {{name}}
    </div>

    <script>
        
        // 父组件
        new Vue({
            el:"#root", 
            data:{
                name1:&#39;jiang&#39;,
                name2:&#39;he&#39;,
            },
           
            computed:{
                name:function(){
                 return this.name1+&#39; &#39;+this.name2;
              }
            }
        })
    </script>

Analysis: computed is a calculated attribute. It can also be calculated literally, that is, name1 and name2 are spliced ​​together to finally generate name.

It should be noted that calculated attributes are cached, that is, they will be recalculated only when name1 or name2 changes and is different from the value in the cache.

If name1 or name2 does not change, computed will not be recalculated.

2. Method method to achieve the effect

<div id="root">
        {{name()}}
    </div>

    <script>
        
        // 父组件
        new Vue({
            el:"#root", 
            data:{
                name1:&#39;jiang&#39;,
                name2:&#39;he&#39;,
            },
           
            methods:{
                name:function(){
                    return this.name1+&#39; &#39;+this.name2;
                }
            }
            
        })
    </script>

Note: The interpolation expression {{name()}} must have parentheses.

Different from calculated properties, as long as the page is loaded once, the method is executed once, and there is no caching.

3. Listener implementation effect

<div id="root">
        {{name}}
    </div>

    <script>
        
        // 父组件
        new Vue({
            el:"#root", 
            data:{
                name1:&#39;jiang&#39;,
                name2:&#39;he&#39;,
                name:&#39;jiang he&#39;,
            },
            watch:{
                name1:function(){
                    this.name= this.name1+&#39; &#39;+this.name2;
                 },
                name2:function(){
                    this.name= this.name1+&#39; &#39;+this.name2;
                }
            }

Note: The listener implementation can be understood literally. Monitoring is to monitor changes in name1 and name2. , if there is a change, the name will be reassigned. Here, there is a default value for name.

Finally

All three methods can achieve the same method, so which one is the best?

The best one is the first calculated attribute. Compared with the second method, the calculated attribute is cached and saves performance, and compared with the third method, the code is simpler.

Everyone will understand them better and better after becoming proficient.

The above is the detailed content of An example of getting started with Vue computed properties, methods, and listeners. For more information, please follow other related articles on the PHP Chinese website!