欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue computed與watch用法區(qū)分

 更新時(shí)間:2023年02月01日 16:38:45   作者:博主花神  
watch和computed都是以Vue的依賴追蹤機(jī)制為基礎(chǔ)的,當(dāng)某一個(gè)依賴型數(shù)據(jù)發(fā)生變化的時(shí)候,所有依賴這個(gè)數(shù)據(jù)的相關(guān)數(shù)據(jù)會(huì)自動(dòng)發(fā)生變化,即自動(dòng)調(diào)用相關(guān)的函數(shù),來實(shí)現(xiàn)數(shù)據(jù)的變動(dòng),這篇文章簡單介紹下Vue中computed和watch的區(qū)別異同,感興趣的朋友一起看看吧

computed用法

  • 響應(yīng)式緩存
  • 每一個(gè)計(jì)算屬性都會(huì)被緩存起來,只要計(jì)算屬性所依賴的屬性發(fā)生變化,計(jì)算屬性就會(huì)重新執(zhí)行,視圖也會(huì)更新
  • computed方法里面的屬性不能在Date中定義
  • .具有緩存性,頁面重新渲染值不變化,,計(jì)算屬性會(huì)立即返回之前的計(jì)算結(jié)果,而不必再次執(zhí)行函數(shù)
data: {
    firstName: 'one',
    lastName: 'two'
  },
//計(jì)算方法
computed: {
allname:{
	//回調(diào)函數(shù) 當(dāng)需要讀取當(dāng)前屬性值是執(zhí)行,根據(jù)相關(guān)數(shù)據(jù)計(jì)算并返回當(dāng)前屬性的值
	get() {//
		return this.firstName + ' ' + this.lastName
	},
	//監(jiān)視當(dāng)前屬性值的變化,當(dāng)屬性值發(fā)生變化時(shí)執(zhí)行,更新相關(guān)的屬性數(shù)據(jù)
	set(val){
		const names = val.split(' ');
		this.firstName = names[0];
        this.lastName = names[1];
	}
}
},

watch用法

  • 需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開銷較大的操作時(shí),這個(gè)方式是最有用的
  • 應(yīng)用:監(jiān)聽props,$emit或本組件的值執(zhí)行異步操作
  • 無緩存性,頁面重新渲染時(shí)值不變化也會(huì)執(zhí)行

watch: {
    被監(jiān)聽的數(shù)據(jù): {
        handler(新值, 舊值) {
            相關(guān)代碼邏輯...
        }
    }
}

  • 被監(jiān)聽的數(shù)據(jù):data中定義的數(shù)據(jù)
  • 新值:該數(shù)據(jù)改變后的新值;
  • 舊值:該數(shù)據(jù)改變之前的值。

常見應(yīng)用

  • 監(jiān)聽本組件計(jì)算和監(jiān)聽
  • 計(jì)算或監(jiān)聽父傳子的props值
  • 分為簡單數(shù)據(jù)類型和復(fù)雜數(shù)據(jù)類型監(jiān)聽,監(jiān)聽方法如上watch的使用
  • 監(jiān)聽vuex的state或者getters值的變化
computed:{
    stateDemo(){
        return this.$store.state.demoState;
    }
}
watch:{
    stateDemo(){
        console.log('vuex變化啦')
    }
}

常見錯(cuò)誤

當(dāng)修改父組件傳過來的值,會(huì)報(bào)錯(cuò)

props:['listShop'],
    data(){
      return{}
    },
    created(){
      this.listShop=30
}

報(bào)錯(cuò),錯(cuò)誤是說的避免直接修改父組件傳入的值,因?yàn)闀?huì)改變父組件的值

解決方法1,如果傳的是簡單類型,就在data中重新定義一個(gè)變量,改變指向,復(fù)雜類型不行,復(fù)雜類型存的是指針

//不會(huì)有任何報(bào)錯(cuò),也不會(huì)影響父組件!
	props:['listShop'],
    data(){
      return{
        listShopChild:this.listShop //改變指向
      }
    },
    created(){
      this.listShopChild=30
    }

