Ant Design Vue DatePicker 报错

Ant Design Vue DatePicker 报错「这是我参与11月更文挑战的第9天,活动详情查看:2021最后一次更文挑战」 在前端页面开发过程中,用到了vue+Ant Design Vue 两个框架,在使用Ant Design Vue UI框架的

「这是我参与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 转换它,这样才能让它是响应的。

今天的文章Ant Design Vue DatePicker 报错分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/19584.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注