var vm = new Vue({
        data: { a: 1 },
        computed: {
            // 僅讀取
            aDouble: function () {
            return this.a * 2
            },
            // 讀取和設(shè)置
            aPlus: {
                // 頁面初始化時會先執(zhí)行一次 get 好比與computed的getter屬性
                // 監(jiān)視 data 中 a 的屬性值，只有發(fā)生改變時，它們才會重新求值，否則取緩存中的
            get: function () {      
                console.log('調(diào)用了getter屬性')
                return this.a + 1
            },
            // 監(jiān)視當(dāng)前屬性值的變化，當(dāng)屬性值發(fā)生變化時執(zhí)行，
            // 更新相關(guān)的屬性數(shù)據(jù)，類似于 watch 的功能
            set: function (newValue) {
            console.log('調(diào)用了settter屬性')
            console.log(newValue,'newValue');
                    this.a = newValue - 1
                }
            }
        }
        })
        vm.aPlus   // => 2
        console.log(vm.aPlus,'第一次執(zhí)行的vm.aPlus');
        // DOM 還沒更新
        console.log(vm.a,'第一次vm.a');
        // 當(dāng)監(jiān)聽到值變化時 執(zhí)行set
        vm.aPlus = 4
        console.log(vm.aPlus,'第二次執(zhí)行的vm.aPlus');
        console.log(vm.a,'第二次vm.a');
        // vm.$nextTick方法 將回調(diào)延遲到下次 DOM 更新循環(huán)之后執(zhí)行。
        // 在修改數(shù)據(jù)之后立即使用它，然后等待 DOM 更新。
        // 它跟全局方法 Vue.nextTick 一樣，不同的是回調(diào)的this自動綁定到調(diào)用它的實例上。
        vm.$nextTick(function () {
        // DOM 現(xiàn)在更新了
            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
    }    
}