Vue Computed中get和set的用法及Computed与watch的区别

        var vm = new Vue({
        data: { a: 1 },
        computed: {
            // 仅读取
            aDouble: function () {
            return this.a * 2
            },
            // 读取和设置
            aPlus: {
                // 页面初始化时会先执行一次 get 好比与computed的getter属性
                // 监视 data 中 a 的属性值，只有发生改变时，它们才会重新求值，否则取缓存中的
            get: function () {      
                console.log('调用了getter属性')
                return this.a + 1
            },
            // 监视当前属性值的变化，当属性值发生变化时执行，
            // 更新相关的属性数据，类似于 watch 的功能
            set: function (newValue) {
            console.log('调用了settter属性')
            console.log(newValue,'newValue');
                    this.a = newValue - 1
                }
            }
        }
        })
        vm.aPlus   // => 2
        console.log(vm.aPlus,'第一次执行的vm.aPlus');
        // DOM 还没更新
        console.log(vm.a,'第一次vm.a');
        // 当监听到值变化时 执行set
        vm.aPlus = 4
        console.log(vm.aPlus,'第二次执行的vm.aPlus');
        console.log(vm.a,'第二次vm.a');
        // vm.$nextTick方法 将回调延迟到下次 DOM 更新循环之后执行。
        // 在修改数据之后立即使用它，然后等待 DOM 更新。
        // 它跟全局方法 Vue.nextTick 一样，不同的是回调的this自动绑定到调用它的实例上。
        vm.$nextTick(function () {
        // DOM 现在更新了
            console.log(vm.a,'this.vm.a');
        })
        // 更新后data中a为3
        vm.aDouble // => 6
        console.log(vm.a,'vm.aDouble中的a',vm.aDouble,'vm.aDouble');

watch: {
    data(val, value) {
        console.log(val)
        console.log(value)
    }
}

data（） {
    return {
        list: {
            'id': 1,
            'type': 0
        },
        number: 0
    }
},
watch: {
    list: {
        handler(newVal) {
            this.number++
        },
        deep: true
    }
}

watch: {
    data： 'change' // 值可以为methods的方法名
}，
methods: {
    change(curVal,oldVal){
　　　console.log(curVal,oldVal)
　 }
}

data（） {
    return {
        list: {
            'id': 1,
            'type': 0
        },
        number: 0
    }
}，
watch: {
    list: {
        handler(newVal) {
            this.number++
        },
        immediate: true
    }
}

data（） {
    return {
        list: {
            'id': 1,
            'type': 0
        },
        number: 0
    }
}，
watch: {
    list: {
        handler(newVal) {
            this.number++
        },
        deep: true
    }    
}

data（） {
    return {
        list: {
            'id': 1,
            'type': 0
        }
    }
}，
watch: {
    'list.id': {
        handler(newVal, oldVal) {
             ......
        },
    deep: true
    }    
}