Vue computed與watch用法區(qū)分
computed用法
- 響應式緩存
- 每一個計算屬性都會被緩存起來,只要計算屬性所依賴的屬性發(fā)生變化,計算屬性就會重新執(zhí)行,視圖也會更新
- computed方法里面的屬性不能在Date中定義
- .具有緩存性,頁面重新渲染值不變化,,計算屬性會立即返回之前的計算結(jié)果,而不必再次執(zhí)行函數(shù)
data: { firstName: 'one', lastName: 'two' }, //計算方法 computed: { allname:{ //回調(diào)函數(shù) 當需要讀取當前屬性值是執(zhí)行,根據(jù)相關(guān)數(shù)據(jù)計算并返回當前屬性的值 get() {// return this.firstName + ' ' + this.lastName }, //監(jiān)視當前屬性值的變化,當屬性值發(fā)生變化時執(zhí)行,更新相關(guān)的屬性數(shù)據(jù) set(val){ const names = val.split(' '); this.firstName = names[0]; this.lastName = names[1]; } } },
watch用法
- 需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時,這個方式是最有用的
- 應用:監(jiān)聽props,$emit或本組件的值執(zhí)行異步操作
- 無緩存性,頁面重新渲染時值不變化也會執(zhí)行
watch: {
被監(jiān)聽的數(shù)據(jù): {
handler(新值, 舊值) {
相關(guān)代碼邏輯...
}
}
}
- 被監(jiān)聽的數(shù)據(jù):data中定義的數(shù)據(jù)
- 新值:該數(shù)據(jù)改變后的新值;
- 舊值:該數(shù)據(jù)改變之前的值。
常見應用
- 監(jiān)聽本組件計算和監(jiān)聽
- 計算或監(jiān)聽父傳子的props值
- 分為簡單數(shù)據(jù)類型和復雜數(shù)據(jù)類型監(jiān)聽,監(jiān)聽方法如上watch的使用
- 監(jiān)聽vuex的state或者getters值的變化
computed:{ stateDemo(){ return this.$store.state.demoState; } } watch:{ stateDemo(){ console.log('vuex變化啦') } }
常見錯誤
當修改父組件傳過來的值,會報錯
props:['listShop'], data(){ return{} }, created(){ this.listShop=30 }
報錯,錯誤是說的避免直接修改父組件傳入的值,因為會改變父組件的值
解決方法1,如果傳的是簡單類型,就在data中重新定義一個變量,改變指向,復雜類型不行,復雜類型存的是指針
//不會有任何報錯,也不會影響父組件! props:['listShop'], data(){ return{ listShopChild:this.listShop //改變指向 } }, created(){ this.listShopChild=30 }
但如果是復雜類型,因為存的是指針,賦值給新變量也會改變原始變量值
方法:
1.手動深度克隆
2.Object.assign,只會對只是一級屬性復制,比淺拷貝多深拷貝了一層而已,所以還是無法達到深度克隆的目的.
3.強大的JSON.stringify和JSON.parse
4.直接用computed改變
//數(shù)組深度克隆: var x = [1,2,3]; var y = []; for (var i = 0; i < x.length; i++) { y[i]=x[i]; } console.log(y); //[1,2,3] y.push(4); console.log(y); //[1,2,3,4] console.log(x); //[1,2,3] //對象深度克隆: var x = {a:1,b:2}; var y = {}; for(var i in x){ y[i] = x[i]; } console.log(y); //Object {a: 1, b: 2} y.c = 3; console.log(y); //Object {a: 1, b: 2, c: 3} console.log(x); //Object {a: 1, b: 2} //函數(shù)深度克隆 //為什么函數(shù)可以直接賦值克隆? //由于函數(shù)對象克隆之后的對象會單獨復制一次并存儲實際數(shù)據(jù),因此并不會影響克隆之前的對象。所以采用簡單的復制“=”即可完成克隆。 var x = function(){console.log(1);}; var y = x; y = function(){console.log(2);}; x(); //1 y(); //2
//方法三 const obj1 = JSON.parse(JSON.stringify(obj));
//方法四 computed:{ listShopChild(){ return this.listShop } }
到此這篇關(guān)于Vue computed與watch用法區(qū)分的文章就介紹到這了,更多相關(guān)Vue computed與watch內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
element-plus結(jié)合sortablejs實現(xiàn)table行拖拽效果
使用element-plus的el-table組件創(chuàng)建出來的table,結(jié)合sortable.js實現(xiàn)table行拖動排序,文中有詳細的代碼示例供大家參考,具有一定的參考價值,感興趣的同學可以自己動手試一試2023-10-10vue3為什么要用proxy替代defineProperty
這篇文章主要介紹了vue3為什么要用proxy替代defineProperty,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-10-10