Vue 日期控件(el-date-picker)回显异常及其原理分析

女爷i 2022-12-03 09:09 337阅读 0赞

## Vue 日期控件(el-date-picker)回显异常及其原理分析 ##

最近在跟一个项目，项目用的element-ui + vue ，做一个新功能的时候，用element-ui的diolag作为一个弹出层，用于数据的新增以及修改，diolag中用了el-date-picker日期控件，首次选择新增完成后，不管是再次新增或者修改，重新选择日期回显都无法改变视图显示时间，但其value已经更新。

代码如下：

<el-date-picker v-model="rentalForm.rentSd"  type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" style="width:150px"/>
    // js 部分
    showRentail(row){
          if(row){
            this.rentalForm.rentSd = row.rentSd;
          }else{
            this.rentalForm.rentSd = '';
          }
          this.dialogRentalVisible = true;
          this.$nextTick(() => {
            this.$refs['rentalForm'].clearValidate();
          })
    }

数据确实会回显到日期框里，界面显示如下：例如：原日期为：2020-09-29

![在这里插入图片描述][20200902184758144.png_pic_center]

但是此时我点击日期框修改日期，例如：2020-09-09，日期框里面的值不会改变，其form对应value已更新为：2020-09-09，如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpcHNob3BfZmluX2Rldg_size_16_color_FFFFFF_t_70_pic_center]

而且就算在data里面定义初始值，日期框显示时间也不会改变。

查阅相关资料后，发现官网上有这么一段话：

> ***如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。***

也就是说，data中声明或者已经赋值过的对象或者对象数组时，想对象添加新的属性或者更改该属性的的值，Vue是不能检测到其属性的改变，而触发更新视图。  
追究其原因：受 ES5 的限制，Vue不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue转换它，才能让它是响应的。  
要处理这种情况，我们可以使用$set()方法，既可以新增属性,又可以触发视图更新。  
$set( target , key , value)

*  target: 要更改的数据源（可以是一个对象或者数组）
 *  key 要更改的具体数据 （索引）
 *  value 重新赋的值

即：

if(row){
       this.$set(this.rentalForm, "rentSd", row.rentSd);
    }else{
       this.$set(this.rentalForm, "rentSd", "");
    }

既然$set()能触发更新，那其原理是：

每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpcHNob3BfZmluX2Rldg_size_16_color_FFFFFF_t_70_pic_center 1]

看set方法源码（项目根目录vue\\node\_modules\\vue\\src\\core\\observer\\index）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpcHNob3BfZmluX2Rldg_size_16_color_FFFFFF_t_70_pic_center 2]

数组

这里直接调用了target.splice(key, 1, val)，在前面我们说过调用数组对象提供的push、pop等7个方法可以导致页面重新渲染，刚好splice也是其提供的7个方法中的一种

对象  
1、判断如果key本来就是对象中的一个属性，并且key不是Object原型上的属性。说明这个key本来就在对象上面已经定义过了的，直接修改值就可以了，可以自动触发响应。

![在这里插入图片描述][20200902185535198.png_pic_center]

vue是使用的Object.defineProperty给对象做了一层拦截，当触发get的时候就会进行依赖收集（这里收集的依赖还是像数组那样，理解成渲染函数），当触发set的时候就会触发依赖，导致渲染函数执行页面重新渲染。那么第一次是在哪里触发get的呢？其实是在首次加载页面渲染的时候触发的，这里会进行递归将对象的属性都依赖收集，所以我们修改对象已有属性值得时候会导致页面重新渲染

2、首先定义变量ob的值为 target.**ob** ，这个 **ob** 属性到底是什么对象呢？vue给响应式对象都加了一个 **ob** 属性，如果一个对象有这个 **ob** 属性，那么就说明这个对象是响应式对象，我们修改对象已有属性的时候就会触发页面渲染。但当这个对象是vue实例对象或者是根数据对象，就会抛出异常告警。当这个对象是非响应式的则直接赋值返回

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpcHNob3BfZmluX2Rldg_size_16_color_FFFFFF_t_70_pic_center 3]

3、Set最终处理响应式对象的地方，defineReactive(ob.value, key, val) 的意思是给新加的属性添加依赖，以后再直接修改这个新的属性的时候就会触发页面渲染；ob.dep.notify() 这句代码的意思是触发当前的依赖（这里的依赖依然可以理解成渲染函数），所以页面就会进行重新渲染。

![在这里插入图片描述][20200902185612465.png_pic_center]

**总结** ，以上主要是解决el-date-picker组件问题过程中，通过解决方法，了解其使用工作原理。在日常工作，我们可能会遇到各种奇奇怪怪的问题，但解决后，回过头来追溯一下其出现的根源，对于自身技术的提高都是有益无害。

[20200902184758144.png_pic_center]: /images/20221123/1aa24b7536f6421ebffed85b3eec4ee8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpcHNob3BfZmluX2Rldg_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/9cd76b85fc8f4b5b87de7deba08ef1f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpcHNob3BfZmluX2Rldg_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/09a5712c1aa4452bafe6977ca5b7bbf1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpcHNob3BfZmluX2Rldg_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/e3e46b313b12420f809fe1d779bb81e9.png
[20200902185535198.png_pic_center]: /images/20221123/ed8d8bf3a29543d99c99c1d3bd6e6169.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpcHNob3BfZmluX2Rldg_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/b195f076b3b34c77b5d9681ef61eac6c.png
[20200902185612465.png_pic_center]: /images/20221123/b8b568493013406cbe9faa5aae524557.png