vue computed属性使用

使用报错[Vue warn]: Computed property "localValue" was assigned to but it has no setter.

代码：

<a-input
     class="search-input"
    v-model.trim="localValue"
    :allow-clear="true"
    :placeholder="inputPlaceholader"
    @change="onInput">
</a-input>

computed: {
     localValue () {
        return this.content
    }
}

报错原因

computed计算属性默认只有getter方法，所以只能获取，不能设置。而v-model是数据的双向绑定，当输入框的值变化时，localValue也会跟着变化，但localValue没有设置setter方法，所以会报错。

computed的setter

有需要时，我们可以提供一个setter:

localValue: {
    get () {
        return this.content
    },
    set (value) {
        this.content = value
    }
}

设置setter之后，localValue就可以被重新赋值。

备注：当localValue值变化时,content也会一起变化

知识扩展

computed计算属性与方法的区别

例子如下：

<p>Reversed message: "{{ reversedMessage }}"</p>

computed: {
    reversedMessage () {
           return this.message.split('').reverse().join('')
    }
}

同样也可以用methods中的方法来实现同样的效果：

  methods: {
    reversedMessage () {
           return this.message.split('').reverse().join('')
    }
  }

什么时候用计算属性什么时候用方法，要根据不同的需求来判断。

两者的不同点在于：计算属性是基于它们的响应式依赖进行缓存的，只要message的值不发生改变，
reversedMessage访问时会返回以前的计算结果，而不会重新计算。而方法在访问时，总会触发再次执行。

所以，如果我们需要缓存，不想每次都计算，就使用计算属性；如果不需要缓存，就使用方法。

监听watch与计算属性

通常情况下，当某个数据随着其他数据变动而变动时，我们最常用的就是计算属性而不是watch监听，但在数据需要异步执行时，watch方法才是最有效的。

例如：

watch: {
     localValue (value) {
       this.getData(value) // 请求接口，获取数据
   }
}

在这里，当localValue数据发省变化时，watch方法允许我们去访问API，这是计算属性无法做到的。