Vue组件开发:变量定义规范与常见误区
鍒氬Vue鐨勫皬鐧芥槸涓嶆槸缁忓父閬囧埌杩欑鎯呭喌锛燄煠?鏄庢槑鐓х潃鏁欑▼鍐欑殑浠g爜锛岄〉闈㈡娲讳笉鏇存柊鏁版嵁锛佸悓浜嬭浣犵殑鍙橀噺瀹氫箟鏈夐棶棰橈紝鍙埌搴曞摢閲屽嚭閿欎簡锛熶粖澶╁挶浠氨鎺板紑鎻夌璁茶杩欎釜浜嬶紝淇濆噯浣犵湅瀹屽氨鑳介伩寮€80%鐨勫潙锛侊紙鎷嶈兏鑴繚璇侊級
涓€銆佸彉閲忓埌搴曡鏀惧摢鍎匡紵
鏂版墜鏈€瀹规槗鐘殑杩风硦灏辨槸锛氳繖涓彉閲忚鏀綿ata閲岋紵杩樻槸鐩存帴鍐欑粍浠堕噷锛熶笂鍛ㄥ甫瀹炰範鐢燂紝鍙戠幇浠栧眳鐒跺湪methods閲屽畾涔夊彉閲忥紒杩欏氨濂芥瘮鎶婂啺绠卞綋寰尝鐐夌敤鍟?..
鈥?strong>鈥嬩笁澶у瓨鏀句綅缃鐓ц〃鈥?/strong>鈥?/p>
浣嶇疆 | 閫傚悎鍦烘櫙 | 鐢熷懡鍛ㄦ湡 |
---|---|---|
data鍑芥暟 | 缁勪欢鍐呴儴鐘舵€?/td> | 缁勪欢閿€姣佹椂娑堝け |
props | 鐖剁粍浠朵紶鏉ョ殑鏁版嵁 | 闅忕埗缁勪欢鏇存柊 |
computed | 渚濊禆鍏朵粬鍊艰绠楃殑鍔ㄦ€佹暟鎹?/td> | 鑷姩鏇存柊 |
涓句釜鐪熷疄妗堜緥锛氱敤鎴蜂俊鎭睍绀虹粍浠?/p>
javascript澶嶅埗// 閿欒绀鸿寖锛?/span> export default { created() { this.userAge = 25 // 杩欑鍙橀噺涓嶄細瑙﹀彂瑙嗗浘鏇存柊锛?/span> } } // 姝g‘濮垮娍 export default { data() { return { userAge: 25 // 蹇呴』鏀惧湪data閲?/span> } } }
浜屻€佸懡鍚嶈鑼冭鑰佸懡锛?/h3>
鏈夊鍛橀棶鎴戯細"鍙橀噺鍚嶉殢渚胯捣涓嶈鍚楋紵" 鍘诲勾鎺ユ墜涓€侀」鐩紝婊″睆鐨刟銆乥銆乧鍙橀噺鍚嶏紝鐪嬪緱鎴戝樊鐐瑰綋鍦哄幓涓?..
鈥?strong>鈥嬪懡鍚嶉伩闆锋寚鍗椻€?/strong>鈥?/p>
- 鎷掔粷鍗曞瓧姣嶅懡鍚嶏紙闄ら潪鏄痜or寰幆閲岀殑涓存椂鍙橀噺锛?/li>
- 甯冨皵鍊肩敤is/has/can寮€澶达紙姣斿isLoading锛?/li>
- 鏁扮粍鐢ㄥ鏁板舰寮忥紙姣斿userList锛?/li>
- 浜嬩欢澶勭悊鍑芥暟鐢╤andle寮€澶达紙姣斿handleSubmit锛?/li>
鈥?strong>鈥嬪ソ鍧忓懡鍚嶅姣斺€?/strong>鈥?/p>
javascript澶嶅埗// 鐑傚懡鍚?/span> let d = 10 // 楝肩煡閬揹鏄暐 let f = false // 杩欎釜f瑕佽〃杈句粈涔堬紵 // 濂藉懡鍚?/span> const MAX_RETRY_COUNT = 3 const hasPermission = true
涓夈€佸搷搴斿紡澶辨晥鍜嬪洖浜嬶紵
杩欎釜闂琚棶浜嗗叓鐧鹃亶锛佷笂鍛ㄦ湁涓鍛樺摥鐫€璇达細"鎴戠殑鏁扮粍鏇存柊浜嗛〉闈㈠氨鏄笉娓叉煋锛? 涓€鏌ヤ唬鐮侊紝濂藉浼欑洿鎺ラ€氳繃绱㈠紩鏀规暟缁?..
鈥?strong>鈥嬩簲澶т綔姝绘搷浣滄竻鍗曗€?/strong>鈥?/p>
- 鐩存帴淇敼鏁扮粍绱㈠紩锛坅rr[0]=newValue锛?/li>
- 鐩存帴淇敼瀵硅薄灞炴€э紙obj.newProp=value锛?/li>
- 鍦ㄥ紓姝ュ洖璋冮噷鐩存帴璧嬪€?/li>
- 鍦╲-for閲岀敤index褰搆ey
- 鎶妏rops鐩存帴褰撳眬閮ㄥ彉閲忎慨鏀?/li>
鈥?strong>鈥嬫纭В鍐虫柟妗堚€?/strong>鈥?/p>
javascript澶嶅埗// 鏁扮粍鏇存柊瑕佽繖鏍?/span> this.$set(this.list, index, newValue) // 鎴栬€?/span> this.list.splice(index, 1, newValue) // 瀵硅薄鏂板灞炴€у繀椤荤敤set this.$set(this.obj, 'newKey', 'value')
鍥涖€乸rops鍜宒ata鍌诲偦鍒嗕笉娓咃紵
杩欎釜闂绠€鐩村儚鐜勫锛佸墠闃靛瓙甯汉鎺掓煡bug锛屽彂鐜颁粬鎶婁粠鐖剁粍浠朵紶鏉ョ殑props鐩存帴褰揹ata鐢紝缁撴灉鏁版嵁涔辨垚涓€閿呯播...
鈥?strong>鈥嬫牳蹇冨尯鍒鐓ц〃鈥?/strong>鈥?/p>
props | data | |
---|---|---|
鏁版嵁鏉ユ簮 | 鐖剁粍浠朵紶閫?/td> | 缁勪欢鑷韩缁存姢 |
鏄惁鍙彉 | 涓嶅彲鐩存帴淇敼 | 鍙互淇敼 |
浣跨敤鍦烘櫙 | 缁勪欢閫氫俊 | 鍐呴儴鐘舵€佺鐞?/td> |
鍝嶅簲寮忔満鍒?/td> | 鐖剁粍浠舵洿鏂板垯鍚屾 | 鑷韩淇敼瑙﹀彂鏇存柊 |
鈥?strong>鈥嬪吀鍨嬮敊璇渚嬧€?/strong>鈥?/p>
javascript澶嶅埗export default { props: ['initialCount'], data() { return { count: this.initialCount // 杩欐牱鐖剁粍浠舵洿鏂版椂count涓嶄細鍙橈紒 } } }
灏忕紪瑙傜偣
骞蹭簡浜斿勾Vue寮€鍙戯紝瑙佽繃澶鍥犱负鍙橀噺瀹氫箟涓嶈鑼冨紩鍙戠殑琛€妗堛€傛湁涓」鐩洜涓哄懡鍚嶆贩涔憋紝鍚庢湡鏀逛釜鍔熻兘瑕佽姳涓夊ぉ鏃堕棿鐞嗘竻鍙橀噺鍏崇郴锛佹柊鎵嬫渶瀹规槗蹇界暐鐨勬槸锛氣€?strong>鈥嬪彉閲忓畾涔変笉浠呬粎鏄兘鐢ㄥ氨琛岋紝鏇磋鑰冭檻鍚庣画缁存姢鈥?/strong>鈥嬨€傞偅浜涘浘鐪佷簨鍐欑殑鐭彉閲忓悕锛屼笁涓湀鍚庤嚜宸遍兘鐪嬩笉鎳傘€?/p>
鏈€杩戝彂鐜颁釜瑙勫緥锛氶伒寰鑼冪殑鍥㈤槦锛岄」鐩凯浠i€熷害鑳藉揩30%浠ヤ笂銆傛墍浠ュ埆瀚岄夯鐑︼紝鐜板湪澶氳姳5鍒嗛挓瑙勮寖鍙橀噺锛屽皢鏉ヨ兘鐪?灏忔椂鏌ラ敊鏃堕棿锛佺壒鍒槸鍝嶅簲寮忛偅鍧楋紝涓€瀹氳鎸塚ue鐨勮鐭╂潵锛屽埆鎬绘兂鐫€璧版嵎寰勩€?/p>
瀵逛簡锛屾渶鍚庤涓喎鐭ヨ瘑锛歏ue3鐨剆etup璇硶绯栫‘瀹炴柟渚匡紝浣嗘柊鎵嬪缓璁厛鐢ㄦ爣鍑嗗啓娉曪紝鎶婂師鐞嗗悆閫忎簡鍐嶇敤楂樼骇鐗规€с€傚氨鍍忓鍋氳彍锛岃繛鐏€欓兘鎺屾彙涓嶅ソ灏卞幓鐜╁垎瀛愭枡鐞嗭紝杩熸棭瑕佺炕杞︼紒
本文由嘻道妙招独家原创,未经允许,严禁转载