项目中有一个输入框，其取值内容需要同时依赖data1、data2、data3、data4四个变量，同时实现双向绑定。一开始我在方法里写了content的赋值，但是随着逻辑的增加，四个变量发生变化的时候，必须给content赋值，代码变得很重复。于是尝试把content写在computed里面，发现在输入框中修改value的时候，界面是可以改变的，但是用vuedev工具可以看到this.content的值没有改变。官方Vue文档指出，计算属性是根据它们的反应依赖项来缓存的。只有当相关的反应依赖项发生变化时，它们才会被重新评估。但是我们可以为计算中的值赋予它一个setter属性。本以为设置setter可以直接改变原来的变量，但是结果并没有改变。官方文档中给出的setter也会改变其他变量的值。最后，我想到了一个解决方法。我在数据中声明了另一个content1。当输入框发生变化时，会触发计算属性的setter，从而改变content1的值。完整代码如下：data(){return{data1:'',data2:'',data3:'',data4:'',content1:''}},computed:{content:{get:function(){letval=`${this.data1}${this.data2}${this.data3}${this.data4}`这个.content1=valreturnval},set:function(v){this.content1=vreturnv}}},
