在Vue中，computed是一个非常强大的特性，它可以让我们通过计算属性来派生出一些新的属性值。在大部分情况下，computed属性被用于计算一些值，而不是修改值。但是，在一些特殊的情况下，我们可能需要将computed属性设置为新的值。那么，在Vue中，computed属性怎么才能set属性呢？接下来，本文将为你一一解答。
一、computed属性的基本用法
我们先来看一下computed属性的基本用法。computed属性其实就是一个带有get和set方法的属性。其中，get方法被用于计算属性的值，而set方法则被用于设置属性的值。下面是一个示例：
computed: {
fullName: {
get: function() {
return this.firstName + ' ' + this.lastName;
},
set: function(newValue) {
var names = newValue.split(' ');
this.firstName = names[0];
this.lastName = names[names.length - 1];
}
}
}在上面的代码中，我们定义了一个计算属性fullName，它的值是由firstName和lastName组合而成的。在get方法中，我们通过拼接firstName和lastName的方式来计算fullName的值。而在set方法中，我们通过将新的fullName值分割为firstName和lastName然后同时设置它们的值来修改原来的属性值。
二、computed属性的set方法的注意事项
虽然computed属性的set方法看起来很有用，但是它也有一些需要注意的事项。其中比较重要的有以下几点：
三、实际应用示例
下面我们通过实际的应用示例来演示computed属性如何set属性。
首先，我们定义了一个组件，里面有一个计算属性totalPrice，它的值是商品价格乘以商品数量，即totalPrice = price * quantity。我们可以用以下代码来实现这个计算属性：
<template>
<div>
<p>单价：{{ price }}</p>
<p>数量：<input v-model="quantity"></p>
<p>总价：{{ totalPrice }}</p>
</div>
</template>
<script>
export default {
data() {
return {
price: 10,
quantity: 2
}
},
computed: {
totalPrice: {
get() {
return this.price * this.quantity
},
set(newValue) {
this.quantity = newValue / this.price
}
}
}
}
</script>在上面的代码中，我们首先定义了一个组件，里面包含了一个计算属性totalPrice。在get方法中，我们使用price和quantity计算总价值；在set方法中，我们使用newValue和price计算出新的quantity值，然后更新数据来更新DOM。
现在，如果我们希望设置总价，而不是数量或价格，我们可以这样做：
this.totalPrice = 20;
这将会自动修改quantity的值，使得总价等于20。如果我们希望单价乘以数量等于总价，而不是在总价被设置时自动分配数量，我们可以将set方法中的逻辑修改为如下所示：
set(newValue) {
this.price = newValue / this.quantity
}这样，我们就可以通过设置总价来修改单价的值了。
总的来说，computed属性确实是一个非常强大的特性，但是需要注意的事项也比较多。在实际使用中，我们需要根据情况谨慎使用computed属性的set方法，以避免不必要的问题。
以上是vue的computed怎么set属性的详细内容。更多信息请关注PHP中文网其他相关文章！