但如果是復(fù)雜類型,因?yàn)榇娴氖侵羔?,賦值給新變量也會(huì)改變?cè)甲兞恐?/p>

方法:

1.手動(dòng)深度克隆

2.Object.assign,只會(huì)對(duì)只是一級(jí)屬性復(fù)制,比淺拷貝多深拷貝了一層而已,所以還是無法達(dá)到深度克隆的目的.

3.強(qiáng)大的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]
//對(duì)象深度克隆:
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ù)對(duì)象克隆之后的對(duì)象會(huì)單獨(dú)復(fù)制一次并存儲(chǔ)實(shí)際數(shù)據(jù),因此并不會(huì)影響克隆之前的對(duì)象。所以采用簡單的復(fù)制“=”即可完成克隆。
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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vue+Element-ui實(shí)現(xiàn)登錄注冊(cè)表單

    vue+Element-ui實(shí)現(xiàn)登錄注冊(cè)表單

    這篇文章主要為大家詳細(xì)介紹了vue+Element-ui實(shí)現(xiàn)登錄注冊(cè)表單,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-11-11
  • vue實(shí)現(xiàn)滾動(dòng)加載的表格

    vue實(shí)現(xiàn)滾動(dòng)加載的表格

    在系統(tǒng)開發(fā)中遇到了這么一個(gè)問題:后端一次性返回上百條的數(shù)據(jù),我需要把返回的數(shù)據(jù)全部顯示在表格里,而且甲方爸爸明確指定了表格是不允許使用分頁的??墒钱?dāng)使用a-table裝載上百條數(shù)據(jù)時(shí),頁面出現(xiàn)了明顯的卡頓現(xiàn)象。只能使用滾動(dòng)加載的方案來代替了。
    2021-06-06
  • Vue 2源碼解讀$mount函數(shù)原理

    Vue 2源碼解讀$mount函數(shù)原理

    這篇文章主要為大家介紹了Vue 2源碼解讀$mount原理示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-08-08
  • 沒有搭建腳手架時(shí)vue組件的使用方式

    沒有搭建腳手架時(shí)vue組件的使用方式

    這篇文章主要介紹了沒有搭建腳手架時(shí)vue組件的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • 原生echart和vue-echart的使用詳解

    原生echart和vue-echart的使用詳解

    這篇文章主要為大家詳細(xì)介紹了原生echart和vue-echart的使用,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2022-02-02
  • element-plus結(jié)合sortablejs實(shí)現(xiàn)table行拖拽效果

    element-plus結(jié)合sortablejs實(shí)現(xiàn)table行拖拽效果

    使用element-plus的el-table組件創(chuàng)建出來的table,結(jié)合sortable.js實(shí)現(xiàn)table行拖動(dòng)排序,文中有詳細(xì)的代碼示例供大家參考,具有一定的參考價(jià)值,感興趣的同學(xué)可以自己動(dòng)手試一試
    2023-10-10
  • Vue3 Pinia如何修改全局狀態(tài)變量值

    Vue3 Pinia如何修改全局狀態(tài)變量值

    這篇文章主要介紹了Vue3 Pinia如何修改全局狀態(tài)變量值問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-05-05
  • vue2.0的虛擬DOM渲染思路分析

    vue2.0的虛擬DOM渲染思路分析

    vue2.0采用了虛擬DOM來代替對(duì)真實(shí)DOM的操作,最后通過某種機(jī)制來完成對(duì)真實(shí)DOM的更新,渲染視圖。這篇文章主要介紹了vue2.0的虛擬DOM渲染,需要的朋友可以參考下
    2018-08-08
  • vue3為什么要用proxy替代defineProperty

    vue3為什么要用proxy替代defineProperty

    這篇文章主要介紹了vue3為什么要用proxy替代defineProperty,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-10-10
  • vue3父子組件相互調(diào)用方法詳解

    vue3父子組件相互調(diào)用方法詳解

    在vue3項(xiàng)目開發(fā)中,我們常常會(huì)遇到父子組件相互調(diào)用的場(chǎng)景,下面主要以setup語法糖格式詳細(xì)聊聊父子組件那些事兒,并通過代碼示例介紹的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下
    2024-05-05

最新評(píng)論