【ES6系列】Proxy 数据保护实例

最新推荐文章于 2023-10-30 15:43:41 发布

原创最新推荐文章于 2023-10-30 15:43:41 发布 · 242 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ES6 #proxy #数据保护

ES6 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一种利用Proxy对象在不修改原始数据的情况下，实现数据升序、降序及重置的方法。通过Vue.js示例展示了如何在前端应用中动态更新列表排序，并保持数据的原始状态。

业务场景：对数据进行升序、降序、重置操作而不影响原始数据，除了用闭包的方式实现之外，还可以用proxy来实现。

<template>
  <div class="price">
    <ul>
      <li v-for="item in price"
          :key="item">{{item}}</li>
    </ul>
    <button type="button"
            @click="up">升序</button>
    <button type="button"
            @click="down">降序</button>
    <button type="button"
            @click="reset">重置</button>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data () {
    return {
      price: []
    }
  },
  methods: {
    up () {
      this.price = this.proxy.up
    },
    down () {
      this.price = this.proxy.down
    },
    reset () {
      this.price = this.proxy.default
    }
  },
  async mounted () {
    let { data: { price } } = await axios.get('/proxy')
    Object.freeze(price)
    this.proxy = new Proxy({}, {
      get (target, key) {
        if (key === 'up') {
          return [].concat(price).sort((a, b) => a - b)
        } else if (key === 'down') {
          return [].concat(price).sort((a, b) => b - a)
        } else {
          return price
        }
      },
      set () {
        return false
      }
    })
    this.price = this.proxy.default
  }
}
</script>
<style scoped>
ul,
li {
  list-style: none;
}
</style>