vue computer用法，get set详解

computer：计算属性

get：获取属性。computer有2个属性，get和set，一般我们都是默认使用get，就像下面的代码

<template>
  <div>
    {{nameNew}}  //  => '哈哈哈哈'
  </div>
</template>
<script>
export default {
  data(){
    return {
      name:'哈哈哈哈',
    }
  },
  computed: {
    nameNew :function(){
      return this.name
    }
  }
}

set：只有当computed监测的值变化的时候，也就是我下面例子中的name变化的时候，set才回被调用 （想要修改computer的值，就必须设置set方法）

<template>
  <div>
    {{nameNew}}-{{name}}
    <button @click="edit">nameNew</button>
  </div>
</template>
<script>
export default {
  data(){
    return {
      name:'哈哈哈',
    }
  },
  computed:{
    nameNew :{
      get: function () {
        console.log('调用了getter属性')
        return this.name
      },
      set: function (newValue) {
        console.log('调用了settter属性')
        this.name = newValue
      }
    }
  },
  methods:{
    edit(){
      this.nameNew= '变'
    }
  }
}
</script>