记录一下自己常用的代码，偶尔拿出来看看，如有不对的地方或可以完善的地方可以及时提出意见，感谢观看！
场景：相信很多人在使用elementui时间组件以及其他情况下，有时候无法实时更新视图，比如选择完时间后组件上的时间并未改变，此时就可以使用this.$set去更新视图。
准备工作：既然学习vue，那使用vue API的时候就不能离开vue本身，我们先来看看官网是怎么说$set的
官网的说明是比较简洁的，对于大佬来说是很容易看明白的，但对于刚入门以及初学者来说还是需要有人去说明的，在此解释一下：
- target：要更改的
数据源(可以是对象或者数组) - propertyName/index：可以理解为要更改的
具体数据 - value：
重新赋的值
可以看到$set是全局Vue.set的别名，参考Vue.set(附上官网链接：Vue.set)
官网给出的解释是：
向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的新增 property (比如
this.myObject.newProperty = 'hi')
不能理解的话可以先看看如何去使用，再结合官网去理解这段话。
案例（element的dateTimePicker日期时间选择器）：
注意：个人认为暂时没有好的案例，此代码本人在编辑器直接手写，如出错可在评论区及时提出问题，我会及时纠正错误，毕竟学的是思想而不是cv大法。（不靠软件提示和看运行结果去盲写代码是另一种锻炼）
基本结构：
<template>
<div>
<el-form :model="form">
<el-form-item>
<el-date-picker
v-model="form.value"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data(){
form:{
value:[],
start_at:'',
end_at:''
}
}
}
</script>
我遇到的情景是这样的：在上传时间戳的时候需要将value里的时间戳拿出来分开上传并且除以1000
<template>
<div>
<el-form :model="form">
<el-form-item>
<el-date-picker
v-model="form.value"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data(){
form:{
value:[],
start_at:'',
end_at:''
}
},
method:{
upload(){
// 此代码不做校验判别,并且只是为了说明$set的用处而简写
this.form.start_at=this.form.value[0]/1000
this.form.end_at=this.form.value[1]/1000
uploadApi(this.form).then(res=>{
// 此时上传成功返回后操作
})
}
}
}
</script>
上传成功后，我们要再去编辑更新这个时间会发现时间并不会改变，这时我们使用this.$set
<template>
<div>
<el-form :model="form">
<el-form-item>
<el-date-picker
v-model="form.value"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data(){
form:{
value:[],
start_at:'',
end_at:''
}
},
method:{
// 创建
upload(){
// 此代码不做校验判别,并且只是为了说明$set的用处而简写
this.form.start_at=this.form.value[0]/1000
this.form.end_at=this.form.value[1]/1000
uploadApi(this.form).then(res=>{
// 上传成功返回后操作
})
},
// 查看
search(){
// 外部传入id进行查看数据,返回date
searchApi(id).then(res=>{
this.form = res.data
// 之前上传的时候除以1000，现在要乘上1000
this.value[0] = this.form.start_at * 1000
this.value[1] = this.form.end_at * 1000
})
},
// 更新
update(){
// 本文章重点之一：$set用法
// 如果使用跟创建时一样的代码，视图是不会更新的，原因如下：
// 1、创建时组件改变的是绑定的value的值，value是展示出来的（初始时间为空）
// 2、start_at 以及 end_at 除以1000以后仅负责上传值的操作
// 3.1、我们更新的时候是需要 更新视图的！
// 3.2、如不使用$set，页面的数据值会一直绑定在查看出来的那个数据（初始时间为查看出来的时间）
this.$set(this.form,'start_at',this.form.value[0]/1000)
this.$set(this.form,'end_at',this.form.value[1]/1000)
updateApi().then(res=>{
// 更新成功返回后操作
})
}
}
}
</script>
this.$set的用法就简单讲解到这，前端小白的理解大概就是这样，望大佬看见我的文章多多点评并指出文章错误所在，谢谢！
