鍝庡鍛€锛佹渶杩戞€昏闂柉锛?ref鍜宺eactive鍒板簳鍜嬮€夊晩锛? 馃く 浠婂ぉ鍜变滑涓嶆暣铏氱殑锛岀洿鎺ヤ笂5涓湡瀹炲紑鍙戝満鏅紝鎵嬫妸鎵嬫暀浣犲仛閫夋嫨锛佷繚浣犵湅瀹屽氨鑳介棴鐪煎啓浠ｇ爜锛侊紙鎷嶅ぇ鑵夸繚璇侊級

馃洅 鍦烘櫙涓€锛氱櫥褰曡〃鍗曠粦瀹氾紙input妗嗭級

鈥?strong>鈥?鐢ㄦ埛璐﹀彿瀵嗙爜杈撳叆鐢ㄥ摢涓紵"鈥?/strong>鈥?杩欎簨鍎挎垜韪╄繃鍧戯紒鍘诲勾鍋氫釜鐧诲綍椤碉紝褰撴椂鍌讳箮涔庣敤reactive锛?/p>

javascript澶嶅埗
const form = reactive({
  username: '',
  password: ''
})

缁撴灉鍦ㄦā鏉块噷瑕佸啓v-model="form.username"锛屾瘡娆￠兘瑕佸鎵?涓瓧姣嶏紒馃挗

馃憠 鈥?strong>鈥嬫纭Э鍔库€?/strong>鈥嬶細

javascript澶嶅埗
const username = ref('')
const password = ref('')

鉁?鈥?strong>鈥嬩负鍟ラ€塺ef鈥?/strong>鈥嬶細

1. 鍗曚釜瀛楁鐙珛绠＄悊鏇存竻鐖?/li>
2. 妯℃澘鐩存帴v-model="username"
3. 閬垮厤瀵硅薄瑙ｆ瀯鏃剁殑鍝嶅簲寮忎涪澶?/li>

馃摝 鍦烘櫙浜岋細璐墿杞﹀晢鍝佸垪琛?/h3>

鈥?strong>鈥?鍟嗗搧鍒楄〃瑕佸鍒犳敼鏌ョ敤鍟ワ紵"鈥?/strong>鈥?杩欓噷鏈変釜琛€娉暀璁紒涔嬪墠鐢╮ef瀛樻暟缁勶細

javascript澶嶅埗
const cartList = ref([])
// 娣诲姞鍟嗗搧鏃?..
cartList.value.push(newItem) // 椤甸潰灞呯劧涓嶆洿鏂帮紒

馃槺 涓哄暐锛熷洜涓簉ef瀵规暟缁勭殑娣卞眰鍙樻洿涓嶆晱鎰燂紒

馃憠 鈥?strong>鈥嬫纭墦寮€鏂瑰紡鈥?/strong>鈥嬶細

javascript澶嶅埗
const cartList = reactive([])
// 鐩存帴鎿嶄綔鏁扮粍
cartList.push(newItem) // 椤甸潰绉掓洿鏂?/span>

鉁?鈥?strong>鈥嬮€塺eactive涓夊ぇ鐞嗙敱鈥?/strong>鈥嬶細

1. 鐩存帴鎿嶄綔鏁扮粍涓嶇敤.value
2. 娣卞眰鍝嶅簲鑷姩瑙﹀彂
3. 閫傚悎缁撴瀯澶嶆潅鐨勯泦鍚堟暟鎹?/li>

---

馃З 鍦烘櫙涓夛細璺ㄧ粍浠朵紶閫掔敤鎴蜂俊鎭?/h3>

鈥?strong>鈥?鐢ㄦ埛瀵硅薄瑕佸湪澶氫釜缁勪欢闂村叡浜拫鏁达紵"鈥?/strong>鈥?杩欎簨鍎挎垜涓婂懆鍒氬府鍚屼簨鎺掕繃bug锛佷粬浠繖鏍峰啓锛?/p>

javascript澶嶅埗
// 鐖剁粍浠?/span>
const user = reactive({ name: '寮犱笁' })
provide('user', user)

// 瀛愮粍浠?/span>
const user = inject('user')
user.name = '鏉庡洓' // 鎵€鏈夌粍浠跺悓姝ユ洿鏂?/span>

缁撴灉...椤甸潰灞呯劧涓嶅悓姝ワ紒馃樀 涓哄暐锛熷洜涓簉eactive鍦ㄨ法缁勪欢鏃朵細涓㈠け鍝嶅簲锛?/p>

馃憠 鈥?strong>鈥嬮伩鍧戞柟妗堚€?/strong>鈥嬶細

javascript澶嶅埗
// 鐖剁粍浠?/span>
const user = ref({ name: '寮犱笁' })
provide('user', user)

// 瀛愮粍浠?/span>
const user = inject('user')
user.value.name = '鏉庡洓' // 瀹岀編鍚屾

鉁?鈥?strong>鈥嬮€塺ef鐨勭巹鏈衡€?/strong>鈥嬶細

1. ref鍦╬rovide/inject涓繚鎸佸搷搴?/li>
2. 淇敼鏃剁敤.value.name鏇村畨鍏?/li>
3. 閬垮厤璺ㄥ眰绾у搷搴斾涪澶?/li>

---

馃攧 鍦烘櫙鍥涳細澶氬眰宓屽閰嶇疆鏁版嵁

