vue计算属性get和set的作用和使用场景

StevenLiu
  • 121

看了vue官网计算属性conputed的介绍,对get和set的作用很是模糊,哪个是用来取数哪个是用来写数,有什么作用,什么场景下使用呢?
希望大神们给指点一下

回复
阅读 7.9k
3 个回答
✓ 已被采纳

get和set属于ES5的东西..
简单说当你读取一个变量的时候会触发该变量的getter.
当你修改该变量时候会触发他的setter.

骑着洋葱撞地球
  • 4
新手上路,请多包涵
<template>
  <div id="app">
    <!--   桌腿数量用type= range 选择器,绑定变量legsCount-->
    <label>
      桌腿数量: <input type="range" v-model="legsCount">
    </label>
    <!--    桌子数量 绑定变量tableCount,并且输入数量时触发update -->
    <label>
      桌子数量: <input type="text" @input = "update" :value="tableCount">
    </label>
    <!--   统计结果 -->
    <output>
      我们将要做 {{legsCount}}桌腿,组成 {{tableCount}} 桌子
    </output>
  </div>
</template>

<script>

  export default {
    name: 'desk-top',
    data () {
      return {
        legsCount: 0
      }
    },
    computed: {
      tableCount: {
        get () {
          return this.legsCount / 4;
        },
        set (newValue) {
          this.legsCount = newValue * 4;
        }
      }
    },
    methods: {
      update (e) {
        this.tableCount = e.target.value
      }
    }
  }
</script>

<style>
  label, output {
    display: block;
    margin: 20px;
    text-align: center;
  }
  input {
    vertical-align: middle;
    margin-left: 10px;
  }
</style>

clipboard.png

计算属性默认只有 getter ,不过在需要时你也可以提供一个 setter

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

现在再运行 vm.fullName = 'John Doe' 时, setter 会被调用, vm.firstNamevm.lastName 也相应地会被更新。

引用自官网:

https://cn.vuejs.org/v2/guide...

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