vue computed和watcher

计算属性（computed）：优化在模版中写入过于复杂的逻辑

（另外一个优化data属性的方法filters）

• 计算属性是根据源数据衍生出来的新数据，既然是衍生的数据，那只要源数据在data中声明过即可，同时，计算属性的试图更新必须依赖于data属性的更新
• 计算属性的名称就是计算属性处理函数的名称，使用时可以在模版中绑定计算属性，绑定方法与data中的普通属性一致

// 基础用法
data() {
        return {
            str: 'string'
        }
}
computed: {
        beautifyStr() {
            return this.str.split('');
        }
}

计算属性的值依赖于普通属性，并且对普通属性进行缓存，只有当普通属性的值更新时，才会重新渲染计算属性，否则多次访问的计算属性均为之前该计算属性的缓存，并不会再次执行计算属性的回调函数
默认方法为getter，可添加setter方法

监听器（watch）：监听并处理data属性的更新

（感觉比侦听器更接地气 -_- ）

对data属性的监听，说明属性是在data中声明过的
属性更新时调用监听函数，可选参数分别为新值和旧值，对属性重新设置值，只要跟原来的值相等就不会触发函数调用，这一点跟计算属性是相似的

// 基础用法
watch: {
        activeTab(newValue, oldValue) {
            console.log(newValue, oldValue);
            this.getList();
        }
}
// 函数体调用Vue实例的方法可简写
watch: {
        activeTab: 'getList'
}

immediate

属性初始化的值默认不会触发监听，解决办法添加说明immediate:true，表示监听初始值，此时使用handler写法

watch: {
        activeTab: {
            handler(newValue, oldValue) {
                console.log(newValue, oldValue);
                this.getList();
            },
            // 立即执行handler函数
            immediate: true
        }
    }

deep

当被监听的属性为对象时，默认不会监听对象内部属性的变化，而是只监听属性被赋值时的变化，解决办法添加说明deep:true（默认为false），此时监听器会深度遍历给对象的每一个属性都带上监听器，更新写法

// 监听对象的所有属性
watch: {
        activeTab: {
            handler(newValue, oldValue) {
                console.log(newValue, oldValue);
                this.getList();
            },
            // 深度监听
            deep: true
        }
    }
// 监听对象的某些属性
watch: {
        'activeTab.index': {
            handler(newValue, oldValue) {
                console.log(newValue, oldValue);
                this.getList();
            }
        }
    }

另外组件中的监听器会随组建的注销而注销，不会造成内存溢出，但如果使用命令式的（ vm.$watch）全局的监听器需要手动注销才行