Vue Computed中get 和set講解

一、Get

一般情況下，我們只是使用了computer中的gettter屬性，默認只有 getter，我們只是單純的使用了gettter屬性

就像下面的例子

 二、Set

只有當computed監測的值變化的時候，也就是我下面例子中的fullName變化的時候，set才回被調用

 <div class="hello">
    <div id="example">
      <p>firstName值: {{firstName}}</p>
      <p>fullName值: {{fullName}}</p>
    </div>
    <button @click="ClickCeshi">點擊改變fullName的值</button>
  </div>

data () {
    return {
      firstName: 'Foo'
    }
  },
  methods: {
    ClickCeshi () {
      this.fullName = 'fullName的新值'
    }
  },
  computed: {
    fullName: {
      get: function () {
        console.log('調用了getter屬性')
        return '***' + this.firstName + '***'
      },
      set: function (newValue) {
        console.log('調用了settter屬性')
        console.log(newValue)
        this.firstName = newValue
      }
    }
  }

上面的點擊事件，改變fullName的值

沒有點擊點擊事件之前，頁面的輸出：可以看到，在沒有進行任何操作之前getter就會自動執行，頁面中的fullName已經改變

 

點擊過點擊事件之后，調用樂set，便可以進行操作了

 

參考文獻：vue官網：https://cn.vuejs.org/v2/guide/computed.html