关于数据传递和接收的两种方式？

Question

在跟着开源项目学习的时候发现作者用的是第二种方式，感觉通过参数传递会更简洁些，但是作者是通过自定义属性的方式，不太理解，有解释一下的吗？

<template>
  <div>
    <button @click="NavChange('index')">首页</button>
    <button @click="NavChange('search')">会员专区</button>
    <button @click="NavChange('cases')">组件模板</button>
    <button @click="NavChange('news')">文章资讯</button>
    <button @click="NavChange('me')">个人中心</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      PageCur: 'index'
    };
  },
  methods: {
    NavChange(cur) {
      this.PageCur = cur;
    }
  }
};
</script>

<template>
  <view>
    <button @click="NavChange" data-cur="index">首页</button>
    <button @click="NavChange" data-cur="search">会员专区</button>
    <button @click="NavChange" data-cur="cases">组件模板</button>
    <button @click="NavChange" data-cur="news">文章资讯</button>
    <button @click="NavChange" data-cur="me">个人中心</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        PageCur: 'index'
      };
    },
    methods: {
      NavChange(event) {
        this.PageCur = event.currentTarget.dataset.cur;
      }
    }
  }
</script>

在跟着开源项目学习的时候发现作者用的是第二张方式，感觉通过参数传递会更简洁些，但是作者是通过自定义属性的方式，不太理解，有解释一下的吗？

下面是作者的原代码

Answer 1

在vue里，如果事件回调不是一个函数的句柄，而是一个表达式/语句，那么vue在解析的时候会生成一个匿名函数包裹比如<button @click="NavChange('index')">首页</button>这段实际上会被视为<button @click="$event => NavChange('index')">首页</button>，所以如果这样类似的事件回调比较多的时候，每个都会创建一个匿名函数，区别只是传参不一样，相当于是额外的开销，所以可以考虑将参数绑在dom上，从dom上去获取参数，减少匿名函数的创建。不过在实际中一般也不会有大量这种使用，影响不大。更多还是风格化/个人喜好问题。

Answer 2

第一种方式:

优点是简单明了，参数直观易读，不需要通过读取 DOM 元素的属性来获取参数。缺点是当参数比较多的时候，代码会变得冗长，不便于维护

第二种方式:
    通过 event.currentTarget.dataset.cur 来获取参数。这种方式的优点是传递参数的方式更加灵活，可以通过 DOM 元素的属性来传递任意类型和数量的参数。缺点是需要读取 DOM 元素的属性来获取参数，代码可读性不如第一种方式。

    总的来说，这两种方式都有各自的优缺点。如果参数比较少，可以使用第一种方式；如果需要传递多个参数或者参数比较复杂，可以使用第二种方式。但是，在使用第二种方式时需要注意，读取 DOM 元素的属性可能会影响性能，因此在性能要求较高的场景中需要注意。