資訊專欄INFORMATION COLUMN
之前，我發(fā)了一些關(guān)于HeyUI組件庫(kù)的一些文章，有些人建議我把開(kāi)發(fā)中遇到的問(wèn)題共享出來(lái)，這一篇算是一個(gè)嘗試，看大家反饋，會(huì)有更多的開(kāi)發(fā)知識(shí)共享。
首先，這一篇，說(shuō)的是vue開(kāi)發(fā)中的“深坑”，并不是有一些文章寫的“vue安裝失敗，模塊找不到，或者vue-router如何定義”等等基礎(chǔ)錯(cuò)誤。
然后，這一篇需要閱讀者對(duì)vue有著基本的了解，并且使用過(guò)，如果你對(duì)vue還不懂，建議先收藏，以后再看。
HeyUI如果對(duì)我們組件庫(kù)不熟悉的小伙伴可以參見(jiàn)我們官網(wǎng)：
heyui.top
或者圍觀我們的github:
github.com/heyui/heyui
這一篇主要說(shuō)的是vue使用中遇到的常見(jiàn)并且很難解決的錯(cuò)誤，有可能系統(tǒng)沒(méi)有報(bào)錯(cuò)，但是我們就是找不到原因。
問(wèn)題一、數(shù)據(jù)修改了，但是界面仍然沒(méi)有更新
a:{{value.a}}
b:{{value.b}}
如上圖所示，執(zhí)行結(jié)果是：
直接點(diǎn)擊change a value是無(wú)效的。
先點(diǎn)擊change a value無(wú)效后，再點(diǎn)擊change a value use $set也會(huì)無(wú)效。
點(diǎn)擊change a value use $set有效，并且點(diǎn)擊過(guò)后，點(diǎn)擊change a value又有效了
點(diǎn)擊change value后，點(diǎn)擊change a value又有效了
點(diǎn)擊change b value一直有效
大家應(yīng)該注意以下事項(xiàng)由于在data下直接定義的對(duì)象，添加屬性是不會(huì)監(jiān)聽(tīng)的，比如說(shuō)value.a在data中其實(shí)未定義，你只有通過(guò)$set的方式通知vue才能夠完成屬性賦值并更新視圖。
如果對(duì)定義的對(duì)象直接進(jìn)行屬性添加，會(huì)導(dǎo)致$set也會(huì)失效。
如果本身data下面的對(duì)象的屬性已經(jīng)定義了，對(duì)于對(duì)象屬性的變更是能夠被監(jiān)聽(tīng)的，比如說(shuō)value.b，你可以直接通過(guò)修改b的值來(lái)更新視圖。
最后一個(gè)changeValue方法，是對(duì)vue data下的直接屬性進(jìn)行修改，是能夠被整個(gè)監(jiān)聽(tīng)到，并且更新屬于value下所有子屬性的視圖。
在線demo： https://codepen.io/vvpvvp/pen/XYvxMg?editors=1010
這個(gè)主要問(wèn)題是，我們開(kāi)發(fā)很少用到$set，所以也很少遇到問(wèn)題，但是新手成員經(jīng)常干這種事，還一臉懵逼的問(wèn)題，是不是vue有問(wèn)題了?
繼續(xù)，關(guān)于如何優(yōu)化自己的代碼，防止出現(xiàn)這種問(wèn)題，往下看開(kāi)發(fā)注意事項(xiàng)
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/96235.html
摘要：在實(shí)際開(kāi)發(fā)項(xiàng)目中，有時(shí)我們會(huì)用到自定義按鈕因?yàn)橐粋€(gè)項(xiàng)目中，眾多的頁(yè)面，為了統(tǒng)一風(fēng)格，我們會(huì)重復(fù)用到很多相同或相似的按鈕，這時(shí)候，自定義按鈕組件就派上了大用場(chǎng)，我們把定義好的按鈕組件導(dǎo)出，在全局引用，就可以在其他組件隨意使用啦，這樣可以大幅度 在實(shí)際開(kāi)發(fā)項(xiàng)目中，有時(shí)我們會(huì)用到自定義按鈕；因?yàn)橐粋€(gè)項(xiàng)目中，眾多的頁(yè)面，為了統(tǒng)一風(fēng)格，我們會(huì)重復(fù)用到很多相同或相似的按鈕，這時(shí)候，自定義按鈕組件就...
摘要：代碼整潔之道整潔的代碼不僅僅是讓人看起來(lái)舒服，更重要的是遵循一些規(guī)范能夠讓你的代碼更容易維護(hù)，同時(shí)降低幾率。另外這不是強(qiáng)制的代碼規(guī)范，就像原文中說(shuō)的，。里式替換原則父類和子類應(yīng)該可以被交換使用而不會(huì)出錯(cuò)。注釋好的代碼是自解釋的。 JavaScript代碼整潔之道 整潔的代碼不僅僅是讓人看起來(lái)舒服，更重要的是遵循一些規(guī)范能夠讓你的代碼更容易維護(hù)，同時(shí)降低bug幾率。 原文clean-c...
摘要：接著我之前寫的一篇有關(guān)前端面試題的總結(jié)，分享幾道比較經(jīng)典的題目第一題考點(diǎn)作用域，運(yùn)算符栗子都會(huì)進(jìn)行運(yùn)算，但是最后之后輸出最后一個(gè)也就是那么其實(shí)就是而且是個(gè)匿名函數(shù)，也就是屬于，就輸出第二和第三個(gè)都是類似的，而且作用域是都是輸出最后一個(gè)其實(shí)就 接著我之前寫的一篇有關(guān)前端面試題的總結(jié)，分享幾道比較經(jīng)典的題目： 第一題： showImg(https://segmentfault.com/im...
對(duì)比內(nèi)容UCloudStackZStackVMwareQingCloud騰訊TStack華為云Stack優(yōu)勢(shì)總結(jié)?基于公有云自主可控?公有云架構(gòu)私有化部署?輕量化/輕運(yùn)維/易用性好?政府行業(yè)可復(fù)制案例輕量化 IaaS 虛擬化平臺(tái)?輕量化、產(chǎn)品成熟度高?業(yè)內(nèi)好評(píng)度高?功能豐富、交付部署快?中小企業(yè)案例多全套虛擬產(chǎn)品及云平臺(tái)產(chǎn)品?完整生態(tài)鏈、技術(shù)成熟?比較全面且健全的渠道?產(chǎn)品成熟度被市場(chǎng)認(rèn)可，市場(chǎng)占...
摘要：能跨平臺(tái)地設(shè)置及使用環(huán)境變量讓這一切變得簡(jiǎn)單，不同平臺(tái)使用唯一指令，無(wú)需擔(dān)心跨平臺(tái)問(wèn)題安裝方式改寫使用了環(huán)境變量的常見(jiàn)如在腳本多是里這么配置運(yùn)行，這樣便設(shè)置成功，無(wú)需擔(dān)心跨平臺(tái)問(wèn)題關(guān)于跨平臺(tái)兼容，有幾點(diǎn)注意 cross-env能跨平臺(tái)地設(shè)置及使用環(huán)境變量, cross-env讓這一切變得簡(jiǎn)單，不同平臺(tái)使用唯一指令，無(wú)需擔(dān)心跨平臺(tái)問(wèn)題 1、npm安裝方式 npm i --save-de...
摘要：引入的模塊引入的使用將打包打包的拆分將一部分抽離出來(lái)物理地址拼接優(yōu)化打包速度壓縮代碼，這里使用的是，同樣在的里面添加 const path = require(path); //引入node的path模塊const webpack = require(webpack); //引入的webpack,使用lodashconst HtmlWebpackPlugin = require(ht...
閱讀 2757·2021-10-26 09:50
閱讀 2402·2021-10-11 11:08
閱讀 2139·2019-08-30 15:53
閱讀 1915·2019-08-30 15:44
閱讀 2391·2019-08-28 18:12
閱讀 2533·2019-08-26 13:59
閱讀 2862·2019-08-26 12:19
閱讀 2762·2019-08-26 12:09
