Vueæ¯ä¸ä¸ªåºäºMVVM模å¼æ°æ®é©±å¨é¡µé¢çæ¡æ¶ï¼å®å°æ°æ®ç»å®å¨è§å¾ä¸ãå±äºå®ç°å页é¢åºç¨çææ¯ã
é¦å
ï¼vuejså¨å®ä¾åçè¿ç¨ä¸ï¼ä¼å¯¹å®ä¾å对象é项ä¸çdata
é项è¿è¡éåï¼éåå
¶ææå±æ§å¹¶ä½¿ç¨ Object.defineProperty æè¿äºå±æ§å
¨é¨è½¬ä¸º getter/setterãåæ¶æ¯ä¸ä¸ªå®ä¾å¯¹è±¡é½æä¸ä¸ªwatcherå®ä¾å¯¹è±¡ï¼ä»ä¼å¨æ¨¡æ¿ç¼è¯çè¿ç¨ä¸,ç¨getterå»è®¿é®dataçå±æ§ï¼watcheræ¤æ¶å°±ä¼æç¨å°çdataå±æ§è®°ä¸ºä¾èµï¼è¿æ ·å°±å»ºç«äºè§å¾ä¸æ°æ®ä¹é´çèç³»ãå½ä¹åæ们渲æè§å¾çæ°æ®ä¾èµåçæ¹åï¼å³æ°æ®çsetter被è°ç¨ï¼çæ¶åï¼watcherä¼å¯¹æ¯åå两个çæ°å¼æ¯å¦åçååï¼ç¶åç¡®å®æ¯å¦éç¥è§å¾è¿è¡éæ°æ¸²æè¿æ ·å°±å®ç°äºæè°çæ°æ®å¯¹äºè§å¾ç驱å¨ãéä¿å°è®²ï¼å®æå³çæ们å¨æ®é
HTML 模æ¿ä¸ä½¿ç¨ç¹æ®çè¯æ³å° DOM âç»å®âå°åºå±æ°æ®ãä¸æ¦å建äºç»å®ï¼DOM å°ä¸æ°æ®ä¿æåæ¥ãæ¯å½ä¿®æ¹äºæ°æ®ï¼DOM 便ç¸åºå°æ´æ°ãè¿æ ·æ们åºç¨ä¸çé»è¾å°±å ä¹é½æ¯ç´æ¥ä¿®æ¹æ°æ®äºï¼ä¸å¿
ä¸ DOM æ´æ°æ
å¨ä¸èµ·ãè¿è®©æ们ç代ç æ´å®¹ææ°åãç解ä¸ç»´æ¤ã
Vue.jsçæ°æ®é©±å¨å°±æ¯éè¿MVVMè¿ç§æ¡æ¶æ¥å®ç°çãMVVMæ¡æ¶ä¸»è¦å
å«3个é¨å:modelãviewå viewmodelã
Model:æçæ¯æ°æ®é¨åï¼å¯¹åºå°å端ç¸å½äºjavascript对象
View:æçæ¯è§å¾é¨åï¼å¯¹åºå端ç¸å½äºdom
Viewmodel:å°±æ¯è¿æ¥è§å¾ä¸æ°æ®çä¸é´ä»¶é讯
æ°æ®(Model)åè§å¾(View)æ¯ä¸è½ç´æ¥é讯çï¼èæ¯éè¦éè¿ViewModelæ¥å®ç°åæ¹çé讯ãå½æ°æ®ååçæ¶åï¼viewModelè½å¤çå¬å°è¿ç§ååï¼å¹¶åæ¶çéç¥viewååºä¿®æ¹ãåæ ·çï¼å½é¡µé¢æäºä»¶è§¦åæ¶ï¼viewMOdelä¹è½å¤çå¬å°äºä»¶ï¼å¹¶éç¥modelè¿è¡ååºãViewmodelå°±ç¸å½äºä¸ä¸ªè§å¯è
ï¼çæ§çåæ¹çå¨ä½ï¼å¹¶åæ¶éç¥å¯¹æ¹è¿è¡ç¸åºçæä½ã
温馨提示:答案为网友推荐,仅供参考