快捷導(dǎo)航

vue中watch和computed的區(qū)別詳解

更新時(shí)間：2023年11月21日 10:30:51 作者：前端開發(fā)小司機(jī)

這篇文章主要給大家介紹了關(guān)于vue中watch和computed區(qū)別的相關(guān)資料,computed和watch都是vue框架中的用于監(jiān)聽數(shù)據(jù)變化的屬性,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

功能上：computed是計(jì)算屬性，watch是監(jiān)聽一個(gè)值的變化，然后執(zhí)行對(duì)應(yīng)的回調(diào)。
是否調(diào)用緩存：computed中的函數(shù)所依賴的屬性沒有發(fā)生變化，那么調(diào)用當(dāng)前的函數(shù)的時(shí)候會(huì)從緩存中讀取，而watch在每次監(jiān)聽的值發(fā)生變化的時(shí)候都會(huì)執(zhí)行回調(diào)。
是否調(diào)用return：computed中的函數(shù)必須要用return返回，watch中的函數(shù)不是必須要用return。
computed默認(rèn)第一次加載的時(shí)候就開始監(jiān)聽；watch默認(rèn)第一次加載不做監(jiān)聽，如果需要第一次加載做監(jiān)聽，添加immediate屬性，設(shè)置為true（immediate:true）
使用場(chǎng)景：computed----當(dāng)一個(gè)屬性受多個(gè)屬性影響的時(shí)候，使用computed-----購(gòu)物車商品結(jié)算。watch–當(dāng)一條數(shù)據(jù)影響多條數(shù)據(jù)的時(shí)候，使用watch-----搜索框.

watch的實(shí)現(xiàn)

<body>
    <div id="app">
        姓： <input type="text" v-model=firstName> 名：
        <input type="text" v-model=lastName> 姓名：
        <span>{{fullname}}</span>
    </div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            firstName: 'z',
            lastName: 's',
            fullname: 'zs'
        },
        watch: {
            firstName(newval) {
?
                this.fullname = newval + this.lastName
            },
            lastName(newval) {
                this.fullname = this.firstName + newval
            }
?
        }
    })
?
</script>

computed的實(shí)現(xiàn)

<body>
    <div id="app">
        姓： <input type="text" v-model=firstName> 名：
        <input type="text" v-model=lastName> 姓名：
        <span>{{fullname}}</span>
    </div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            firstName: 'z',
            lastName: 's'
        },
        computed: {
            fullname() {
                return this.firstName + this.lastName
            }
        }
    })
?
</script>

watch與computed區(qū)別總結(jié)

computed支持緩存，相依賴的數(shù)據(jù)發(fā)生改變才會(huì)重新計(jì)算；watch不支持緩存，只要監(jiān)聽的數(shù)據(jù)變化就會(huì)觸發(fā)相應(yīng)操作

computed不支持異步，當(dāng)computed內(nèi)有異步操作時(shí)是無法監(jiān)聽數(shù)據(jù)變化的；watch支持異步操作

computed屬性的屬性值是一函數(shù)，函數(shù)返回值為屬性的屬性值，computed中每個(gè)屬性都可以設(shè)置set與get方法。watch監(jiān)聽的數(shù)據(jù)必須是data中聲明過或父組件傳遞過來的props中的數(shù)據(jù)，當(dāng)數(shù)據(jù)變化時(shí)，觸發(fā)監(jiān)聽器