Vue.js计算属性VS监听器：哪个更智能？

1.computed计算属性

Vue.js中的computed属性超厉害的！处理繁杂数据时更是好用得不得了！啥叫computed属性呀？就是哪儿变它就在哪告诉你结果。这玩意儿好在哪儿嘞？首先，即时反映变化；其次，还能实现懒加载。

1.1计算新数据

Vue里的计算属性就是个小计算器，负责算数。数值一变，它就会重新计算，让我完成商品报价单的身高体重排序。然后到模板里利用v-for指令展现新排过序的结果。不过要记住它可是只对变化的属性进行重算！

哦对了，别忘了算属性这样会轻松很多！比如说，咱们把日期和金额弄整齐些，这样看着舒服。说白了，这个计算属性能把订单日期变成本地日期时间串，这样模板里就能用好看的字符串。而且只要orderTime有变化，formattedTime马上就变了。

2.watch监听器

  

    
商品数量: {{ products.length }}
    

      

        {{ product.name }} - ${{ product.price }}
      
    
  


export default {
  data() {
    return {
      products: [
        { name: "iPhone 12", price: 799 },
        { name: "MacBook Air", price: 999 },
        { name: "iPad Pro", price: 699 },
        { name: "AirPods Pro", price: 249 },
      ]
    }
  },
  computed: {
    sortedProducts: function() {
      return this.products.sort((a, b) => a.price - b.price);
    }
  }
}

瞅瞅这玩意儿，名叫Watch的Vue神器，简直就是数据库的”福尔摩斯”！但是，别搞错了，它不像computed那样会自动给你更新视图要靠你手动才能使唤起来哈。你问Watch到底是啥？告诉你，它就是个善于观察和捕捉数据变化的侦查员，还能顺便帮你做点其他事情。

比如说咱们登网站的时候，总得小心翼翼地核对账户密码对不对？但是万一手一抖，输入超过10个字母，watch哥就开始警告你违规！这时候，咱们就可以利用computed函数来看看还有几个空格需要补上(charsLeft)。不过别忘了，只有当我们改变了text的内容时，它才会重新计算的哟。

这就给你说说Watch，就是个瞅着变量是否变动的小帮手，其实它还能操控上下文的改变。掌握这个功能的关键就在于知道在哪里设定变化。不仅如此，Watch还有各种强大的功能，比如深度分析和立即启动任务。只要学好了如何调整这些选项，你就能成为Watch的专家！

3.computed与watch结合应用

编程太费劲？别怕！这儿有两个神器‘state’和‘dispatch’，专治大数据和状态变动~拿电商来说买家选好东西当然想要马上知道订单消息，对不？

  

    
订单时间: {{ formattedTime }}
    更新时间
  


export default {
  data() {
    return {
      orderTime: new Date()
    }
  },
  computed: {
    formattedTime: function() {
      return this.orderTime.toLocaleString();
    }
  },
  methods: {
    updateTime: function() {
      this.orderTime = new Date();
    }
  }
}

这个叫Computeds的功能挺有意思的，能算出我们买了哪些钱，还剩下多少，非常实用！而且，有Watch这个功能的话，只要我们买的东西或者优惠券有变动，马上就能看到最新的订单信息。

4.computed和watch优缺点对比

Computed效率高，轻松搞定；Watch则适合处理慢慢来的、可能有副作用或较复杂操作的事情。

讲到速度，Computed就像个懒蛋，没人找它它就偷懒；Watch这哥们，跟那挑剔的处女座似的，得先看完整个过程才肯下定论。

5.如何选择computed还是watch

哥们，你会用computed跟watch吗？要是需要算个啥，或者等新的消息，就选computed；但要是只想看看数据有没有变化，接着马上做点啥或者给点什么的话，那就得选watch。

别忘了，咱就把这些函数凑在一块儿用，这样数据传输和业务流程就会更流畅了。选哪一个好？那得看你要干，试过才知道哪个最合适。这样一来，不仅代码质量上升，项目推进也快多了！

  

    
剩余字符数: {{ charsLeft }}
    
  


export default {
  data() {
    return {
      text: ""
    }
  },
  watch: {
    text: function(val) {
      if (val.length > 10) {
        alert("输入字符数不能超过10个!");
      }
    }
  },
  computed: {
    charsLeft: function() {
      return 10 - this.text.length;
    }
  },
  methods: {
    updateChars: function() {
      this.charsLeft = 10 - this.text.length;
    }
  }
}

6.computed与methods区别

看到Computed和Methods让人头晕眼花？别怕其实它们就是一回事儿，只不过适用场景稍微不一样罢了。要在用户动作后马上显示效果，那就用Computed；但要是需要搞点事件处理或复杂运算，那还是得选Methods。这下了解了？

这算技巧牛逼多了！你看，不用怕变量会乱变，用到它的时候再算也不迟。相比起来，之前那种方法可就有点傻乎乎了，不论变不变它都得不停干活。

7.总结

别再磨蹭！搞懂Vue.js里Computed和Watch两个大杀器，你的应用速度绝对飙升！

下次遇到问题时，利用compute函数生成新数据，看清楚后再做异步操作，肯定没问题的。

你试过Vue的computed和watch功能了嘛?遇到过什么问题没有?你有没有特别喜欢的数据操作方式？快来分享一下！