【Vue】区分（computed,watch）

computed计算属性使用

• computed是个对象，可以写多个计算属性
• 每个计算属性都是函数
• 在数据不发生变化时，计算属性时不需要重新计算的
• 响应式缓存
• 每一个计算属性都会基于他们的依赖关系进行缓存，只要计算属性所依赖的属性发生变化，计算属性就会重新执行，视图也会更新
• computed方法里面的属性不能在Date中定义
• .具有缓存性，页面重新渲染值不变化,，计算属性会立即返回之前的计算结果，而不必再次执行函数

computed: {
  nummber: () => {
    return 1+2
  },
  allprice: () => {
	return '1'+'2'
  },
  // 语法糖写法
  allnumber(){
   return 1+2
  }
},

针对复杂data数据处理

• 一些数据想经过计算后使用
• 对于任何响应式数据的复杂数据，都应该使用计算属性
• 计算属性将被混入到组件实例中
• 所有getter和setter的this上下文自动的绑定为组件实例

computed用法

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或本组件的值执行异步操作
• 无缓存性，页面重新渲染时值不变化也会执行
• 监听对象：
• deep：其值是true或false；确认是否深入监听。（一般监听时是不能监听到对象属性值的变化的，数组的值变化可以听到。）
• immediate：其值是true或false；确认是否以当前的初始值执行handler的函数。
• handler是固定写法，不能用其他的。

watch: {
 	//普通监听
    stateDemo(){
        console.log('vuex变化啦')
    },
    //对象监听
	被监听的数据: {
		 handler(newval,oldval) {
		   // 1.如果拿到的是代理对象，两者新旧值一致
		   console.log(newval===oldval);
		 },
		deep:true,
		immediate:true,
	},
	inf1o: {
		 handler:(newval,oldval)=> {
		   // 1.如果拿到的是代理对象，两者新旧值一致
		   console.log(newval===oldval);
		 },
		deep:true,
		immediate:true,
	},
	"inf1o.message": (newval, oldval) => {
	  	//这样监听到的新旧值不一致
    	 console.log(newval,oldval);
    },
}

• 被监听的数据：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
   }
}

使用侦听器watch的Api，this.$watch来侦听

• 第一个参数是侦听的值
• 第二个参数是侦听的回调函数callback
• 第三个参数是额外的其他选项，比如deep，immediate

  created() {
    this.$watch("info", (newval,oldval) => {
      console.log(newval,oldval)
    }, { deep: true });
  },