对于vue计算属性的理解 set 和get的触发和作用

计算属性的理解

<template>
  <div id="app">
<span>{{newnum}}</span>
<!-- 点击事件控制num+1，计算属性newnum 会跟着变，触发该计算属性的get方法-->
<button @click="num++">+1</button>
<!-- input框绑定newnum 输入新的值，newnum 的值发生变化触发该计算属性的set方法-->
<input type="text" v-model="newnum">
  </div>
</template>

<script>

export default {
  name: 'App',
  data () {
    return {
      num: 1
    }
  },
  computed: {
    newnum: {
      // 用一些什么值，得到这个计算属性的变量 比如用data中的num+1来得到newnum
      get () {
        console.log(2)
        return this.num + 1
      },
      // 计算属性变化了 用新的值干点啥
      set (val) {
        // dosomething
        console.log(val) // input框输入12 新的值变成12，此时val的值为12 String类型（因为是输入框的值）
      }
    }

  }
}
</script>