Vue中computed(計(jì)算屬性)和watch(監(jiān)聽屬性)的用法及區(qū)別說明
計(jì)算屬性computed
支持緩存，只有依賴數(shù)據(jù)發(fā)生改變，才會(huì)重新進(jìn)行計(jì)算
不支持異步，當(dāng)computed內(nèi)有異步操作時(shí)無效，無法監(jiān)聽數(shù)據(jù)的變化
computed 屬性值會(huì)默認(rèn)走緩存，計(jì)算屬性是基于它們的響應(yīng)式依賴進(jìn)行緩存的，也就是基于data中聲明過或者父組件傳遞的props中的數(shù)據(jù)通過計(jì)算得到的值
如果一個(gè)屬性是由其他屬性計(jì)算而來的，這個(gè)屬性依賴其他屬性，是一個(gè)多對一或者一對一，一般用computed
如果computed屬性屬性值是函數(shù)，那么默認(rèn)會(huì)走get方法；函數(shù)的返回值就是屬性的屬性值；在computed中的，屬性都有一個(gè)get和一個(gè)set方法，當(dāng)數(shù)據(jù)變化時(shí)，調(diào)用set方法。
偵聽屬性watch
不支持緩存，數(shù)據(jù)變，直接會(huì)觸發(fā)相應(yīng)的操作；
watch支持異步；
監(jiān)聽的函數(shù)接收兩個(gè)參數(shù)，第一個(gè)參數(shù)是最新的值；第二個(gè)參數(shù)是輸入之前的值；
當(dāng)一個(gè)屬性發(fā)生變化時(shí)，需要執(zhí)行對應(yīng)的操作；一對多；
監(jiān)聽數(shù)據(jù)必須是data中聲明過或者父組件傳遞過來的props中的數(shù)據(jù)，當(dāng)數(shù)據(jù)變化時(shí)，觸發(fā)其他操作，函數(shù)有兩個(gè)參數(shù)，
immediate：組件加載立即觸發(fā)回調(diào)函數(shù)執(zhí)行deep: 深度監(jiān)聽，為了發(fā)現(xiàn)對象內(nèi)部值的變化，復(fù)雜類型的數(shù)據(jù)時(shí)使用，例如數(shù)組中的對象內(nèi)容的改變，注意監(jiān)聽數(shù)組的變動(dòng)不需要這么做。注意：deep無法監(jiān)聽到數(shù)組的變動(dòng)和對象的新增，參考vue數(shù)組變異,只有以響應(yīng)式的方式觸發(fā)才會(huì)被監(jiān)聽到。
監(jiān)聽的對象也可以寫成字符串的形式
當(dāng)需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開銷較大的操作時(shí)，這個(gè)方式是最有用的。這是和computed最大的區(qū)別。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
基于Vue-Cli 打包自動(dòng)生成/抽離相關(guān)配置文件的實(shí)現(xiàn)方法
基于Vue-cli 項(xiàng)目產(chǎn)品部署，涉及到的交互的地址等配置信息，每次都要重新打包才能生效，極大的降低了效率。這篇文章主要介紹了基于Vue-Cli 打包自動(dòng)生成/抽離相關(guān)配置文件 ,需要的朋友可以參考下2018-12-12
這篇文章主要介紹了vue中appear的用法,需要的朋友可以參考下2017-08-08
最近工作中遇到一個(gè)需求，是要做一個(gè)頁面放張大表格用來顯示數(shù)據(jù)項(xiàng)，純粹為了view層操作方便，就用了vue做渲染。然而又被提出了一個(gè)需求，需要相鄰的相同值的行數(shù)據(jù)項(xiàng)進(jìn)行單元格合并，這就醉了。沒辦法，只能想辦法解決，下面通過這篇文章來一起看看吧。2016-11-11
這篇文章主要為大家介紹了vue組件生命周期鉤子使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步早日升職加薪2022-04-04
Vue進(jìn)行數(shù)據(jù)可視化圖表展示的實(shí)現(xiàn)示例
數(shù)據(jù)可視化是現(xiàn)代化的數(shù)據(jù)分析和展示方式,可以使數(shù)據(jù)更加直觀、易于理解和傳達(dá),Vue作為一款流行的前端框架,提供了豐富的插件和工具來實(shí)現(xiàn)數(shù)據(jù)可視化圖表展示,本文將介紹如何使用Vue和Echarts/D3.js來實(shí)現(xiàn)數(shù)據(jù)可視化圖表展示,并提供示例代碼和實(shí)際應(yīng)用場景2023-10-10
vue?element-plus中el-input修改邊框border的方法
element樣式還是蠻好的,只是有時(shí)候我們需要做一些調(diào)整,比如el-input的邊框,下面這篇文章主要給大家介紹了關(guān)于vue?element-plus中el-input修改邊框border的相關(guān)資料,需要的朋友可以參考下2022-09-09
v-show 指令通過改變元素的 css 屬性（display）來決定元素是顯示還是隱藏。這篇文章主要介紹了Vue.js 中的 v-show 指令及用法詳解,需要的朋友可以參考下2018-11-11
vue開發(fā)table數(shù)據(jù)合并實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了vue開發(fā)table數(shù)據(jù)合并實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vue項(xiàng)目中運(yùn)用webpack動(dòng)態(tài)配置打包多種環(huán)境域名的方法
本人分享一個(gè)vue項(xiàng)目里，根據(jù)命令行輸入不同的命令，打包出不同環(huán)境域名的方法。需要的朋友跟隨小編一起看看吧2019-06-06
對axios進(jìn)行封裝以及將API接口按業(yè)務(wù)模塊統(tǒng)一管理，有助于我們簡化代碼，方便后期維護(hù)。本文介紹了如何用vue封裝axios請求，感興趣的同學(xué)，可以參考下。2021-06-06