Vue計算屬性、方法、偵聽器的案例分析-創(chuàng)新互聯(lián)

這篇文章將為大家詳細(xì)講解有關(guān)Vue計算屬性、方法、偵聽器的案例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)公司云計算的互聯(lián)網(wǎng)服務(wù)提供商,擁有超過13年的服務(wù)器租用、遂寧服務(wù)器托管、云服務(wù)器、網(wǎng)站空間、網(wǎng)站系統(tǒng)開發(fā)經(jīng)驗，已先后獲得國家工業(yè)和信息化部頒發(fā)的互聯(lián)網(wǎng)數(shù)據(jù)中心業(yè)務(wù)許可證。專業(yè)提供云主機(jī)、網(wǎng)站空間、申請域名、VPS主機(jī)、云服務(wù)器、香港云服務(wù)器、免備案服務(wù)器等。

入門學(xué)習(xí)Vue，計算屬性、方法、偵聽器是必不可少的知識點。為了方便簡單，這次我們用同樣一個例子分別用計算屬性、方法、偵聽器三種方法實現(xiàn)同樣的效果。話不多說，直接上車。

效果：

我在Vue中定義了name1和name2兩個值，預(yù)期效果是在html中輸出name，而name也就是name1+name2拼接而成。無論name1發(fā)生改變還是name2發(fā)生改變，name都會隨著改變。

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

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

瀏覽器效果：

Vue計算屬性、方法、偵聽器的案例分析

1、計算屬性實現(xiàn)效果

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

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

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

要注意計算屬性是有緩存的，也就是只要當(dāng)name1或者name2發(fā)生變化，和緩存中的值不同的時候，才會重新計算。

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

2、method方法實現(xiàn)效果

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

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

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

和計算屬性不同，只要頁面加載一次，那么方法就執(zhí)行一次，沒有緩存一說。

3、監(jiān)聽器實現(xiàn)效果

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

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

注意：監(jiān)聽器實現(xiàn)，從字面意思上也是能理解，監(jiān)聽既是監(jiān)聽name1和name2的變化，如果有變化，那么name就會被重新賦值。這里呢，有一個name默認(rèn)值的。

最后

三種方法都可以實現(xiàn)同樣的方法，那么最佳的是哪個呢？

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

關(guān)于Vue計算屬性、方法、偵聽器的案例分析就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

當(dāng)前標(biāo)題：Vue計算屬性、方法、偵聽器的案例分析-創(chuàng)新互聯(lián)
文章位置：http://muchs.cn/article6/dpijog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、網(wǎng)站改版、網(wǎng)站導(dǎo)航、手機(jī)網(wǎng)站建設(shè)、App開發(fā)、動態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)