computed:計(jì)算屬性 通過屬性計(jì)算得來的屬性
1.computed里面的函數(shù)建議由返回值,不建議去修改data中的屬性
2.在使用computed中的方法時(shí),是不需要加()
3.computed是基于vue的依賴 當(dāng)computed所依賴的屬性發(fā)生改變的時(shí)候就會(huì)觸發(fā)相對(duì)應(yīng)的方法
4.當(dāng)computed中的函數(shù)執(zhí)行完畢后會(huì)進(jìn)行緩存,當(dāng)下次所依賴的屬性沒有發(fā)生變化的時(shí)候會(huì)從緩存中讀取結(jié)果
特點(diǎn):
一個(gè)屬性受多個(gè)屬性的影響(應(yīng)用:購(gòu)物車的結(jié)算,商品篩選...)

過濾器:用來過濾數(shù)據(jù)的一個(gè)接口
全局 Vue.filter()
參數(shù)1:過濾器的名稱
參數(shù)2:過濾器實(shí)現(xiàn)的方法
如何使用過濾器
通過管道符進(jìn)行使用 管道符左邊的是渲染的數(shù)據(jù) 右邊是過濾器的名稱

局部 Vue.filters:{}

面試題:
Vue實(shí)例方法:

$on:綁定事件
參數(shù)1:事件名稱
參數(shù)2:綁定的事件函數(shù)
$emit:觸發(fā)事件
參數(shù)1:事件名稱
參數(shù)2:需要傳遞給事件函數(shù)的參數(shù)
$off:解綁事件
參數(shù)1:事件名稱 如果只寫一次參數(shù)的話會(huì)解綁所有的事件
參數(shù)2:需要解綁的事件函數(shù)
$once:綁定一次事件

vm身上的屬性:(未完)
在vm的外部訪問data中的屬性

watch:屬性的監(jiān)聽
特點(diǎn):一個(gè)屬性影響多個(gè)屬性(應(yīng)用:模糊查詢,網(wǎng)頁(yè)的自適應(yīng))
1.watch中的函數(shù)名稱必須是data中的屬性
2.watch中的函數(shù)會(huì)接收兩個(gè)值 一個(gè)是新值一個(gè)是舊值
3.watch中的函數(shù)是不需要調(diào)用的,當(dāng)所依賴的屬性發(fā)生了改變,那么就會(huì)調(diào)用相關(guān)的函數(shù)
4.在watch的屬性監(jiān)聽當(dāng)中盡量不要去修改data中的屬性
5.watch監(jiān)聽屬性的時(shí)候只會(huì)監(jiān)聽對(duì)象的引用是否會(huì)發(fā)生改變,而具體的屬性值發(fā)生改變是不會(huì)進(jìn)行監(jiān)聽的
6.watch做屬性監(jiān)聽的時(shí)候如果屬性是一個(gè)對(duì)象,那么需要做深度監(jiān)聽,利用handler與deep進(jìn)行深度監(jiān)聽(深度監(jiān)聽非常耗費(fèi)性能)
7.watch初始化的時(shí)候是不會(huì)執(zhí)行的,如果設(shè)置了immediate:true 則初始化的時(shí)候會(huì)執(zhí)行一次
8.watch不會(huì)對(duì)數(shù)組的修改(特殊情況)進(jìn)行監(jiān)聽
解決數(shù)組特殊監(jiān)聽問題:
1.$set()
$set:給一個(gè)響應(yīng)式對(duì)象添加一個(gè)屬性,并且這個(gè)屬性也是響應(yīng)式的
對(duì)象:this.set(target,key,val)
數(shù)組:this.set(target,index,val)
能用computed解決的問題不要用watch,watch消耗的性能高

$mount() 掛載 外部掛載
$destroy() 卸載 外部卸載
$forceUpdate() 強(qiáng)制更新

組件:頁(yè)面上的任何一個(gè)部分都是組件
簡(jiǎn)單:html css js等進(jìn)行封裝好的一個(gè)功能 便于二次的維護(hù)和復(fù)用

模塊:大的功能 每個(gè)模塊內(nèi)部都會(huì)引入N個(gè)組件 模塊包裹組件
組件的創(chuàng)建
全局組件:
Vue.component()
參數(shù)1:組件名稱 組件名稱建議都用大寫 為了區(qū)分組件標(biāo)簽與html標(biāo)簽
參數(shù)2:組件的配置項(xiàng)->對(duì)象
組件里面的配置項(xiàng)跟vm的配置項(xiàng)一模一樣
但是有兩個(gè)點(diǎn)不一樣:
1.多了一個(gè)template屬性
2.data不再是一個(gè)對(duì)象,而是一個(gè)函數(shù)
template:當(dāng)前組件的結(jié)構(gòu)
局部組件:
components:{}

腳手架的使用:
1.全局安裝腳手架
cnpm install @vue/cli -g
2.用腳手架構(gòu)建項(xiàng)目
vue create 項(xiàng)目名稱
3..vue文件
template 寫組件的結(jié)構(gòu) html
script 寫組件的邏輯 js
style 寫組件的樣式 css
一個(gè).vue文件相當(dāng)于一個(gè)組件
render:渲染組件(虛擬DOM)

轉(zhuǎn)載于:https://www.cnblogs.com/M29006/p/10902374.html

總結(jié)

以上是生活随笔為你收集整理的vue(2)---computed,watch--2019.5.21学习笔记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。