Ant Design Vue DatePicker 報錯

語言: CN / TW / HK

「這是我參與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 轉換它,這樣才能讓它是響應的。