Vue中computed和watch的使用总结

#Vue中computed和watch的使用总结

• computed
  计算属性 有缓存作用，简化tempalte里面{{}}的计算, 只要没有变化就不会再次执行, 大多数情况下更适用

	  <div> message: "{{ reversedMessage }}"</div>
	 data() {
		message: 'Hello' 
	 },
	 computed: {  
	    //第一种
		reversedMessage: function () { 默认 getter
		  return this.message.split('').reverse().join('')
		},
		//第二种
		reversedMessage: {
			//getter
			get:function(){
			  return this.message.split('').reverse().join('')
			}
			//setter
			set:function(newVal){
				this.message = newVal + 'world'
			}
		}
	 }

• watch
  侦听器 适用于监听props，$emit或本组件的值 执行异步操作
  监听简单的数据

 <div> name: "{{ message }}"</div>
          props: {
		    name: {
		      type: String,
		      default: ''
		    }
          },
		 data() {
			 titleName: this.name   // 重新接收赋值数据
		 },
		 computed: {  
			message : function () {		
				 1. 情况一：
				  return this.name //  直接监听props里的names数据
                 2. 情况二：
                  return this.titleName // 监听titleName数据的变化
			}
		 },
		 watch: {  //在组件中获取父组件传过来的值
		     name(newVal, oldVal) { // watch监听props里name的变化，然后执行操作
                 console.log(newVal)
                 this.titleName = newVal
             }
		 }

监听复杂的数据
可以使用深度监听deep,但性能开销有点大，可以用另外方法

. 直接监听单个属性

  data(){
      return{
         user:{
           name:'',
           age: 0
         }
       }
   },
   方法一：
   watch:{
      'user.name':function(newVal,oldVal){
        console.log(newVal);
      }
    },
   方法二：
    computed:{
      nameChange(){ // 作为中间桥梁作用
        return this.user.name
      }
    },
    watch:{
      nameChange(newVal, oldVal){
        console.log(newVal)
      }
    },

重点：
为了避免直接修改父组件传入的值
简单的数据可以用一个data变量来接收
而对于复杂的数据可以深拷贝一份数据出来

 1.数组深拷贝可以用 for循环
 2.对象用for.. in..
 3.函数直接赋值 = 
 具体用法看前面分享的  [js常用循环遍历方法总结篇](https://blog.csdn.net/qq_46346301/article/details/105682635)

 JSON.parse(JSON.stringify(obj/array)) 深拷贝 可以在父组件向子组件传值时使用

 比较两个对象是否相等可以用 
 let obj1 = JSON.stringify(obj1)
 let obj2 = JSON.stringify(obj2)

仅供参考， 未完待续。。。