[JavaScript知识库]Vue中computed与watched

computed

应用场景
某个属性的值需要来自多个属性的简单计算或者复杂逻辑计算得出的值时, 推荐使用computed属性

当然写在methods中也可以实现，但要结合实际考虑其有缓存的特性

用法举例

// 总的金额随着购物车的物品添加或减少进行变化
computed: {
            totalPrice: function () {
                let total = 0;
                this.shopingCarts.forEach(function (item, index) {
                    let subtotal = item.price * item.quantity;
                    total += subtotal;
                });
                return total;
            }
 }

watched

应用场景
需要监听某个属性，在属性值发生变化时做出相应动作

用法举例

 watch: {
    cityName: {
    　　handler(newName, oldName) {
      　　// ...
    　　},
    　　// 当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行,设置了immediate的值为true,才会绑定时也执行监听
    　　immediate: true,
    　　// 深度监听 如对象的内部属性、数组的元素本身发生改变
    　　deep: true
    }
  } 

The end

why use and how to use