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

Question

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

Answer 1

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

Answer 2

<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>

Answer 3

计算属性默认只有 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.firstName 和 vm.lastName 也相应地会被更新。

引用自官网：

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