一個實例入門Vue計算屬性、方法、偵聽器

入門學習Vue，計算屬性、方法、偵聽器是不可或缺的知識點。為了方便簡單，這次我們用同樣一個例子分別用計算屬性、方法、偵聽器三種方法來實現同樣的效果。話不多說，直接上車。

效果：

我在Vue中定義了name1和name2兩個值，預期效果是在html中輸出name，而name也就是name1 name2拼接而成。無論name1改變或name2改變，name都會隨著改變。

<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>

瀏覽器效果：

#1、計算屬性實作效果

<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>

分析：computed就是計算屬性，從字面意思也能計算也就是把name1和name2拼接起來，最後產生了name。

要注意計算屬性是有快取的，也就是只要當name1或name2發生變化，和快取中的值不同的時候，才會重新計算。

如果name1或name2沒有發生變化，computed不會重新計算。

2、method方法實現效果

<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>

注意：插值表達式{{name()}}必須有括號。

和計算屬性不同，只要頁面載入一次，那麼方法就執行一次，沒有快取一說。

3、監聽器實現效果

<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;
                }
            }

#注意：監聽器實現，從字面意思上也是能理解，監聽既是監聽name1和name2的變化，如果有變化，那麼name就會被重新賦值。這裡呢，有一個name預設值的。

最後

三種方法都可以實作同樣的方法，那麼最佳的又是哪一個呢？

最佳的是第一個計算屬性，計算屬性同第二種methods相比有緩存，節省效能，而同第三種相比又簡潔了程式碼。

大家在熟練後會越來越了解它們了。

以上是一個實例入門Vue計算屬性、方法、偵聽器的詳細內容。更多資訊請關注PHP中文網其他相關文章！