export default {
    data() {
        return {
            number: 1
        }
    },
    watch:{
        // 普通監(jiān)聽方法，這里表示監(jiān)聽data中的 number屬性
        // 第一個(gè)參數(shù)表示改變后的新值，第二個(gè)參數(shù)表示改變前的舊值
        number(newVal,oldVal){
            console.log(newVal);
            console.log(oldVal);
        }
    }
}

export default {
    data(){
        return {
            number: 1
        }
    },
    watch: {
        // 監(jiān)聽 number屬性
        number: {
			handler(newVal, oldVal){
                
            },
            immediate: true, // 立即監(jiān)聽
        }
    }
}

export default {
    data() {
        return {
            obj: {
                a: 1
            }
        }
    },
    watch: {
        obj: {
            handler(newVal){
                console.log('監(jiān)聽到了', newVal)
            },
            immediate: true
        }
    },
    created(){
        // 無(wú)法監(jiān)聽到，因?yàn)槭菍?duì)屬性進(jìn)行的修改操作
        // 打印一次，且打印結(jié)果為修改后的值，
        this.obj.a = 2 

        // 可以監(jiān)聽到，因?yàn)槭侵苯訉?duì) 對(duì)象進(jìn)行的 賦值操作
        // 打印兩次（immediate立即監(jiān)聽會(huì)打印一次，修改時(shí)打印一次）
        this.obj = { a: 2} 
    }
}

export default {
    watch: {
        'obj.a': {
            handler(newVal){
                console.log(newVal)
            }
        }
    },
    created(){
        // 以下兩個(gè)都可以監(jiān)聽到 打印兩次
        this.obj.a = 2
        this.obj = { a:2 }
    }
}

export default {
    watch: {
        obj: {
            handler(newVal){
            	console.log(newVal)
            },
            deep: true,
            immediate: true
        }
    },
    created(){
        // 進(jìn)行深度監(jiān)聽后，直接修改屬性的變化也可以監(jiān)聽到
        // 打印兩次(因?yàn)閕mmediate)
        this.obj.a = 2
        
        // 無(wú)法監(jiān)聽到 對(duì)象屬性的增加
        // 打印一次，且打印結(jié)果為添加了新增屬性的對(duì)象
        // 即，它只會(huì) 因immediate而執(zhí)行一次 ，且打印輸出 {a:1,b:2}
        this.obj.b = 2
        
        // 可以觸發(fā)監(jiān)聽，但無(wú)法監(jiān)聽到變化
        // 打印兩次，兩次值都是{a:2}，不能體現(xiàn)變化
        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() {
        // 可以監(jiān)聽到---直接整個(gè)數(shù)組賦值
        this.arr = [2]
        
        // 無(wú)法監(jiān)聽到---索引賦值、長(zhǎng)度修改
        this.arr[1] = 2
        this.arr[0] = 2
        this.arr.length = 2
        
        // 可以觸發(fā)監(jiān)聽，但無(wú)法監(jiān)聽到變化 => 即新、舊值都是一樣的
        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];
    }
  }
}