如何利用 Vue 的 computed 属性和 watch 属性协同优化应用性能

Vue太强大了！做前端感觉就像嗑瓜子一样容易。双向绑定功能还能自动更新页面，真是省事儿！使用了Vue后，前端变得超级清爽！

computed属性的魔力

Vue的computed属性就是神器！只要数据变一下，它马上就能感知到并自动算出新结果。不管你怎么看，永远都是最新的信息！

computed属性的使用方法

computed: {
    fullName() {
        return `${this.firstName} ${this.lastName}`;
    }
}

兄弟，你试试看把Vue的computed属性当大招使，太简单了！把计算公式放在那，让它自己算出来给你想要的答案。要知道，Vue就是个盯着变量随时准备改变的高手，只要数值有变动，答案马上就更新给你。这样一来，我们的代码看起来容易懂，用着超级顺畅！

computed属性的性能优势

设好一个计算属性后，日后随便用都没问题，因为只算过一回就记住了！而且要是数据本身没变的话，Vue会直接从内存中取数，这样就能省下重复运算的时间咯。就算遇到一堆繁杂计算情形，比如说在一列长长的数里面找到某个数字这种事，这功能也是超级实用，轻轻松松搞定任务！

  

    
    
    
{{ fullName }}
  


export default {
  data() {
    return {
      firstName: '',
      lastName: ''
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
};

watch属性的监听功能

知道Vue里那个叫watcher的东西吗？这可是个万能小助手，每天24小时不间断地盯梢着你的数据变化！只要有动静，立刻给你报告消息。虽然名字里带着”watch”，但跟你想的完全不同，我们主要是关心数据的动态，从而实现自定义功能

watch属性的使用方法

用Vue弄组件监控表单超简单！只需将要监控的数据丢给watcher就行了。一有变化，函数立马开始工作，这样不管是调整其他数据还是进行网络操作都能任凭心意~

watch: {
    firstName(newValue, oldValue) {
        console.log(`firstName从${oldValue}变为${newValue}`);
    }
}

watch属性的深度监测

你想知道咋回事儿么哥们儿？平常多留点心也就够了。要是用的是Vue的话，告诉你，可以试试用watcher这个工具。记得要把深度设成真，这样才能及时发现对象和数组的变化哒！

computed与watch的选择

watch: {
    obj: {
        handler(newValue, oldValue) {
            console.log('obj发生变化');
        },
        deep: true
    }
}

在Vue中，要更新数值？加个compute搞定！想要知道数值变化怎么办？比如发请求或删缓存，那就用watch！

实际应用中的优化

快用这个方法给Vue应用提速，给用户极致体验吧!

总结与展望

watch: {
    firstName(newValue, oldValue) {
        this.debouncedGetData();
    }
},
methods: {
    debouncedGetData: debounce(function() {
        // 异步操作
    }, 500)
}

Vue的computed和watch功能真是牛逼坏了！如果用得溜，代码速度绝对飙升！希望这篇小文能对你们有所帮助，早日晋升为Vue大牛哦～。