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"
    },
  },
},

这样我们就可以使用新的结果进行后续的操作

posted @ 2021-04-16 16:31  调用Function  阅读(995)  评论(0编辑  收藏  举报