需求：computed计算属性的应用一般会是几个互不影响的值计算，本次需求是多个值互相引用计算

效果图

注：computed多个值单独已用计算时，会报错，Vue computed 报错：Computed property was assigned to but it has no setter 解决办法就是 换一种写法，组件中定义的computed属性缺少setter,使用过computed 都应该知道，该错误提示通常发生在组件内为computed属性赋值的时候，如果没有显示的声明setter，控制台则会打印如上错误。那么顺着这个方向，继续排查错误,其次检查代码中是否有给num进行赋值，第一次检查，好像整个代码逻辑从未操作过num属性，怎么会涉及到给num赋值呢？ 不管怎么疑惑，错误的确发生了。继续定位对num属性的操作，直到我看到v-model=“num”。现在一切都解释得通了，正是v-model的双向绑定属性实现了对num 的赋值。解决办法通过上面的分析，错误及原因已经找到，怎么解决就比较简单了，只需在声明computed属性时显示的声明setter即可。

这种错误解决办法:https://blog.csdn.net/weixin_44670973/article/details/109074967

sumZongji() {
        return (
          Number(this.params.datizhi) + Number(this.zhengji) + Number(this.daji)
        )
      },

完整代码：

data(){
return{
      params: {
          jiaozhong: '',
          radio: '原稿',
          booknames: '',
          jiaozhong: '',
          daji: '',
        },
}
}
//计算属性
computed:{
 sumZongji() {
        return (
          Number(this.params.datizhi) + Number(this.zhengji) + Number(this.daji)
        )
      },
      zhengji: {
        get() {
          return (
            parseFloat(this.params.zhengzhong) +
            1 -
            parseFloat(this.params.zhengshi)
          )
        },
        set(s) {},
      },
      daji: {
        get() {
          return (
            parseFloat(this.params.dazhong) + 1 - parseFloat(this.params.dashi)
          )
        },
        set(v) {},
      },

}
//页面Dom
<el-row>
            <el-col :span="12">
              <el-form-item label="正始:">
                <el-input
                  v-model="params.zhengshi"
                  name="正始"
                  type="number"
                  placeholder="请输入"
                  min="1"
                  max="1000"
                  oninput="value=value.replace(/[^\d]/g,0)"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="正终:">
                <el-input
                  v-model="params.zhengzhong"
                  name="正终"
                  placeholder="请输入"
                  type="number"
                  min="1"
                  max="1000"
                  oninput="value=value.replace(/[^\d]/g,0)"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="答始:">
                <el-input
                  v-model="params.dashi"
                  name="答始"
                  placeholder="请输入"
                  type="number"
                  min="1"
                  max="1000"
                  oninput="value=value.replace(/[^\d]/g,0)"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="答终:">
                <el-input
                  v-model="params.dazhong"
                  name="答终"
                  placeholder="请输入"
                  type="number"
                  min="1"
                  max="1000"
                  oninput="value=value.replace(/[^\d]/g,0)"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="答题纸:">
                <el-input
                  v-model="params.datizhi"
                  name="答题纸"
                  placeholder="请输入"
                  type="number"
                  min="1"
                  max="1000"
                  oninput="value=value.replace(/[^\d]/g,0)"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div
          v-if="
            params.jiaozhong != '核红' &&
            params.jiaozhong != '其他' &&
            params.jiaozhong != '分项检查'
          "
          class="yeshu"
        >
          <el-row>
            <el-col :span="24">
              <el-form-item label="页数:"></el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="9">
              <el-form-item label="正计:">
                <el-input
                  v-model="zhengji"
                  disabled
                  type="number"
                  name="正计"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="答计:" label-width="50px">
                <el-input
                  v-model="daji"
                  type="number"
                  disabled
                  name="答计"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="总计:" label-width="50px">
                <el-input
                  v-model="sumZongji"
                  type="number"
                  disabled
                  name="总计"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

注意：如果不是使用this.$set动态添加属性值，这个属性值是可以添加上，但是不会作为响应式数据，也就是不会重新解析模板。

下面以例子来说明：

1、直接用this.propertyName添加属性（错误的写法）

App.vue

<template>
    <div>
         <img v-show="dataObj.isShowImg" src="./assets/logo.png"/>
         <hr>
         <button @click="showImage">点击切换显示图片</button>
    </div>
</template>

<script>

export default {
    name: "App",
    data: function(){
        return {
            dataObj: {
                name: "dataObj"
            }
        }
    },
    methods:{
        showImage: function(){
            this.dataObj.isShowImg = !this.dataObj.isShowImg;
            console.log(this)
        }
    }
}
</script>

效果如下图：

点击切换图片显示按钮，图片出不来！

通过控制台输出的组件实例对象，可以看出 isShowImg属性已经添加上，但是没有get和set方法！

2、使用this.$set动态添加属性值（正确）

App.vue

<template>
    <div>
         <img v-show="dataObj.isShowImg" src="./assets/logo.png"/>
         <hr>
         <button @click="showImage">点击切换显示图片</button>
    </div>
</template>

<script>

export default {
    name: "App",
    data: function(){
        return {
            dataObj: {
                name: "dataObj"
            }
        }
    },
    methods:{
        showImage: function(){
            let isShowImg = !this.dataObj.isShowImg;
            this.$set(this.dataObj, "isShowImg", isShowImg);
            console.log(this)
        }
    }
}
</script>

效果如下图：

点击切换按钮，可以来回切换显示图片

通过控制台输出的组件实例对象，可以看出 isShowImg属性已经添加上，也有get和set方法！

3、完美案例（通过判断对象身上有没有isShowImg属性，没有则通过this.$set动态添加，否则直接用this.propertyName修改属性值）

App.vue

<template>
    <div>
         <img v-show="dataObj.isShowImg" src="./assets/logo.png"/>
         <hr>
         <button @click="showImage">点击切换显示图片</button>
    </div>
</template>

<script>

export default {
    name: "App",
    data: function(){
        return {
            dataObj: {
                name: "dataObj"
            }
        }
    },
    methods:{
        showImage: function(){
            let isShowImg = !this.dataObj.isShowImg;
            if(Object.prototype.hasOwnProperty.call(this.dataObj, "isShowImg")){
                this.dataObj.isShowImg = isShowImg;
            }else{
                this.$set(this.dataObj, "isShowImg", isShowImg);
            }
            console.log(this)
        }
    }
}
</script>

<div id="app">
			<div>
				<h3>{{person.name}}</h3>
				<button type="button" @click="handleAdd">添加年龄</button>
			</div>
		</div>

		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			const app = new Vue({
				el:'#app',
				data:{
					person:{}
				},
				methods:{
					handleAdd(){
						this.person.name = 'ljx'
						//通过直接添加方法无法添加
					}
				}
			})
		</script>

解决办法

const app = new Vue({
				el:'#app',
				data:{
					person:{}
				},
				methods:{
					handleAdd(){
						
						// console.log(Vue.set); \
						//Vue.set(object,key,value)
						//this.$set(object,key,value)
						this.$set(this.person,'name','ljx')
						此处注意：可通过实例使用				this.$set(object,key,value)
									也可使用调用Vue  ：		Vue.$set(object,key,value)
					}
				}
			})

添加多个属性方法

this.person = Object.assign({},this.person,{
							age:55,
							height:1.99
						})