vue Watch和Computed的使用总结

export default {
    data() {
        return {
            number: 1
        }
    },
    watch:{
        // 普通监听方法，这里表示监听data中的 number属性
        // 第一个参数表示改变后的新值，第二个参数表示改变前的旧值
        number(newVal,oldVal){
            console.log(newVal);
            console.log(oldVal);
        }
    }
}

export default {
    data(){
        return {
            number: 1
        }
    },
    watch: {
        // 监听 number属性
        number: {
			handler(newVal, oldVal){
                
            },
            immediate: true, // 立即监听
        }
    }
}

export default {
    data() {
        return {
            obj: {
                a: 1
            }
        }
    },
    watch: {
        obj: {
            handler(newVal){
                console.log('监听到了', newVal)
            },
            immediate: true
        }
    },
    created(){
        // 无法监听到，因为是对属性进行的修改操作
        // 打印一次，且打印结果为修改后的值，
        this.obj.a = 2 

        // 可以监听到，因为是直接对 对象进行的 赋值操作
        // 打印两次（immediate立即监听会打印一次，修改时打印一次）
        this.obj = { a: 2} 
    }
}

export default {
    watch: {
        'obj.a': {
            handler(newVal){
                console.log(newVal)
            }
        }
    },
    created(){
        // 以下两个都可以监听到 打印两次
        this.obj.a = 2
        this.obj = { a:2 }
    }
}

export default {
    watch: {
        obj: {
            handler(newVal){
            	console.log(newVal)
            },
            deep: true,
            immediate: true
        }
    },
    created(){
        // 进行深度监听后，直接修改属性的变化也可以监听到
        // 打印两次(因为immediate)
        this.obj.a = 2
        
        // 无法监听到 对象属性的增加
        // 打印一次，且打印结果为添加了新增属性的对象
        // 即，它只会 因immediate而执行一次 ，且打印输出 {a:1,b:2}
        this.obj.b = 2
        
        // 可以触发监听，但无法监听到变化
        // 打印两次，两次值都是{a:2}，不能体现变化
        this.$set(this.obj, 'a', 2)
    }
}

export default {
    data() {
        return {
            arr: [1]
        }
    },
    watch: {
        arr: {
            handler(newVal, oldVal) {
                console.log('新：', newVal)
                console.log('旧：', oldVal)
            },
            immediate: true
        }
    },
    created() {
        // 可以监听到---直接整个数组赋值
        this.arr = [2]
        
        // 无法监听到---索引赋值、长度修改
        this.arr[1] = 2
        this.arr[0] = 2
        this.arr.length = 2
        
        // 可以触发监听，但无法监听到变化 => 即新、旧值都是一样的
        this.arr.push(2)
        this.$set(this.arr, 0, 2)
    }
}

computed: {
  fullName: {
    get () {
      return `${this.firstName} ${this.lastName}`;
    },
    set (val) {
      const names = val.split(' ');
      this.firstName = names[0];
      this.lastName = names[names.length - 1];
    }
  }
}