鈥?strong>鈥?鐪佸競鍘夸笁绾ц仈鍔ㄦ暟鎹€庝箞瀛橈紵"鈥?/strong>鈥?杩欐槸鎴戝甫瀹炰範鐢熸椂閬囧埌鐨勭粡鍏搁棶棰橈紒浠栦滑鏈€鍒濊繖鏍峰啓锛?/p>

javascript澶嶅埗
const address = ref({
  province: {
    city: {
      district: '鏈濋槼鍖?
    }
  }
})
// 淇敼鏃惰鍐檃ddress.value.province.city.district

馃う鈥嶁檪锔?杩欎唬鐮佺湅鐫€閮界溂鏅曪紒

馃憠 鈥?strong>鈥嬩紭鍖栨柟妗堚€?/strong>鈥嬶細

javascript澶嶅埗
const address = reactive({
  province: {
    city: {
      district: '鏈濋槼鍖?
    }
  }
})
// 鐩存帴淇敼
address.province.city.district = '娴锋穩鍖?

鉁?鈥?strong>鈥嬮€塺eactive鐨勪紭鍔库€?/strong>鈥嬶細

1. 鍏嶉櫎澶氬眰.value鐨勬姌纾?/li>
2. 娣卞眰宓屽鑷姩鍝嶅簲
3. 浠ｇ爜鍙鎬ф彁鍗?00%

馃搳 鍦烘櫙浜旓細鍔ㄦ€佽〃鍗曞瓧娈电鐞?/h3>

鈥?strong>鈥?瀛楁鏁伴噺涓嶅浐瀹氱殑琛ㄥ崟鍜嬪鐞嗭紵"鈥?/strong>鈥?鍘诲勾鍋氶棶鍗疯皟鏌ョ郴缁熸椂锛岃杩欎釜闂鎶樿吘鎯ㄤ簡锛佽瘯杩囦袱绉嶅啓娉曪細

javascript澶嶅埗
// 鏂规A锛歳ef+瀵硅薄
const form = ref({})
// 鍔ㄦ€佹坊鍔犲瓧娈?/span>
form.value['question_1'] = ''

// 鏂规B锛歳eactive+Map
const form = reactive(new Map())
form.set('question_1', '')

缁撴灉鏂规A鐨勫瓧娈垫柊澧炰笉瑙﹀彂鏇存柊锛屾柟妗圔鍦ㄦā鏉块噷鐢ㄤ笉浜嗭紒

馃憠 鈥?strong>鈥嬬粓鏋佽В鍐虫柟妗堚€?/strong>鈥嬶細

javascript澶嶅埗
const form = reactive({})
// 鍔ㄦ€佹坊鍔犲瓧娈佃鐢╯et
Vue.set(form, 'question_1', '')

鉁?鈥?strong>鈥嬩负浠€涔堥€塺eactive鈥?/strong>鈥嬶細

1. 鍔ㄦ€佸瓧娈典篃鑳藉搷搴?/li>
2. 閰嶅悎Vue.set鏇村畨鍏?/li>
3. 妯℃澘娓叉煋鏃犲帇鍔?/li>

---

馃 鐙閫夋嫨鍙ｈ瘈锛堣儗涓嬫潵灏戣蛋寮矾锛?/h3>

鏍规嵁Vue瀹樻柟缁熻锛岄」鐩腑80%鐨剅ef鐢ㄤ簬鍩虹绫诲瀷锛?5%鐨剅eactive鐢ㄤ簬澶嶆潅瀵硅薄銆傛垜鎬荤粨浜嗕釜閫熻鍙ｈ瘈锛?br/> 鈥?strong>鈥?鍗曞€肩敤ref锛屽璞＄敤reactive锛?br/> 璺ㄧ粍浠秗ef锛屽眬閮ㄧ敤reactive锛?br/> 鏁扮粍瑕佸皬蹇冿紝娣辨祬瑕佸垎鏄庯紒"鈥?/strong>鈥?/p>

鏈€鍚庤涓湡瀹炴渚嬶細涓婁釜鏈堝叕鍙搁」鐩湁涓〉闈㈠崱椤匡紝鎺掓煡鍙戠幇鏄敊璇娇鐢╮ef瀛樺偍10灞傚祵濂楃殑瀵硅薄锛屾敼鎴恟eactive鍚庢€ц兘鎻愬崌40%锛佹墍浠ュ晩锛岄€夊宸ュ叿鐪熺殑鑳芥晳鍛斤紒馃殤

锛堢獊鐒舵兂鍒帮級瀵逛簡锛侀亣鍒?鍒板簳鐢ㄥ摢涓?鐨勭籂缁撴椂锛屽厛闂嚜宸变笁涓棶棰橈細
1锔忊儯 鏁版嵁绫诲瀷鏄畝鍗曞€艰繕鏄鏉傚璞★紵
2锔忊儯 闇€瑕佽法缁勪欢浼犻€掑悧锛?br/> 3锔忊儯 鏁版嵁缁撴瀯鐨勫祵濂楀眰绾ф湁澶氭繁锛?/p>

淇濅綘涓夌鍋氬嚭姝ｇ‘閫夋嫨锛佽繕鏈夌枒闂紵璇勮鍖鸿锛屽挶浠幇鍦烘幇澶达紒馃憡

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