[JavaScript知识库]vue 自动保存

vue 自动保存

<template>
	<div>
    	<el-form :model="dataForm">
    		<el-input size="mini" v-model="dataForm.budgetprojectname"></el-input>
    	</el-form>
    </div>
</template>

<script>
	export default {
		data () {
			return {
				dataForm: {},
				timeID:null,  //  定时器
		},
		watch: {
			dataForm:{
				handler(val, oldVal){
			        this.autoSave()
			      },
			      deep:true //true 深度监听
			}
		},
		methods: {
			/**
			*		为防止监听时   多次发送请求   使用防抖/节流
			*		防抖:    将多次执行变为最后一次执行
			*		节流:   将多次执行变为每隔一段时间执行
			*/    
		    autoSave(val, oldVal){
		      if(this.timeID){    
		        clearTimeout(this.timeID)   //   清除定时器 
		      }
		        this.timeID=setTimeout(()=>{     //   定时器
		          console.log('防抖');
		          this.RealTime()   
		        },30000)     //   操作结束后30秒  发送axios请求
		    },
		    // 自动保存
    		RealTime(){
    			//   发送axios请求
    		}
		}
	}
</script>