vue使用注意事項總結

2021-09-25 15:46:14 字數 1224 閱讀 8946

一 、v-for的key繫結

先上文件

可以看到,如果對於key的繫結會造成一些bug,而且往往這些bug是我們沒有注意到的

例如如下**

v-for

="(item, key) in list"

:key

="key"

>

}div

>

官方demo是繫結的itemid ,但是在具體的開發場景中,可以沒有id或者可以繫結的值,之前預設都綁了key,如上,但是在開發過程中遇到bug,給各位復現

1. 先清空列表第二條text的值,然後刪除了第二條

2. 結果列表雖然少了乙個,但是現在的第二條,也就是之前的第三條,顯示不符合預期,也被清空了

原因:key值繫結沒有變化,vue的diff預設不會重新來計算key為1的的div,導致頁面渲染不符合預期

解決:key值的繫結盡量保持唯一性,比如組合加上id或者list的length

二、$refs

這個就比較簡單了,主要可能是頁面引用ref比較多,然後疏忽了,在使用this.$refs訪問時,不符合預期,原因是,頁面內同乙個ref重複了,這個vue不會丟擲錯誤之類的,而是將對應的dom引用放到乙個陣列裡面:

"aa"

>

<

/div>

正常情況下:

this

.$refs[

'aa'

]// 即可訪問object

"aa"

>

<

/div>

"aa"

>

<

/div>

這是有可能因為疏忽引起的

此時this

.$refs[

'aa'

]// array三、router 和 route的區別

3.1 router

vue的路由物件,可以理解為vue用來管理整個spa的路由例項

可以從上面看到,它記錄了router的掛載例項,整個路由的記錄等等資訊

Vue注意事項

從 vue loader 13.0.0,不能用 require 來引入 vue 檔案,因為 vue 檔案最終會被編譯成 es6 module。從 vue 2.2.0 後使用 require vue 會報錯,應使用 es6 module import 具體原因請參考 vue 更新說明 webpack2...

vue語法使用注意事項

stop 就是js中的event.stoppropagation 的縮寫,它是用來阻止冒泡的 prevent 就是js中event.preventdefault 的縮寫,它是用來阻止預設行為的 capture 捕獲事件和冒泡事件 預設 是兩種事件流,事件捕獲是從document到觸發事件的那個元素 ...

LCD使用注意事項

a.lcd使用注意事項 1.確保是在電源關閉的狀態下拔插線纜 2.對液晶屏進行固定安裝時,注意使整個液晶屏保持平整,避免外力導致液晶屏 彎曲 扭曲 3.一定要小心液晶屏的表面偏光片,避免被堅硬物體劃傷 決不能將堅硬物品置於液晶屏之上 4.如果水滴長時間滯留在液晶模組上,可能導致變色或出現汙斑,所以務...