var vm = new Vue({
? data: {
? ? a: 1,
? ? b: 2,
? ? c: 3,
? ? d: 4,
? ? e: {
? ? ? f: {
? ? ? ? g: 5
? ? ? }
? ? }
? },
? watch: {
? ? a: function (val, oldVal) {
? ? ? console.log('new: %s, old: %s', val, oldVal)
? ? },
? ? // 方法名
? ? b: 'someMethod',
? ? // 該回調(diào)會在任何被偵聽的對象的 property 改變時被調(diào)用，不論其被嵌套多深
? ? c: {
? ? ? handler: function (val, oldVal) { /* ... */ },
? ? ? deep: true
? ? },
? ? // 該回調(diào)將會在偵聽開始之后被立即調(diào)用
? ? d: {
? ? ? handler: 'someMethod',
? ? ? immediate: true
? ? },
? ? // 你可以傳入回調(diào)數(shù)組，它們會被逐一調(diào)用
? ? e: [
? ? ? 'handle1',
? ? ? function handle2 (val, oldVal) { /* ... */ },
? ? ? {
? ? ? ? handler: function handle3 (val, oldVal) { /* ... */ },
? ? ? ? /* ... */
? ? ? }
? ? ],
? ? // watch vm.e.f's value: {g: 5}
? ? 'e.f': function (val, oldVal) { /* ... */ }
? }
})
vm.a = 2 // => new: 2, old: 1

props: {
? province: String, // 省
? city: String, // 市
? area: String // 區(qū)
},
computed: {
? address(){
? ? return `${this.province}${this.city}${this.area}`
? }
}

watch: {
? ?msg(newV,oldV) {
? ? ?// do something
? ? ?console.log(newV,oldV)
? ?}?
}

? props:{
? ? config:Object
? },
? computed: {
? ? ? isShow() {?
? ? ? ? ? return this.config.role.isShow
? ? ? }
? },
? watch: {
? ? ? isShow(newV,oldV) {
? ? ? ? ? // do something
? ? ? ? ? console.log(newV,oldV)
? ? ? }
? }

?props:{
? ? config:Object
? },
? watch: {
? ? isShow:{ //深度監(jiān)聽，可監(jiān)聽到對象、數(shù)組的變化
? ? ? ? handler (newV, oldV) {
? ? ? ? ? // do something, 可使用this
? ? ? ? ? console.log(newV,oldV)
? ? ? ? },
? ? ? ? deep:true
? ? ? ?}
? },

props:{
? ? option:Object
? },
? watch:{
? ? 'option.text'(newVal,oldVal){
? ? ? ? ? console.log(newVal,oldVal);
? ? }
}