Vue?computed與watch怎么使用

這篇文章主要講解了“Vue computed與watch怎么使用”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“Vue computed與watch怎么使用”吧！

computed用法

• 響應式緩存

• 每一個計算屬性都會被緩存起來，只要計算屬性所依賴的屬性發生變化，計算屬性就會重新執行，視圖也會更新

• computed方法里面的屬性不能在Date中定義

• .具有緩存性，頁面重新渲染值不變化,，計算屬性會立即返回之前的計算結果，而不必再次執行函數

data: {
    firstName: 'one',
    lastName: 'two'
  },
//計算方法
computed: {
allname:{
	//回調函數 當需要讀取當前屬性值是執行，根據相關數據計算并返回當前屬性的值
	get() {//
		return this.firstName + ' ' + this.lastName
	},
	//監視當前屬性值的變化，當屬性值發生變化時執行，更新相關的屬性數據
	set(val){
		const names = val.split(' ');
		this.firstName = names[0];
        this.lastName = names[1];
	}
}
},

watch用法

• 需要在數據變化時執行異步或開銷較大的操作時，這個方式是最有用的

• 應用：監聽props，$emit或本組件的值執行異步操作

• 無緩存性，頁面重新渲染時值不變化也會執行

watch: {
    被監聽的數據: {
        handler(新值, 舊值) {
            相關代碼邏輯...
        }
    }
}

• 被監聽的數據：data中定義的數據

• 新值：該數據改變后的新值；

• 舊值：該數據改變之前的值。

常見應用

• 監聽本組件計算和監聽

• 計算或監聽父傳子的props值

• 分為簡單數據類型和復雜數據類型監聽,監聽方法如上watch的使用

• 監聽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改變

//數組深度克隆:
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}
//函數深度克隆
//為什么函數可以直接賦值克隆?
//由于函數對象克隆之后的對象會單獨復制一次并存儲實際數據，因此并不會影響克隆之前的對象。所以采用簡單的復制“=”即可完成克隆。
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
   }
}

感謝各位的閱讀，以上就是“Vue computed與watch怎么使用”的內容了，經過本文的學習后，相信大家對Vue computed與watch怎么使用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！