使用solidity与web3创作一个在线小游戏之六：VUE的响应式数据，数组与对象的区别

在我的上一篇文章使用solidity与web3创作一个在线小游戏之五：VUE中的嵌套table，动态数据绑定，slot插槽与slot-scope_lixiaodog的博客-CSDN博客

中我们使用了VUE中基础的几个特性，在本章中我们会深入了解VUE。当我们创建了一个room模板之后，我们接下来就可以创建真正的房间了。在view文件夹下新建一个文件DeskList.vue，关键代码如下：

<template>
  <div class="home-container">
    <Header />

    <div class="content clearfix">
      <div class="list">
        <h2>桌子列表</h2>  
      </div>

      <Table
        :loading="loading"
        border
        :columns="columns"
        :data="tableData"
      >
        <template
          slot-scope="{row, index}"
          slot="action"
        >

          <Button
            style="margin-right: 10px"
            @click="refresh(row, index)"
          >刷新详情</Button>
        </template>

        <template
          slot-scope="{row, index}"
          slot="action2"
        >
          <Button
            style="margin-right: 10px"
            @click="userSitDown(row)"
          >进入游戏</Button>

        </template>

      </Table>

      <Page
        class-name="pagination"
        show-total
        :total="total"
        @on-change="handleCurrentChange"
        :page-size="pageSize"
        :current="pageNo"
        v-if="!loading && total > 0"
      />
    </div>

    <Footer />

    <room :roomInfo="roomInfo"></room>

  </div>

在data()里添加一个数据deskinfos: [],以此变量来存储我们的桌子列表。在 methods:里添加一个函数：

  getDeskList() {
      this.loading = true;

      let params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        status: this.status
      };
      let self = this;
      let gameObjArray = [];

      myWeb3.instances.GameManage.getAllDesk(111)
        .then(res => {
          console.log("getDeskList===", res);

          this.loading = false;

          if (res.length > 0) {
            for (let i = 0; i < res.length; i++) {
              let gameobj = Object.assign({}, res[i]);

              this.tableData.push(gameobj);
              
                this.getTokenSymbol(gameobj, i);
              //})
              
            }
          } else {
            this.tableData = [];
            this.total = 0;
          }
        })

在我们的表头里有一项：

在这一列里我们将显示我们桌子所支持的ERC20TOKEN的名称，我们的合约并没有保存这个数据，需要VUE拿到数据后，调用ERC20的标准接口去获取token.symbol()。我们添加一个获取这个symbol的函数。

   getTokenSymbol(row, index) {
      let self = this;

      myWeb3.instances.TutorialToken.symbol().then(function(res) {
        
 
        Vue.set(self.tableData[index], "tokenSymbol", res);      
        
      });
      myWeb3.web3.eth.getBalance(row.addr).then(function(res) {
      
 
        Vue.set(self.tableData[index], "bonus", myWeb3.web3.utils.fromWei(res))  
        
      });
    
    },

 此时如果使用：self.tableData[index].tokenSymbol=res;是无法使用页面得到更新的。那是为什么呢？在VUE里，所有的视图自动更新都是基于响应式数据的。在我们self.tableData[index].tokenSymbol时，VUE并没有为 我们在底层，添加tokenSymbolp 个字段的响应系统（这个响应系统 一般在编译时就把对象的所有静态属性遍历后，添加完成，相应的包装类已经全部生成），所以我们动态添加的属性VUE是监控不到的，为了解决这个问题，VUE提供了

Vue.set(obj, key, value)，这个函数,这个函数调用后，VUE会把所有应该加上的响应系统全部建立好，之后就可以追踪这个属性的变化了，这时可能会问，在上一章中和我们直接添加的数组为什么能够自动响应呢？事实上使用某些方法操作数组，变动数据时，有些方法可以被vue可以监测

push()，pop()，shift()，unshift()，splice()，sort()，reverse()，而filter(), concat(), slice()，这些不会改变原始数组，但总是返回一个新数组。事实上，以下种情况，VUE无法监测：

1、当你利用索引直接设置一个项时，vm.items[indexOfItem] = newValue

2、当你修改数组的长度时，例如： vm.items.length = newLength

大家明白了响应式数据，接下来我们继续，把其它相应函数的代码完善。测试就可以看到如下界面；

 在本章中我们理解了什么是响应式数据，事实上VUE为所有的DATA数据和属性提供了响应系统，响应系统与渲染器，编译器是整个VUE的核心。在本系列文章完成后，会有一个系列文章，从响应系统的原理出发，创建一个简单的响应系统原型。在下一章中，我们将与单组件交互，实现父组件与子组件的数据与事件交互。