vue中开发的小tips（新手向）

本篇为本人在实习期中总结的小tips，因为本人为应届实习生，所以本文内容可能不够成熟，本文内容如有误导还请指正。

正文开始

        在开发过程中我们难免会遇到弹窗填写信息，需要使用v-model进行数据的绑定，之前我是这样写的

<template>
    <input type="number" v-model="amount"></input>
    <input type="name" v-model="name"></input>
    <button @click="sub">提交</button>
</template>
import Api from 'api'
export default{
		data(){
			return{
				amount:null,
                name:null,
			};
		},
		methods:{
        sub(){
            let data={
                name：this.name,
                amount：this.amount
               }
	        Api(data).then(res=>{
                //接口返回
            })
          }
		},
	}

        但是当需要的数据较多就会造成data的变量定义的过多的问题，就像

export default{
		data(){
			return{
				amount:null,//数量
                name:null,//名称
                price:null,//价格
                tel:null,//手机
                email:null,//邮箱
                date:null,//时间。。。。。。。
			};
		},
	}

坏处显而易见，所以我们可以使用对象的方式就可以变成，相信很多up都已讲过这个技巧，

<template>
    <input type="number" v-model="subData.amount"></input>
    <input type="name" v-model="subData.name"></input>
    <button @click="sub">提交</button>
</template>
import Api from 'api'
export default{
		data(){
			return{
				subData:{
                    amount:null,
                    name:null,
                }
			};
		},
		methods:{
        sub(){
	        Api(this.subData).then(res=>{
                //接口返回
            })
          }
		},
	}

这样我们只需定义一个变量就可以满足但弹窗多信息的操作，而且提交数据也不再需要对数据进行拼装，但是因为在vue2中无法使用es6的语法如{this.data}，但是我们可以使用{…this.data,a:1}这种方式，在vue3中我们可以用reactive和torefs同样实现响应式。

当然，绝对不止于此

        当我们伴随着添加页面，随之而来的就是编辑页面，页面的数据绑定对于新手的我来十个令人头疼的问题，但是使用对象的方式就可以解决

<template>
    <div v-if="show">
        <input type="number" v-model="subData.amount"></input>
        <input type="name" v-model="subData.name"></input>
        <button @click="sub">提交</button>
    </div>
</template>
export default{
		data(){
			return{
                show:false,
				subData:{}
			};
		},
		methods:{
        sub(){
//正常来说data是传过来的item
            let data = {
                    amount:1,
                    name:'小明',
                    tel:12121212121,
                    price:11,
                   }
            this.subData = {...data} 
            this.show = true
          }
		},
	}

因为浅拷贝的原因为了不影响原始数据我们要使用拓展运算符处理，这样还可以标准变量名，向后台传递也是数据库的字段名，于此同时就会产生一个问题，将剩余的无用信息一起传输了过去，我们可以在item赋值这一阶段对数据新型筛选，因为开发标准问题我是用的是立即执行函数代码如下

<template>
    <div v-if="show">
        <input type="number" v-model="subData.amount"></input>
        <input type="name" v-model="subData.name"></input>
        <button @click="sub">提交</button>
    </div>
</template>
export default{
		data(){
			return{
                show:false,
				subData:{}
			};
		},
		methods:{
        sub(){
//正常来说data是传过来的item
            let data = {
                    amount:1,
                    name:'小明',
                    tel:12121212121,
                    price:11,
                   }
            this.subData = (({amount,name})=>({amount,name}))(data)
            this.show = true
          }
		},
	}

这样我们就可以只赋值我们需要的数据。

最后，本文中的内容如有误导和错误的地方敬请指正，本文为我在实习中的第二篇文章，感谢阅读