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

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

局部 Vue.filters:{}

面試題:
Vue實例方法:

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

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

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

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

組件:頁面上的任何一個部分都是組件
簡單:html css js等進行封裝好的一個功能 便于二次的維護和復用

模塊:大的功能 每個模塊內部都會引入N個組件 模塊包裹組件
組件的創建
全局組件:
Vue.component()
參數1:組件名稱 組件名稱建議都用大寫 為了區分組件標簽與html標簽
參數2:組件的配置項->對象
組件里面的配置項跟vm的配置項一模一樣
但是有兩個點不一樣:
1.多了一個template屬性
2.data不再是一個對象,而是一個函數
template:當前組件的結構
局部組件:
components:{}

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

轉載于:https://www.cnblogs.com/M29006/p/10902374.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。