如何更好的使用VUE之數據處理方式

大家好！我叫戴向天

QQ羣：602504799

如若有不理解的，可加QQ羣進行諮詢瞭解

在我前端工作之前，在處理數據的時候，我經常在想如何更好的處理數據，對數據的可空性更高，更好的變換。
其實這個也不是什麼技術要點，只是在開發的時候，更加如意，特別在修改的是也方便。

我的思路是，基礎數據是不容改變的。然後通過其它的方式來進行獲取相對應的數據，或者其它的數據格式。

例如：

const arr = [
	{
		value: 1,
		name: 'a'
	},{
		value: 2,
		name: 'b'
	},{
		value: 3,
		name: 'c'
	},{
		value: 4,
		name: 'd'
	}
]

// 現在我只想獲取arr裏面的數字,
const arrNum = arr.map(item=>{
	return item.value
})
// [1,2,3,4]

// 我想獲取value加上name的合併字符串
const arrStr = arr.map(item => {
	return item.value+ item.name
})
// ["1a", "2b", "3c", "4d"]

上面這兩種其實就是最簡單的方式，可以說體現的效果並不大。

現在我就假設數據裏面有10種數據,並且以每4個分一組

const arrTest = new Array(10)

function getList ( data ) {
	const arr = []
	const column = 4
    const list = data
    const len = Math.ceil(list.length / column)
    for (let i = 0; i < len; i++) {
      arr.push(list.slice(i * column, i * column + column).map((item) => {
        return item
      }))
    }
    return arr
}
getList(arrTest)

結果如下：

現在我就來寫個簡單的數據列表加分頁的功能，以及前端本地實時搜索功能的組件

<template>
  <div>
    <div>
      <input v-model="keyWord" />
    </div>
    <div>
      <ul>
        <li v-for="(item,key) in getList" :key="key">{{item}}</li>
      </ul>
    </div>
    <div>
      <span @click="changePage(false)">上一頁</span>
      共 {{getTotal}} 頁
      <span @click="changePage(true)">下一頁</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [], // 後臺總數據
      pageSize: 10,
      page: 1,
      keyWord: '',
    };
  },
  methods: {
    // 改變page值
    changePage(bool) {
      if (bool) {
        this.page + 1 <= this.getTotal ? this.page++ : this.getTotal;
      } else {
        this.page > 1 ? this.page-- : 1;
      }
    },
  },
  computed: {
		 // 獲取數據
    getList(arr) {
      // 返回的時候在進行分頁處理
      const start = (this.page - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.getData.slice(start, end);
    },
		// 數據處理
    getData() {
      const arr = [];
      this.list.forEach((item) => {
        // 關鍵字搜索處理
        if (this.keyWord.toString()) {
          if (item.toString().indexOf(this.keyWord.toString()) > -1) {
            arr.push(item);
          }
        } else {
          arr.push(item);
        }
      });
      return arr;
    },
    // 獲取總頁數
    getTotal() {
      return Math.ceil(this.getData.length / this.pageSize);
    },
  },
  watch: {
    // 當關鍵字有變化的時候，page就進行初始化
    keyWord() {
      this.page = 1;
    },
  },
  // 創建總數據
  mounted() {
    const arr2 = new Array(100);
    for (let i = 0; i < arr2.length; i++) {
      this.list.push(i + 1);
    }
  },
};
</script>

在上面的代碼中，我們可以看到，this.list的數據是沒有進行該變的，循環出來的永遠是處理後的數據。

雖然當前的list的基礎數據很單一，全是數字。如果list是個複雜的數據，你也可以使用getData裏面進行處理數據，還是不會對list進行做更改。