vue 计算属性 修改自己?

3,658 阅读1分钟


计算属性的出现原因:当你想要在模板中多次引用复杂逻辑时,就会难以处理。

所以,对于任何复杂逻辑,你都应当使用计算属性。 ——vue.js官网


简单介绍一下使用方式(两种):

//第一种
computed: {
  fullName: {
    // getter
    get ()  {},
    // setter
    set: function (newValue) {    }
  }

// 第二种
computed: {
    fullName: function () {}
  }

计算属性默认只有 getter (第二种情况),不过在需要时你也可以提供一个 setter (第一种)


简单介绍之后,开始我的踩坑之旅……

看以下代码

computed: {
    nowDate () {
      return utils.formatTime(new Date(), 'date')
    }
  },
  methods: {
    bindPickerChange (e) {
      this.nowDate = e.value
    }
  }

在computed中定义的nowdate变量,在bindPickerChange 中修改nowdate却不管用?


网上查询到,有人说需要写set函数

computed: {
    nowDate:{
      get ()  {},
      set (newValue) {}
    }
  },

尝试过之后, 发现set函数里 nowdate 是改不了的, 但是你可以改变其它的data里面的属性值


最终 :建议采用过滤函数或者watch 监听