Web前端小测试——Vue简易投票(根据票数实时更新排名)

        前言：新人投稿，不足之处，还望斧正！

        这段时间有个Web前端实验上机测试，当时没有在限定的时间内做出来的，真的感觉自己好笨好笨，所有积累的理论基础感觉自己没有任何一丢丢可以拿上台面来，过后也因此不敢去问做身边的同学，只好自己一步一步地去反省去总结，直到把它实现为之！

实现效果

 

App.vue 代码如下

<template>
  <div id="app">
    <div class="test" v-for="(item,index) in datas" :key="index">
      <img
        src="./assets/logo.png"
        title="头像"
        style="height: 60px; width: 60px"
      />
      <span style="font-size: 20px;">
      {{ item.name }}&nbsp;{{ item.num }}&nbsp;票</span>
      <input type="button" value="投票" @click="add(index)"/>
    </div>
    <div class="ans">
      <h3>排名第一是:&nbsp;{{ans}}</h3>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      datas: [
        {
          id: 1,
          name: "小明",
          num: 0,
        },
        {
          id: 2,
          name: "小王",
          num: 0,
        },
        {
          id: 3,
          name: "小张",
          num: 0,
        },
      ],
      ans: 'none'
    };
  },
  methods: {
    add(index) {
      this.datas[index].num++;
      // console.log(this.datas[index].num);
    },
    sort() {
      var max=this.datas[0].num , i=0;
      for (const key in this.datas) {
        if(max < this.datas[key].num){
          max=this.datas[key].num;
          i = key;
        }
      }
      return i;
    }
  },
  // 钩子函数（Dom发生更新时就执行）
  updated() {
    var max = this.sort();
    this.ans=this.datas[max].name;
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

        总结：在头一次编写的时候没有用v-for循环遍历，而是直接上div写两三个候选人出来，然后使用{{}}和v-bind绑定属性，再将“投票”按钮的绑定事件@click=“”放在methods属性中，并将找最大票数的方法sort()写在其中，而最后我却用钩子函数created()调用sort()【created是在new Vue实例创建完成后执行的，其可以访问到实例创建完成后的data(),methods,cumputed等等属性或者方法，而此时是还没有挂载DOM的，一般用于进一步初始化页面，实现函数的自执行】

        交卷回来就在想，是不是因为属性是单向绑定的，只能从data中流出，而不能待我点击“投票”按钮时将+1流回data，显然这是错误的分析，因为我的计算方法是直接将data中的值进行自加1的，那么会不会是因为methods的计算方法没能缓存尝试去考虑一下Vue的计算属性cumputed，结果在computed属性中，要传参就得用函数的闭包，而这样子上一步的结果可能就得不到缓存，那和methods属性没多大的区别。再看监听属性watch，可是要实现监听某人的票数发生了变化我就得知道某人更新前后的票数，才能给予它一定的执行事件。也就是这样自我绕死在一棵树上边了！

        最后，在百般无奈之下，再去刷了一下Vue的官方文档，看到Vue钩子函数生命周期图表时，才意识到是不是钩子函数一开始就选错了，因为我调用得早了，才导致没有实现实时的排名。