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的区别]