computed中get和set方法

getter

getter方法，用於返回當前computed屬性的屬性值

一般使用普通函數來作為回調函數

computed: {
  site: {
    // getter
    get: function () {
      console.log(this); // VueComponent {_uid: 4, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
      return;
    }
  }
}

如果使用箭頭函數，會改變this指向，因為計算屬性得到的結果一般都是通過對一些其他數據進行操作后得到的結果，所以如果改變this指向，在取值時會有很大麻煩

computed: {
  site: {
    // getter
    get: () => {
      console.log(this); // undefined
      return;
    }
  }
}

setter

setter方法，用於對計算屬性所得到的結果進行操作，計算屬性默認只有getter，不過在需要時你也可以提供一個setter

setter方法的回調函數，我們也選擇用普通函數（理由同上）

setter方法的回調函數中會返回一個參數，是我們getter方法得出的結果

computed: {
  site: {
    // getter
    get: function () {
      return "Google" + "=" + "http://www.google.com";
    },
    // setter
    set: function (newValue) {
      // newValue  === "Google=http://www.google.com"
    },
  },
},

這樣我們就可以使用新的結果進行后續的操作