Vue中methods、computed和watch的理解

1、methods

Vue绑定的数据变化时，会重新渲染页面，每次渲染时，method均会被调用

2、computed

computed具有缓存功能，页面渲染时，如果被依赖的数据没有变化，则使用缓存的值。如果数据有变化，则重新计算获取新的值。因此，如果要渲染的数据由多种数据计算组合而成，优先使用computed，以减少性能开销。
注意：不要在computed中对属性本身赋值，会无限递归导致出错

3、watch

watch可监听Vue所绑定的数据的变化
注意：不要在watch中对监听属性本身赋值，会无限递归导致出错

data() {
    obj: {
        a: 'a'
    }
}

watch: {
    obj(newVal, oldVal) {
        // 数据变化执行的操作
    }
}

其中有3个属性需要注意：

• handler：Function
• immediate: Boolean
• deep: Boolean

(1) handler函数

handler函数就是watch监听到数据变化后回调的函数，可在函数中处理数据变化后要执行的操作。
下面两种写法达到同样的效果：

// 写法一
watch: {
    obj(newVal, oldVal) {
        // 数据变化执行的操作
    }
}

// 写法二
watch: {
    obj: {
        handler(newVal, oldVal){
            // 数据变化执行的操作
        }
    }
}

(2) immediate

Vue中immediate默认为false，即数据首次绑定时，handler函数不会被回调。当immediate = true时，数据首次绑定会被回调

watch: {
    obj: {
        handler(newVal, oldVal){
            // 数据变化执行的操作
        },
        immediate: true // 首次绑定，handler会被回调
    }
}

(3) deep

Vue通过Object.defineProperty()为绑定的数据设置setter和getter方法，绑定是引用的，且无法监听对象属性的增加。因此，是有当引用改变时（即重新赋值时），watch才会被触发。

data() {
    obj: {
        a: 'a'
    }
}

watch: {
    obj(newVal, oldVal) {
        // 数据变化执行的操作
    }
}

mounted() {
    // 无法触发watch
    this.obj.a = 'A';
    
    // 无法触发watch
    this.obj.b = 'b';
}

实现监听对象内部变化，可以设置deep为true。当deep为true时，Vue会层层遍历对象的属性，以观察对象的内部变化。监听单个属性时，可使用字符串形式

// 监听整个对象
watch: {
    obj: {
        handler(newVal, oldVal){
            // 数据变化执行的操作
        },
        deep: true
    }
}

mounted() {
    // 触发watch
    this.obj.a = 'A';
    
    // 触发watch
    this.obj.b = 'b';
}

// 监听对象的单个属性
watch: {
    'obj.a': {
        handler(newVal, oldVal){
            // 数据变化执行的操作
        },
    }
}