TG项目打卡day5

本次打卡用于记录计算属性的getter和setter的理解

1.什么是计算属性

计算属性是Vue中一种特殊的属性，它可以根据已有的数据计算出新的数据。计算属性的值会根据它所依赖的数据发生变化而变化。

通常，我们将属性写在配置项data中，但对于一些逻辑复杂的属性，我们会选择将它写成计算属性，以符合声明式编码的要求

2.getter与setter

（1）单独使用getter

在Vue实例的计算属性中，默认有getter，因此我们在仅使用getter时，甚至可以不写函数的名称来实现简写：
完整版：

  <script type="text/javascript">
    const vm = new Vue({
      el: "#mytry",
      data: {
        description: "歌手与歌曲的匹配",
        singer: "歌手",
        song: "歌曲",
      },
      computed: {
        suit: {
          get() {
            return this.singer + "-" + this.song;
          },
        },
      },
    });
  </script>

简写版：

<script type="text/javascript">
    const vm = new Vue({
      el: "#mytry",
      data: {
        description: "歌手与歌曲的匹配",
        singer: "歌手",
        song: "歌曲",
      },
      computed: {
        suit() {
          return this.singer + "-" + this.song;
        },
      },
    });
  </script>

（2）除了getter还是用setter

当我们同时使用setter，我们可以对计算属性进行更为灵活的控制，如

1. 实现双向绑定：通过在计算属性中使用setter，可以实现双向绑定，即当计算属性的值发生变化时，可以自动更新相关的数据。

2. 执行副作用：通过在计算属性中使用setter，可以执行一些副作用操作，例如发送网络请求、更新DOM等。

3. 控制计算属性的值：通过在计算属性中使用setter，可以控制计算属性的值，例如限制计算属性的最小值、最大值等。
   …

以双向绑定为例子：
代码：

  <script type="text/javascript">
    const vm = new Vue({
      el: "#mytry",
      data: {
        description: "歌手与歌曲的匹配",
        singer: "歌手",
        song: "歌曲",
      },
      computed: {
        suit: {
          get() {
            return this.singer + "-" + this.song;
          },
          set(value) {
            console.log("set", value);
            const arr = value.split("-");
            this.singer = arr[0];
            this.song = arr[1];
          },
        },
      },
    });
  </script>

3.总结：

也就是说，setter不是必要的，它起到了对计算属性进行锦上添花的作用。