Ant Design Vue DatePicker 报错

「这是我参与11月更文挑战的第9天，活动详情查看：2021最后一次更文挑战」

在前端页面开发过程中，用到了vue+Ant Design Vue 两个框架，在使用Ant Design Vue UI框架的时候，DatePicker组件在运行时抛出了一个错误，经过分析排查和验证，把经验分享给大家。

Warning: [antdv: DatePicker] value provides invalidate moment time. If you want to set empty value, use null instead.

1.vue更新dom的机制

Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。

简单来说，Vue 在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。

同步里执行的方法，每个方法里做的事情组成一个事件循环；接下来再次调用的是另一个事件循环。

2.vue数据视图更新

Vue是数据驱动视图（数据的变化将引起视图的变化），但你发现某个数据改变时，视图是局部刷新而不是整个重新渲染，那就需要拿到数据改变前后的dom结构，找到差异点并进行更新！虚拟dom实质上是针对真实dom提炼出的简单对象。对真实dom直接操作将大大影响性能！

1.vue数据更新的js操作方法1

nextTick：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，会获取更新后的 DOM。所以对于我们上面的问题解决不是很完美，因为需要DOM更新才能执行的操作，

//这样可以，nextTick里面的代码会在DOM更新后执行
Vue.nextTick(function(){
    console.log(vm.$el.textContent) //可以得到'changed'
})

1.vue数据更新的js操作方法2

当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。而我们今天的问题核心也就是因为属性变更而没有引起组件DatePicker的更新，所以，最好的解决方案就是 $set

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。

//然而它可以使用 Vue.set(object, key, value)

Vue.set(vm.obj, 'e', 0)
//或
this.$set(this.student,"age", 24)

受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。