Vue 理解之白话 getter/setter详解

什么是getter/setter？

在Vue中实现数据双向绑定的原理是通过getter/setter来实现的。简单来说，getter就是在获取属性值时执行的代码，setter则是在设置属性值时执行的代码。getter和setter通常被称为“计算属性”和“watcher”。

如何定义getter/setter？

在Vue中，可以通过定义一个对象来定义一个包含getter/setter的属性，这个对象需要包含get和set两个属性。例如：

var obj = {
  name: '',
  get getName () {
    console.log(`获取到了 ${name}`)
    return this.name
  },
  set setName (value) {
    console.log(`设置了 ${value}`)
    this.name = value
  }
}

上述代码中，定义了一个包含getter/setter的对象，其中getName属性为getter，setName属性为setter。当获取getName属性时，将会输出“获取到了{name}”；当设置setName属性时，将会输出“设置了{value}”

Vue中的getter/setter用法示例

示例一：计算属性

在Vue中，可以通过computed属性或者methods实现计算属性。例如，下面是一个计算两个数之和的示例。

<template>
  <div>
    <input v-model="num1" />
    <input v-model="num2" />
    <p>结果：{{ sum }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num1: 0,
      num2: 0
    }
  },
  computed: {
    sum: {
      get() {
        return parseInt(this.num1) + parseInt(this.num2)
      }
    }
  }
}
</script>

在这个例子中，sum的getter方法被用来计算num1和num2的和，并返回到模板中渲染。

示例二：数据监听

除了计算属性，Vue中还可以通过watch属性监听数据的变化。例如，下面是一个监听数据变化并执行函数的示例。

<template>
  <div>
    <input v-model="name" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: ''
    }
  },
  watch: {
    name(value) {
      console.log(`name变为了${value}`)
    }
  }
}
</script>

在这个例子中，当name的值发生变化时，会执行watch中的方法，并输出值变化的消息。通过这种方式，Vue中可以非常灵活地实现数据双向绑定的效果。