1. 主页 > 小妙招

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>

  1. 鎷掔粷鍗曞瓧姣嶅懡鍚嶏紙闄ら潪鏄痜or寰幆閲岀殑涓存椂鍙橀噺锛?/li>
  2. 甯冨皵鍊肩敤is/has/can寮€澶达紙姣斿isLoading锛?/li>
  3. 鏁扮粍鐢ㄥ鏁板舰寮忥紙姣斿userList锛?/li>
  4. 浜嬩欢澶勭悊鍑芥暟鐢╤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>

  1. 鐩存帴淇敼鏁扮粍绱㈠紩锛坅rr[0]=newValue锛?/li>
  2. 鐩存帴淇敼瀵硅薄灞炴€э紙obj.newProp=value锛?/li>
  3. 鍦ㄥ紓姝ュ洖璋冮噷鐩存帴璧嬪€?/li>
  4. 鍦╲-for閲岀敤index褰搆ey
  5. 鎶妏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>

propsdata
鏁版嵁鏉ユ簮鐖剁粍浠朵紶閫?/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璇硶绯栫‘瀹炴柟渚匡紝浣嗘柊鎵嬪缓璁厛鐢ㄦ爣鍑嗗啓娉曪紝鎶婂師鐞嗗悆閫忎簡鍐嶇敤楂樼骇鐗规€с€傚氨鍍忓鍋氳彍锛岃繛鐏€欓兘鎺屾彙涓嶅ソ灏卞幓鐜╁垎瀛愭枡鐞嗭紝杩熸棭瑕佺炕杞︼紒

本文由嘻道妙招独家原创,未经允许,严禁转载