methods

methods是方法啊送，也就是函數(shù)，是通過(guò)事件驅(qū)動(dòng)來(lái)執(zhí)行函數(shù)的是被動(dòng)的帽芽。
methods不進(jìn)行緩存删掀，每次都重新執(zhí)行
案例：

<template>
    <div>
        <button @click="getMethodsDate">methods</button>
    </div>
</template>

<script>
export default {
    methods: {
        getMethodsDate(){
            alert(new Date())
        }
    }
}
</script>

image.png

image.png

computed

computed是計(jì)算屬性披泪。
特點(diǎn)：
1、有緩存搬瑰，data不變不會(huì)重新計(jì)算
2款票、不支持異步
3、適合多對(duì)一泽论，也就是多個(gè)屬性計(jì)算出一個(gè)值
4艾少、在computed中的，屬性都有一個(gè)get和一個(gè)set方法翼悴，當(dāng)數(shù)據(jù)變化時(shí)缚够，調(diào)用set方法。
例子：

<template>
    <div>
        <button @click="getMethodsDate">methods</button>
        <button @click="getComputedDate">computed</button>
    </div>
</template>

<script>
export default {
    methods: {
        getMethodsDate() {
            alert(new Date());
        },
        getComputedDate() {
            alert(this.computedDate); // 彈出computedDate的內(nèi)
        },
    },
    computed: {
        computedDate: function () {
            return new Date();
        },
    }
};
</script>

image.png

watch

watch是監(jiān)聽(tīng)，和computed類似古话，監(jiān)聽(tīng)的數(shù)據(jù)發(fā)生變化才會(huì)觸發(fā)雏吭。
特點(diǎn)：
1、不支持緩存陪踩，數(shù)據(jù)變杖们，直接會(huì)觸發(fā)相應(yīng)的操作；
2肩狂、watch支持異步摘完；
3、監(jiān)聽(tīng)的函數(shù)接收兩個(gè)參數(shù)傻谁，第一個(gè)參數(shù)是最新的值描焰；第二個(gè)參數(shù)是輸入之前的值；
4、適合一對(duì)多荆秦，一個(gè)屬性變化影響多個(gè)屬性
5篱竭、監(jiān)聽(tīng)數(shù)據(jù)必須是data中聲明過(guò)或者父組件傳遞過(guò)來(lái)的props中的數(shù)據(jù)，當(dāng)數(shù)據(jù)變化時(shí)步绸，觸發(fā)其他操作掺逼，函數(shù)有兩個(gè)參數(shù)，
immediate：組件加載立即觸發(fā)回調(diào)函數(shù)執(zhí)行瓤介，
deep: 深度監(jiān)聽(tīng)吕喘，為了發(fā)現(xiàn)對(duì)象內(nèi)部值的變化，復(fù)雜類型的數(shù)據(jù)時(shí)使用刑桑，例如數(shù)組中的對(duì)象內(nèi)容的改變氯质，注意監(jiān)聽(tīng)數(shù)組的變動(dòng)不需要這么做。
比如
info: { city: '北京'
}
不加deep就監(jiān)聽(tīng)不到city值的變化

所以祠斧，watch適合異步或開(kāi)銷大的數(shù)據(jù)操作闻察。
例子：

<template>
    <div>
        <input v-model="name" />
        <input v-model="info.city" />
    </div>
</template>

<script>
export default {
    data() {
        return {
            name: "jack",
            info: {
                city: "北京",
            },
        };
    },
    watch: {
        name(oldVal, val) {
            console.log("watch name", oldVal, val); // 值類型，可正常拿到 oldVal 和 val
        },
        info: {
            handler(oldVal, val) {
                console.log("watch info", oldVal, val); // 引用類型琢锋，拿不到 oldVal 辕漂。因?yàn)橹羔樝嗤藭r(shí)已經(jīng)指向了新的 val
            },
            deep: true, // 深度監(jiān)聽(tīng),可以監(jiān)聽(tīng)子屬性
        },
    },
};
</script>

輸入框只有變動(dòng)了就會(huì)觸發(fā)watch監(jiān)聽(tīng)