[Vue] distinguish (computed, watch)

computed usage

• responsive caching
• Each computed property will be cached, as long as the property on which the computed property depends changes, the computed property will be re-executed and the view will be updated
• The properties in the computed method cannot be defined in Date
• .With caching, the page re-rendering value does not change, and the calculated property will immediately return the previous calculation result without having to execute the function again

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 usage

• This method is most useful when you need to perform asynchronous or expensive operations when data changes
• Application: monitor props, $emit or the value of this component to perform asynchronous operations
• No caching, the value will not change when the page is re-rendered, and it will be executed

watch: {
    
    
	被监听的数据: {
    
    
		handler(新值, 旧值) {
    
    
			相关代码逻辑...
		}
	}
}

• The monitored data: the data defined in data
• New value: the new value after the data is changed;
• Old Value: The value before the data was changed.

common application

• Monitor the calculation and monitoring of this component
• Calculate or monitor the props value passed from parent to child
• Divided into simple data type and complex data type monitoring, the monitoring method is as the use of watch above
• Monitor changes in the state or getters value of vuex

computed:{
    
    
    stateDemo(){
    
    
        return this.$store.state.demoState;
    }
}
watch:{
    
    
    stateDemo(){
    
    
        console.log('vuex变化啦')
    }
}

common mistakes

• When modifying the value passed from the parent component, an error will be reported

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

• Report an error, the error is to avoid directly modifying the value passed in by the parent component, because it will change the value of the parent component

Solution 1, if the passed type is a simple type, redefine a variable in data and change the pointer, the complex type does not work, the complex type stores pointers

//不会有任何报错,也不会影响父组件!
	props:['listShop'],
    data(){
    
    
      return{
    
    
        listShopChild:this.listShop //改变指向
      }
    },
    created(){
    
    
      this.listShopChild=30
    }

• But if it is a complex type, because it stores pointers, assigning to a new variable will also change the value of the original variable
• method:
• 1. Manual deep cloning
• 2. Object.assign will only copy the first-level attributes, which is one layer deeper than the shallow copy, so it still cannot achieve the purpose of deep cloning.
• 3, Powerful JSON.stringify and JSON.parse
• 4. Change directly with 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
   }
}