Vue:filter、方法、computed和watch的自我理解和整合

最近一直在用，感觉有些 data，用filter可以，用自定义方法也行。有些数据呢，用computed能实现，用watch也可以。很是疑惑，到底各个方式有何优缺点呢？我这样的使用方式是不是符合约定的场景？详看了官网，度娘了好久，整理如下。

一、四种方式代码走查

• filters：访问不到vue 实例，帮助我们对数据进行筛选、数据格式化

filters:{
    absPercent: function (value, key) {
      return value && value[key] && Math.abs(value[key])
    },
}

• methods：可以访问vue 实例，其他同filters

methods:{
    absPercent: function (value, key) {
      return value && value[key] && Math.abs(value[key])
    },
}

• computed：不能传参，只能监听现有属性，属性依赖改变，自动调用对应的方法

 computed: {
    panels: function () {
      return [
        {
          label: this.billDate + "包周期账单详情",
          name: "cycle",
        },
        {
          label: this.billDate + "按需账单详情",
          name: "need",
        },
        {
          label: this.billDate + "资源包扣减详情",
          name: "resource",
        },
      ];
    }
}

• watch：监听现有属性，属性需要先声明，一旦属性发生了改变就去自动调用对应的方法

data(){
return {
 panels: [
        {
          label: "2020-11包周期账单详情",
          name: "cycle",
        },
        {
          label: "2020-11按需账单详情",
          name: "need",
        },
        {
          label: "2020-11资源包扣减详情",
          name: "resource",
        },
      ],
}
},
 watch: {
    billDate(newV, oldV) {
      this.panels = [
        {
          label: newV + "包周期账单详情",
          name: "cycle",
        },
        {
          label: newV + "按需账单详情",
          name: "need",
        },
        {
          label: newV + "资源包扣减详情",
          name: "resource",
        },
      ];
    },
  },

二、四种方式详细对比

4种方式对比

三、filters和computed调用对比

• 修改相关data值：filters和computed均会调用，且filters会多次渲染
  

  filters和computed均会调用

• 修改不相关data值：调用filters
  修改不相关的data值会调用render函数，render又会重新调用过滤器。这样filters就执行多次了：
  

  调用filters
  
  示例在此

参考文章

Vue--使用watch、computed、filter方法来监控
Vue中computed和watch的区别