一、計(jì)算屬性:computed
vue方便我們對數(shù)據(jù)進(jìn)行計(jì)算或者處理 提供了計(jì)算屬性
作用：
響應(yīng)式計(jì)算數(shù)據(jù) ：基本使用
image.png
二、偵聽器
watch 偵聽器允許開發(fā)者監(jiān)聽數(shù)據(jù)的變化，從而對數(shù)據(jù)的變化做特定的操作
Vue偵聽器提供了兩種語法格式。一種是方法格式的寫法，另一種是對象格式的寫法。
-
方法格式
image.png
缺點(diǎn)：
首次進(jìn)入瀏覽器的時(shí)候，無法立即觸發(fā)一次偵聽器
如果偵聽的是一個(gè)對象，對象里面的數(shù)據(jù)發(fā)生了變化，并不會(huì)出發(fā)
image.png -
對象格式
(推薦使用)普通用法
image.png
image.png
深度監(jiān)聽(deep)
一般用于監(jiān)聽對象， 可以深度監(jiān)聽到對象中的值 默認(rèn)為關(guān)閉false
打開將deep設(shè)置為true
image.png
image.png
自動(dòng)觸發(fā)
image.png
image.png
三、ref 獲取dom
在vue中可以通過ref 來操作dom
image.png
ref是vue里的方法，更加安全，不會(huì)依賴class或者id的樣式變了而影響布局
vue的主要目的是減少dom的操作。減少dom節(jié)點(diǎn)的消耗
實(shí)戰(zhàn)案例：
- 已知 價(jià)格 10/件 數(shù)量0
- 點(diǎn)擊按鈕讓數(shù)量加1
- 計(jì)算出總價(jià) 商品價(jià)格*數(shù)量
-
當(dāng)數(shù)量等于1 就讓總價(jià)的字體變成 粉紅色，當(dāng)數(shù)量等于5 就讓總價(jià)的字體顏色變成紅色
image.png
注：
image.png
這里這個(gè)是變量 通過變量在vue中可以通過ref 來操作dom
渲染效果為：
image.png
