Vue中computed及watch區(qū)別實(shí)例解析
計(jì)算屬性computed :
1. 支持緩存，只有依賴數(shù)據(jù)發(fā)生改變，才會(huì)重新進(jìn)行計(jì)算
2. 不支持異步，當(dāng)computed內(nèi)有異步操作時(shí)無(wú)效，無(wú)法監(jiān)聽(tīng)數(shù)據(jù)的變化
3.computed 屬性值會(huì)默認(rèn)走緩存，計(jì)算屬性是基于它們的響應(yīng)式依賴進(jìn)行緩存的，也就是基于data中聲明過(guò)或者父組件傳遞的props中的數(shù)據(jù)通過(guò)計(jì)算得到的值
4. 如果一個(gè)屬性是由其他屬性計(jì)算而來(lái)的，這個(gè)屬性依賴其他屬性，是一個(gè)多對(duì)一或者一對(duì)一，一般用computed5.如果computed屬性屬性值是函數(shù)，那么默認(rèn)會(huì)走get方法；函數(shù)的返回值就是屬性的屬性值；在computed中的，屬性都有一個(gè)get和一個(gè)set方法，當(dāng)數(shù)據(jù)變化時(shí)，調(diào)用set方法。
偵聽(tīng)屬性watch：
1. 不支持緩存，數(shù)據(jù)變，直接會(huì)觸發(fā)相應(yīng)的操作；
2.watch支持異步；
3.監(jiān)聽(tīng)的函數(shù)接收兩個(gè)參數(shù)，第一個(gè)參數(shù)是最新的值；第二個(gè)參數(shù)是輸入之前的值；
4. 當(dāng)一個(gè)屬性發(fā)生變化時(shí)，需要執(zhí)行對(duì)應(yīng)的操作；一對(duì)多；
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)不需要這么做。注意：deep無(wú)法監(jiān)聽(tīng)到數(shù)組的變動(dòng)和對(duì)象的新增，參考vue數(shù)組變異,只有以響應(yīng)式的方式觸發(fā)才會(huì)被監(jiān)聽(tīng)到。
監(jiān)聽(tīng)的對(duì)象也可以寫成字符串的形式
當(dāng)需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開(kāi)銷較大的操作時(shí)，這
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue+Bootstrap收藏（點(diǎn)贊）功能邏輯與具體實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了Vue+Bootstrap收藏（點(diǎn)贊）功能邏輯與具體實(shí)現(xiàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
vue+iview 兼容IE11瀏覽器的實(shí)現(xiàn)方法
這篇文章主要介紹了vue+iview 兼容IE11瀏覽器的實(shí)現(xiàn)方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
這篇文章主要介紹了vue?指令與過(guò)濾器，本文通過(guò)案例代碼給大家詳細(xì)講解，給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-11-11
這篇文章主要為大家詳細(xì)介紹了vue+echarts封裝氣泡圖的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要介紹了vue3.0中sass全局的使用過(guò)程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了淺談Vue 函數(shù)式組件的使用技巧，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
使用vue-resource進(jìn)行數(shù)據(jù)交互的實(shí)例
下面小編就為大家?guī)?lái)一篇使用vue-resource進(jìn)行數(shù)據(jù)交互的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
Vue的雙向數(shù)據(jù)綁定實(shí)現(xiàn)原理解析
這篇文章主要介紹了Vue的雙向數(shù)據(jù)綁定實(shí)現(xiàn)原理解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02
解決vue的過(guò)渡動(dòng)畫(huà)無(wú)法正常實(shí)現(xiàn)問(wèn)題
今天小編就為大家分享一篇解決vue的過(guò)渡動(dòng)畫(huà)無(wú)法正常實(shí)現(xiàn)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
自定義指令是?Vue.js?中一個(gè)強(qiáng)大的特性,它允許您擴(kuò)展?Vue?的模板語(yǔ)法,本文將詳細(xì)介紹?Vue?3?中的自定義指令,包括如何創(chuàng)建它們以及如何將它們應(yīng)用于您的應(yīng)用程序,需要的可以參考下2023-11-11