前言

該篇介紹一下Vue中的methods、computed和watch的使用和區(qū)別`

提示：以下是本篇文章正文內容，下面案例可供參考

一、methods屬性

介紹：
1.methods中的函數(shù)(方法)也是暴露到Vue實例對象(vm)上
2.作用：處理業(yè)務邏輯

1.無參的函數(shù)

關鍵代碼如下（示例）：

<div id="App">
        <h1>n的值為:{{ n }}</h1>
        <button @click="add">按鈕</button>
        <!-- add 也可以寫成 add() -->
</div>
-----------------------------------------------------
data: {
    n: 1
},
methods: {
    add(e){
    	// console.log(e) 這里的第一個形參e 是事件對象
        this.n++
    }
},     

2.有參的函數(shù)

關鍵代碼如下（示例）：

<div id="App">
        <h1>n的值為:{{ n }}</h1>
        <button @click="add(5)">點我加5</button>
        <button @click="add(10)">點我加10</button>
</div>
------------------------------------------------------
data: {
    n: 1
},
methods: {
    add(x){
    	// 但這種情況下，我們拿不到 事件對象e 了
    	// 但是，在模板傳參的過程中，我們可以通過$event將事件對象傳入
        this.n += x
    }
},

提示：如果想詳細了解$event的使用，請移步到我的另一篇文章

二、computed屬性

介紹：
1.computed中的屬性是基于現(xiàn)有數(shù)據(jù)(響應式依賴)計算出來的新屬性，也是暴露在Vue實例對象(vm)上
2.計算屬性有兩種寫法：函數(shù)式(常用的)；對象式
3.原理：底層借助了Object.defineProperty提供的getter和setter

1.函數(shù)式

默認寫法：可讀不可改(有getter無setter)

代碼如下（示例）：

data: {
    firstName: '張',
    lastName: '三',
}
--------------------------------------------------------
computed: {
    // 簡寫 函數(shù)式(只讀不可寫，默認寫法)    只有getter 無setter
    fullName() {
        return this.firstName + this.lastName
    }
}

2.對象式

完整寫法：可讀可改(有getter有setter)

代碼如下（示例）：

data: {
    firstName: '張',
    lastName: '三',
}
------------------------------------------------------------
computed: {
    // 完整寫法 對象式(可讀可改)    有getter和setter
    fullName:{
        get(){
            return this.firstName + this.lastName
        },
        set(value){
            const arr = value.split('-')
            this.firstName = arr[0]
            this.lastName = arr[1]
        }
    }
}

注意： 1.一般情況下采取函數(shù)式寫法 2.如果計算屬性要被手動修改，那必須采取對象式寫set函數(shù)去響應修改，且set中要引起計算時依賴的數(shù)據(jù)發(fā)生改變(這樣可實現(xiàn)數(shù)據(jù)雙向綁定)

三、watch屬性

介紹：
1.監(jiān)視數(shù)據(jù)變化，然后執(zhí)行一些業(yè)務邏輯或異步操作
2.監(jiān)聽屬性有3個配置項：①immediate ②deep ③handler函數(shù)
3.監(jiān)聽屬性有兩種寫法：對象式(完整寫法)；函數(shù)式(簡寫)

1.對象式

完整寫法

watch: {
    // 完整寫法 對象式
    lastName:{
        immediate: true,    // 初始化時，先調用一次handler函數(shù)
        deep: true,         // 深度監(jiān)聽，可監(jiān)聽多層對象
        handler(newValue,oldValue){
            console.log(newValue,oldValue)
        }
    }
}

2.函數(shù)式

簡寫：當不需要①②配置項時可簡寫

watch: {
    // 簡寫 函數(shù)式        當不需要 immediate: true,deep: true,時
    lastName(newValue, oldValue){
        console.log(newValue, oldValue)
    }
}

注意： 需要根據(jù)具體情況具體分析采取哪種方式

四 、區(qū)別

提示：這也是比較常見的面試題
給大家一個小tip：在我們回答面試題時，思維邏輯一定要清晰，而不是想到啥答啥
拿這個問題舉例：我們可以從兩個角度出發(fā)回答問題(具體問題具體分析角度)
1.本職工作(主要應用場景)
2.當二者能實現(xiàn)同一功能時，誰更有優(yōu)勢

1.計算屬性和方法

（1）本職工作不同：
① 計算屬性是基于現(xiàn)有數(shù)據(jù)(響應式依賴)計算出來的新屬性，它本質也還是一個屬性,和data里的數(shù)據(jù)應用場景一樣，主要應用在模板，一些業(yè)務邏輯中數(shù)據(jù)的處理。
② 方法的主要應用是處理一些業(yè)務邏輯
（2）當二者能實現(xiàn)同一功能時，應該采用computed
因為computed計算屬性內部有緩存機制，可復用，效率更高，調試更方便

2.computed計算屬性和watch監(jiān)聽屬性

（1）本職工作不同：
①computed計算屬性本質還是一個屬性，當我們有一些數(shù)據(jù)需要隨著其它數(shù)據(jù)(響應式依賴)變動而變動時，此時使用computed
②當數(shù)據(jù)變化時，我們需要執(zhí)行一些業(yè)務邏輯或異步操作，此時使用watch
（2）當二者能實現(xiàn)同一功能時，應該采用computed
因為computed計算屬性內部有緩存機制，可復用，效率更高，調試更方便

有人可能會疑惑為什么這兩個問題的第一條第一點不是完全一樣的？？？
因為具體問題具體分析。當我拿到這個問題時，我已經將它們進行了對比，所以說在回答的時候，是相對比另一個來說的，是有針對性分析的，而不是再回答一些無關緊要的內容。

到此這篇關于Vue中的methods、computed計算屬性和watch監(jiān)聽屬性的使用和區(qū)別的文章就介紹到這了,更多相關Vue計算屬性和watch監(jiān)聽屬性內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論