Vue ¡¾Ç°¶ËÃæÊÔÌâ¡¿

Ç°ÑÔ

¿´¿´ÃæÊÔÌ⣬ֻÊÇΪÁ˲驲¹È±£¬¿´¿´×Ô¼ºÄÇЩ·½Ã滹²»¶®¡£ÇмDz»ÒªÒÔΪ±³ÁËÃæÊÔÌ⣬¾ÍÍòÊ´ó¼ªÁË£¬×îºÃÊÇÀí½â±³ºóµÄÔ­Àí£¬ÕâÑùÃæÊÔµÄʱºò²ÅÄÜ٩٩¶ø̸¡£²»È»£¬ÉÔ΢ÓÐˮƽµÄÃæÊÔ¹ÙÒ»¿´¾ÍÄÜ¿´³ö£¬ÊÇ·ñÓÐÕæ²Åʵѧ»¹ÊǸպñ³ÖÐÁËÕâµÀÃæÊÔÌâ

 

¶ÔÓÚMVVMµÄÀí½â£¿

• MVVM ÊÇ Model-View-ViewModel µÄËõд¡£
• Model´ú±íÊý¾ÝÄ£ÐÍ£¬Ò²¿ÉÒÔÔÚModelÖж¨ÒåÊý¾ÝÐ޸ĺͲÙ×÷µÄÒµÎñÂß¼­¡£
• View ´ú±íUI ×é¼þ£¬Ëü¸ºÔð½«Êý¾ÝÄ£ÐÍת»¯³ÉUI Õ¹ÏÖ³öÀ´¡£
• ViewModel ¼àÌýÄ£ÐÍÊý¾ÝµÄ¸Ä±äºÍ¿ØÖÆÊÓͼÐÐΪ¡¢´¦ÀíÓû§½»»¥£¬¼òµ¥Àí½â¾ÍÊÇÒ»¸öͬ²½View ºÍ ModelµÄ¶ÔÏó£¬Á¬½ÓModelºÍView¡£
• ÔÚMVVM¼Ü¹¹Ï£¬View ºÍ Model Ö®¼ä²¢Ã»ÓÐÖ±½ÓµÄÁªÏµ£¬¶øÊÇͨ¹ýViewModel½øÐн»»¥£¬Model ºÍ ViewModel Ö®¼äµÄ½»»¥ÊÇË«ÏòµÄ£¬ Òò´ËView Êý¾ÝµÄ±ä»¯»áͬ²½µ½ModelÖУ¬¶øModel Êý¾ÝµÄ±ä»¯Ò²»áÁ¢¼´·´Ó¦µ½View ÉÏ¡£
• ViewModel ͨ¹ýË«ÏòÊý¾Ý°ó¶¨°Ñ View ²ãºÍ Model ²ãÁ¬½ÓÁËÆðÀ´£¬¶øView ºÍ Model Ö®¼äµÄͬ²½¹¤×÷ÍêÈ«ÊÇ×Ô¶¯µÄ£¬ÎÞÐèÈËΪ¸ÉÉ棬Òò´Ë¿ª·¢ÕßÖ»Ðè¹Ø×¢ÒµÎñÂß¼­£¬²»ÐèÒªÊÖ¶¯²Ù×÷DOM, ²»ÐèÒª¹Ø×¢Êý¾Ý״̬µÄͬ²½ÎÊÌ⣬¸´ÔÓµÄÊý¾Ý״̬ά»¤ÍêÈ«ÓÉ MVVM À´Í³Ò»¹ÜÀí¡£

• MVVMµÄÓÅȱµã?
  • Óŵã:
    • ·ÖÀëÊÓͼ£¨View£©ºÍÄ£ÐÍ£¨Model£©,½µµÍ´úÂëñîºÏ£¬Ìá¸ßÊÓͼ»òÕßÂß¼­µÄÖØÓÃÐÔ: ±ÈÈçÊÓͼ£¨View£©¿ÉÒÔ¶ÀÁ¢ÓÚModel±ä»¯ºÍÐ޸ģ¬Ò»¸öViewModel¿ÉÒ԰󶨲»Í¬µÄ"View"ÉÏ£¬µ±View±ä»¯µÄʱºòModel²»¿ÉÒÔ²»±ä£¬µ±Model±ä»¯µÄʱºòViewÒ²¿ÉÒÔ²»±ä¡£Äã¿ÉÒÔ°ÑһЩÊÓͼÂß¼­·ÅÔÚÒ»¸öViewModelÀïÃ棬ÈúܶàviewÖØÓÃÕâ¶ÎÊÓͼÂß¼­
    • Ìá¸ß¿É²âÊÔÐÔ: ViewModelµÄ´æÔÚ¿ÉÒÔ°ïÖú¿ª·¢Õ߸üºÃµØ±àд²âÊÔ´úÂë
    • ×Ô¶¯¸üÐÂdom: ÀûÓÃË«Ïò°ó¶¨,Êý¾Ý¸üкóÊÓͼ×Ô¶¯¸üÐÂ,Èÿª·¢Õß´Ó·±ËöµÄÊÖ¶¯domÖнâ·Å
  • ȱµã:
    • BugºÜÄѱ»µ÷ÊÔ: ÒòΪʹÓÃË«Ïò°ó¶¨µÄģʽ£¬µ±Äã¿´µ½½çÃæÒì³£ÁË£¬ÓпÉÄÜÊÇÄãViewµÄ´úÂëÓÐBug£¬Ò²¿ÉÄÜÊÇModelµÄ´úÂëÓÐÎÊÌâ¡£Êý¾Ý°ó¶¨Ê¹µÃÒ»¸öλÖõÄBug±»¿ìËÙ´«µÝµ½±ðµÄλÖã¬Òª¶¨Î»Ô­Ê¼³öÎÊÌâµÄµØ·½¾Í±äµÃ²»ÄÇôÈÝÒ×ÁË¡£ÁíÍ⣬Êý¾Ý°ó¶¨µÄÉùÃ÷ÊÇÖ¸ÁîʽµØдÔÚViewµÄÄ£°æµ±Öеģ¬ÕâЩÄÚÈÝÊÇû°ì·¨È¥´ò¶ÏµãdebugµÄ
    • Ò»¸ö´óµÄÄ£¿éÖÐmodelÒ²»áºÜ´ó£¬ËäȻʹÓ÷½±ãÁËÒ²ºÜÈÝÒ×±£Ö¤ÁËÊý¾ÝµÄÒ»ÖÂÐÔ£¬µ±Ê±³¤ÆÚ³ÖÓУ¬²»ÊÍ·ÅÄÚ´æ¾ÍÔì³ÉÁË»¨·Ñ¸ü¶àµÄÄÚ´æ
    • ¶ÔÓÚ´óÐ͵ÄͼÐÎÓ¦ÓóÌÐò£¬ÊÓͼ״̬½Ï¶à£¬ViewModelµÄ¹¹½¨ºÍά»¤µÄ³É±¾¶¼»á±È½Ï¸ß¡£

VueµÄÉúÃüÖÜÆÚ£¿

• beforeCreate£¨´´½¨Ç°£© ÔÚÊý¾Ý¹Û²âºÍ³õʼ»¯Ê¼þ»¹Î´¿ªÊ¼
• created£¨´´½¨ºó£© Íê³ÉÊý¾Ý¹Û²â£¬ÊôÐԺͷ½·¨µÄÔËË㣬³õʼ»¯Ê¼þ£¬$elÊôÐÔ»¹Ã»ÓÐÏÔʾ³öÀ´
• beforeMount£¨ÔØÈëÇ°£© ÔÚ¹ÒÔØ¿ªÊ¼Ö®Ç°±»µ÷Óã¬Ïà¹ØµÄrenderº¯ÊýÊ״α»µ÷Óá£ÊµÀýÒÑÍê³ÉÒÔϵÄÅäÖ㺱àÒëÄ£°å£¬°ÑdataÀïÃæµÄÊý¾ÝºÍÄ£°åÉú³Éhtml¡£×¢Òâ´Ëʱ»¹Ã»ÓйÒÔØhtmlµ½Ò³ÃæÉÏ¡£
• mounted£¨ÔØÈëºó£© ÔÚel ±»Ð´´½¨µÄ vm.$el Ìæ»»£¬²¢¹ÒÔص½ÊµÀýÉÏÈ¥Ö®ºóµ÷Óá£ÊµÀýÒÑÍê³ÉÒÔϵÄÅäÖãºÓÃÉÏÃæ±àÒëºÃµÄhtmlÄÚÈÝÌæ»»elÊôÐÔÖ¸ÏòµÄDOM¶ÔÏó¡£Íê³ÉÄ£°åÖеÄhtmläÖȾµ½htmlÒ³ÃæÖС£´Ë¹ý³ÌÖнøÐÐajax½»»¥¡£
• beforeUpdate£¨¸üÐÂÇ°£© ÔÚÊý¾Ý¸üÐÂ֮ǰµ÷Ó㬷¢ÉúÔÚÐéÄâDOMÖØÐÂäÖȾºÍ´ò²¹¶¡Ö®Ç°¡£¿ÉÒÔÔڸù³×ÓÖнøÒ»²½µØ¸ü¸Ä״̬£¬²»»á´¥·¢¸½¼ÓµÄÖØäÖȾ¹ý³Ì¡£
• updated£¨¸üÐÂºó£© ÔÚÓÉÓÚÊý¾Ý¸ü¸Äµ¼ÖµÄÐéÄâDOMÖØÐÂäÖȾºÍ´ò²¹¶¡Ö®ºóµ÷Óᣵ÷ÓÃʱ£¬×é¼þDOMÒѾ­¸üУ¬365betÌåÓýÔÚÏß¿ÉÒÔÖ´ÐÐÒÀÀµÓÚDOMµÄ²Ù×÷¡£È»¶øÔÚ´ó¶àÊýÇé¿öÏ£¬Ó¦¸Ã±ÜÃâÔÚ´ËÆÚ¼ä¸ü¸Ä״̬£¬ÒòΪÕâ¿ÉÄܻᵼÖ¸üÐÂÎÞÏÞÑ­»·¡£¸Ã¹³×ÓÔÚ·þÎñÆ÷¶ËäÖȾÆڼ䲻±»µ÷Óá£
• beforeDestroy£¨Ïú»ÙÇ°£© ÔÚʵÀýÏú»Ù֮ǰµ÷Óá£ÊµÀýÈÔÈ»ÍêÈ«¿ÉÓá£
• destroyed£¨Ïú»Ùºó£© ÔÚʵÀýÏú»ÙÖ®ºóµ÷Óᣵ÷Óúó£¬ËùÓеÄʼþ¼àÌýÆ÷»á±»ÒƳý£¬ËùÓеÄ×ÓʵÀýÒ²»á±»Ïú»Ù¡£¸Ã¹³×ÓÔÚ·þÎñÆ÷¶ËäÖȾÆڼ䲻±»µ÷Óá£

• ʲôÊÇvueÉúÃüÖÜÆÚ£¿
  • ´ð£º Vue ʵÀý´Ó´´½¨µ½Ïú»ÙµÄ¹ý³Ì£¬¾ÍÊÇÉúÃüÖÜÆÚ¡£´Ó¿ªÊ¼´´½¨¡¢³õʼ»¯Êý¾Ý¡¢±àÒëÄ£°å¡¢¹ÒÔØDom¡úäÖȾ¡¢¸üСúäÖȾ¡¢Ïú»ÙµÈһϵÁйý³Ì£¬³Æ֮Ϊ Vue µÄÉúÃüÖÜÆÚ¡£
• vueÉúÃüÖÜÆÚµÄ×÷ÓÃÊÇʲô£¿
  • ´ð£ºËüµÄÉúÃüÖÜÆÚÖÐÓжà¸öʼþ¹³×Ó£¬ÈÃ365betÌåÓýÔÚÏßÃÇÔÚ¿ØÖÆÕû¸öVueʵÀýµÄ¹ý³Ìʱ¸üÈÝÒ×ÐγɺõÄÂß¼­¡£
• vueÉúÃüÖÜÆÚ×ܹ²Óм¸¸ö½×¶Î£¿
  • ´ð£ºËü¿ÉÒÔ×ܹ²·ÖΪ8¸ö½×¶Î£º´´½¨Ç°/ºó, ÔØÈëÇ°/ºó,¸üÐÂÇ°/ºó,Ïú»ÙÇ°/Ïú»Ùºó¡£
• µÚÒ»´365betÌåÓýÔÚÏß³Ãæ¼ÓÔػᴥ·¢Äļ¸¸ö¹³×Ó£¿
  • ´ð£º»á´¥·¢ ÏÂÃæÕ⼸¸öbeforeCreate, created, beforeMount, mounted ¡£
• DOM äÖȾÔÚ ÄĸöÖÜÆÚÖоÍÒѾ­Íê³É£¿
  • ´ð£ºDOM äÖȾÔÚ mounted ÖоÍÒѾ­Íê³ÉÁË¡£

VueʵÏÖÊý¾ÝË«Ïò°ó¶¨µÄÔ­Àí£ºObject.defineProperty£¨£©£¿ 

• vueʵÏÖÊý¾ÝË«Ïò°ó¶¨Ö÷ÒªÊÇ£º²ÉÓÃÊý¾Ý½Ù³Ö½áºÏ·¢²¼Õß-¶©ÔÄÕßģʽµÄ·½Ê½£¬Í¨¹ýObject.defineProperty£¨£©À´½Ù³Ö¸÷¸öÊôÐÔµÄsetter£¬getter£¬ÔÚÊý¾Ý±ä¶¯Ê±·¢²¼ÏûÏ¢¸ø¶©ÔÄÕߣ¬´¥·¢ÏàÓ¦¼àÌý»Øµ÷¡£µ±°ÑÒ»¸öÆÕͨ Javascript ¶ÔÏ󴫸ø Vue ʵÀýÀ´×÷ΪËüµÄ data Ñ¡Ïîʱ£¬Vue ½«±éÀúËüµÄÊôÐÔ£¬Óà Object.defineProperty ½«ËüÃÇתΪ getter/setter¡£Óû§¿´²»µ½ getter/setter£¬µ«ÊÇÔÚÄÚ²¿ËüÃÇÈà Vue ×·×ÙÒÀÀµ£¬ÔÚÊôÐÔ±»·ÃÎʺÍÐÞ¸Äʱ֪ͨ±ä»¯¡£
• vueµÄÊý¾ÝË«Ïò°ó¶¨ ½«MVVM×÷ΪÊý¾Ý°ó¶¨µÄÈë¿Ú£¬ÕûºÏObserver£¨¹Û²ìÕߣ©£¬Compile£¨±àÒ룩ºÍWatcher£¨¹Û²ìÕߣ©ÈýÕߣ¬Í¨¹ýObserverÀ´¼àÌý×Ô¼ºµÄmodelµÄÊý¾Ý±ä»¯£¬Í¨¹ýCompileÀ´½âÎö±àÒëÄ£°åÖ¸ÁvueÖÐÊÇÓÃÀ´½âÎö {{}}£©£¬×îÖÕÀûÓÃwatcher´îÆðobserverºÍCompileÖ®¼äµÄͨÐÅÇÅÁº£¬´ïµ½Êý¾Ý±ä»¯ ¡ª>ÊÓͼ¸üУ»ÊÓͼ½»»¥±ä»¯£¨input£©¡ª>Êý¾Ýmodel±ä¸üË«Ïò°ó¶¨Ð§¹û¡£

• jsʵÏÖ¼òµ¥µÄË«Ïò°ó¶¨

<body> 
¡¡¡¡<div id="app"> 
¡¡¡¡<input type="text" id="txt">
¡¡¡¡<p id="show"></p> 
</div> 
</body>
<script type="text/javascript"> 
¡¡¡¡var obj = {} 
¡¡¡¡Object.defineProperty(obj, 'txt', { 
¡¡¡¡get: function () {
¡¡¡¡¡¡¡¡ return obj 
¡¡¡¡}, 
¡¡¡¡set: function (newValue) { 
¡¡¡¡¡¡¡¡¡¡document.getElementById('txt').value = newValue 
¡¡¡¡¡¡¡¡¡¡document.getElementById('show').innerHTML = newValue 
¡¡¡¡} 
}) 
document.addEventListener('keyup', function (e) { 
¡¡¡¡obj.txt = e.target.value 
}) 
</script>

Vue×é¼þ¼äµÄ²ÎÊý´«µÝ£¿

• ¸¸×é¼þÓë×Ó×é¼þ´«Öµ
  • ¸¸×é¼þ´«¸ø×Ó×é¼þ£º×Ó×é¼þͨ¹ýprops·½·¨½ÓÊÜÊý¾Ý;
  • ×Ó×é¼þ´«¸ø¸¸×é¼þ£º$emit·½·¨´«µÝ²ÎÊý
• ·Ç¸¸×Ó×é¼þ¼äµÄÊý¾Ý´«µÝ£¬ÐÖµÜ×é¼þ´«Öµ
  • eventBus£¬¾ÍÊÇ´´½¨Ò»¸öʼþÖÐÐÄ£¬Ï൱ÓÚÖÐתվ£¬¿ÉÒÔÓÃËüÀ´´«µÝʼþºÍ½ÓÊÕʼþ¡£ÏîÄ¿±È½ÏСʱ£¬ÓÃÕâ¸ö±È½ÏºÏÊÊ¡££¨ËäȻҲÓв»ÉÙÈËÍƼöÖ±½ÓÓÃVUEX£¬¾ßÌåÀ´Ëµ¿´ÐèÇó¿©¡£¼¼ÊõÖ»ÊÇÊֶΣ¬Ä¿µÄ´ïµ½²ÅÊÇÍõµÀ¡££©

VueµÄ·ÓÉʵÏÖ£ºhashģʽ¡¢historyģʽ¡¢abstractģʽ :£¿

• hashģʽ£ºÔÚä¯ÀÀÆ÷ÖзûºÅ¡°#¡±£¬#ÒÔ¼°#ºóÃæµÄ×Ö·û³Æ֮Ϊhash£¬ÓÃwindow.location.h
• Ìص㣺hashËäÈ»ÔÚURLÖУ¬µ«²»±»°üÀ¨ÔÚHTTPÇëÇóÖУ»ÓÃÀ´Ö¸µ¼ä¯ÀÀÆ÷¶¯×÷£¬¶Ô·þÎñ¶Ë°²È«ÎÞÓã¬hash²»»áÖؼÓÔØÒ³Ãæ¡£
• hash ģʽÏ£¬½ö hash ·ûºÅ֮ǰµÄÄÚÈݻᱻ°üº¬ÔÚÇëÇóÖУ¬Èç http://www.xxx.com£¬Òò´Ë¶ÔÓÚºó¶ËÀ´Ëµ£¬¼´Ê¹Ã»ÓÐ×öµ½¶Ô·ÓɵÄÈ«¸²¸Ç£¬Ò²²»»á·µ»Ø 404 ´íÎó¡£
• historyģʽ£ºhistory²ÉÓÃHTML5µÄÐÂÌØÐÔ£»ÇÒÌṩÁËÁ½¸öз½·¨£ºpushState£¨£©£¬replaceState£¨£©¿ÉÒÔ¶Ôä¯ÀÀÆ÷ÀúÊ·¼Ç¼ջ½øÐÐÐ޸ģ¬ÒÔ¼°popStateʼþµÄ¼àÌýµ½×´Ì¬±ä¸ü¡£
• history ģʽÏ£¬Ç°¶ËµÄ URL ±ØÐëºÍʵ¼ÊÏòºó¶Ë·¢ÆðÇëÇóµÄ URL Ò»Ö£¬Èç http://www.xxx.com/items/id¡£ºó¶ËÈç¹ûȱÉÙ¶Ô /items/id µÄ·ÓÉ´¦Àí£¬½«·µ»Ø 404 ´íÎó¡£Vue-Router ¹ÙÍøÀïÈç´ËÃèÊö£º¡°²»¹ýÕâÖÖģʽҪÍæºÃ£¬»¹ÐèÒªºǫ́ÅäÖÃÖ§³Ö¡­¡­365betÌåÓýÔÚÏßÄØ£¬ÄãÒªÔÚ·þÎñ¶ËÔö¼ÓÒ»¸ö¸²¸ÇËùÓÐÇé¿öµÄºòÑ¡×ÊÔ´£ºÈç¹û URL Æ¥Åä²»µ½Èκξ²Ì¬×ÊÔ´£¬ÔòÓ¦¸Ã·µ»Øͬһ¸ö index.html Ò³Ã棬Õâ¸öÒ³Ãæ¾ÍÊÇÄã app ÒÀÀµµÄÒ³Ãæ¡£¡±
• abstractģʽ : Ö§³ÖËùÓÐ JavaScript ÔËÐл·¾³£¬Èç Node.js ·þÎñÆ÷¶Ë¡£Èç¹û·¢ÏÖûÓÐä¯ÀÀÆ÷µÄ API£¬Â·ÓÉ»á×Ô¶¯Ç¿ÖƽøÈëÕâ¸öģʽ.

˵˵¶Ôv-modelµÄÁ˽⣿

• 365betÌåÓýÔÚÏßÃÇÔÚ vue ÏîÄ¿ÖÐÖ÷ҪʹÓà v-model Ö¸ÁîÔÚ±íµ¥ input¡¢textarea¡¢select µÈÔªËØÉÏ´´½¨Ë«ÏòÊý¾Ý°ó¶¨£¬365betÌåÓýÔÚÏßÃÇÖªµÀ v-model ±¾ÖÊÉϲ»¹ýÊÇÓï·¨ÌÇ£¬v-model ÔÚÄÚ²¿Îª²»Í¬µÄÊäÈëÔªËØʹÓò»Í¬µÄÊôÐÔ²¢Å׳ö²»Í¬µÄʼþ£º
• text ºÍ textarea ÔªËØʹÓà value ÊôÐÔºÍ input ʼþ£»
• checkbox ºÍ radio ʹÓà checked ÊôÐÔºÍ change ʼþ£»
• select ×ֶν« value ×÷Ϊ prop ²¢½« change ×÷Ϊʼþ¡£

ÒÔ input ±íµ¥ÔªËØΪÀý£º
<input v-model='something'>

Ï൱ÓÚ
<input v-bind:value="something" v-on:input="something = $event.target.value">

Èç¹ûÔÚ×Ô¶¨Òå×é¼þÖУ¬v-model ĬÈÏ»áÀûÓÃÃûΪ value µÄ prop ºÍÃûΪ input µÄʼþ£¬ÈçÏÂËùʾ£º
¸¸×é¼þ£º
<ModelChild v-model="message"></ModelChild>

×Ó×é¼þ£º 
<div>{{value}}</div>

props:{
    value: String
},
methods: {
  test1(){
     this.$emit('input', 'Сºì')
  },
},

VueÓëAngularÒÔ¼°ReactµÄÇø±ð£¿

• Vue.js£º

• • ÆäʵVue.js²»ÊÇÒ»¸ö¿ò¼Ü£¬ÒòΪËüÖ»¾Û½¹ÊÓͼ²ã£¬ÊÇÒ»¸ö¹¹½¨Êý¾ÝÇý¶¯µÄWeb½çÃæµÄ¿â¡£
  • Vue.jsͨ¹ý¼òµ¥µÄAPI£¨Ó¦ÓóÌÐò±à³Ì½Ó¿Ú£©Ìṩ¸ßЧµÄÊý¾Ý°ó¶¨ºÍÁé»îµÄ×é¼þϵͳ¡£

• Vue.jsµÄÌØÐÔÈçÏ£º

• • ÇáÁ¿¼¶µÄ¿ò¼Ü
  • Ë«ÏòÊý¾Ý°ó¶¨
  • Ö¸Áî
  • ²å¼þ»¯
• Óŵ㣺
  • ¼òµ¥£º¹Ù·½ÎĵµºÜÇåÎú£¬±È Angular ¼òµ¥Ò×ѧ¡£
  • ¿ìËÙ£ºÒì²½Åú´¦Àí·½Ê½¸üРDOM¡£
  • ×éºÏ£ºÓýâñîµÄ¡¢¿É¸´ÓõÄ×é¼þ×éºÏÄãµÄÓ¦ÓóÌÐò¡£
  • ½ô´Õ£º~18kb min+gzip£¬ÇÒÎÞÒÀÀµ¡£
  • Ç¿´ó£º±í´ïʽ & ÎÞÐèÉùÃ÷ÒÀÀµµÄ¿ÉÍƵ¼ÊôÐÔ (computed properties)¡£
  • ¶ÔÄ£¿éÓѺ㺿ÉÒÔͨ¹ý NPM¡¢Bower »ò Duo °²×°£¬²»Ç¿ÆÈÄãËùÓеĴúÂ붼×ñÑ­ Angular µÄ¸÷Öֹ涨£¬Ê¹Óó¡¾°¸ü¼ÓÁé»î¡£
• ȱµã£º
  • ÐÂÉú¶ù£ºVue.jsÊÇÒ»¸öеÄÏîÄ¿£¬Ã»ÓÐangularÄÇô³ÉÊì¡£
  • Ó°Ïì¶È²»ÊǺܴó£ºgoogleÁËһϣ¬ÓйØÓÚVue.js¶àÑùÐÔ»òÕß˵·á¸»ÐÔÉÙÓÚÆäËûһЩÓÐÃûµÄ¿â¡£
  • ²»Ö§³ÖIE8£º

£¨°æ±¾ÔÚ²»¶Ï¸üУ¬ÒÔϵÄÇø±ðÓпÉÄܲ»ÊǺÜÕýÈ·¡£365betÌåÓýÔÚÏß¹¤×÷ÖÐÖ»Óõ½vue£¬¶ÔangularºÍreact²»ÔõôÊ죩

• ÓëAngularJSµÄÇø±ð
  • Ïàͬµã£º
    • ¶¼Ö§³ÖÖ¸ÁÄÚÖÃÖ¸ÁîºÍ×Ô¶¨ÒåÖ¸Á¶¼Ö§³Ö¹ýÂËÆ÷£ºÄÚÖùýÂËÆ÷ºÍ×Ô¶¨Òå¹ýÂËÆ÷£»¶¼Ö§³ÖË«ÏòÊý¾Ý°ó¶¨£»¶¼²»Ö§³ÖµÍ¶Ëä¯ÀÀÆ÷¡£
  • ²»Í¬µã£º
    • AngularJSµÄѧϰ³É±¾¸ß£¬±ÈÈçÔö¼ÓÁËDependency InjectionÌØÐÔ£¬¶øVue.js±¾ÉíÌṩµÄAPI¶¼±È½Ï¼òµ¥¡¢Ö±¹Û£»ÔÚÐÔÄÜÉÏ£¬AngularJSÒÀÀµ¶ÔÊý¾Ý×öÔà¼ì²é£¬365betÌåÓýÔÚÏßWatcherÔ½¶àÔ½Âý£»Vue.jsʹÓûùÓÚÒÀÀµ×·×ٵĹ۲첢ÇÒʹÓÃÒì²½¶ÓÁиüУ¬ËùÓеÄÊý¾Ý¶¼ÊǶÀÁ¢´¥·¢µÄ¡£
• ÓëReactµÄÇø±ð
  • Ïàͬµã£º
    • React²ÉÓÃÌØÊâµÄJSXÓï·¨£¬Vue.jsÔÚ×é¼þ¿ª·¢ÖÐÒ²ÍƳç±àд.vueÌØÊâÎļþ¸ñʽ£¬¶ÔÎļþÄÚÈݶ¼ÓÐһЩԼ¶¨£¬Á½Õ߶¼ÐèÒª±àÒëºóʹÓã»ÖÐÐÄ˼ÏëÏàͬ£ºÒ»Çж¼ÊÇ×é¼þ£¬×é¼þʵÀýÖ®¼ä¿ÉÒÔǶÌ×£»¶¼ÌṩºÏÀíµÄ¹³×Óº¯Êý£¬¿ÉÒÔÈÿª·¢Õ߶¨ÖÆ»¯µØÈ¥´¦ÀíÐèÇ󣻶¼²»ÄÚÖÃÁÐÊýAJAX£¬RouteµÈ¹¦Äܵ½ºËÐÄ°ü£¬¶øÊÇÒÔ²å¼þµÄ·½Ê½¼ÓÔØ£»ÔÚ×é¼þ¿ª·¢Öж¼Ö§³ÖmixinsµÄÌØÐÔ¡£
  • ²»Í¬µã£º
    • React²ÉÓõÄVirtual DOM»á¶ÔäÖȾ³öÀ´µÄ½á¹û×öÔà¼ì²é£»Vue.jsÔÚÄ£°åÖÐÌṩÁËÖ¸Á¹ýÂËÆ÷µÈ£¬¿ÉÒԷdz£·½±ã£¬¿ì½ÝµØ²Ù×÷Virtual DOM¡£

vue7¸öÊôÐÔ

• ѧϰvue365betÌåÓýÔÚÏßÃDZØÐëÖ®µ½ËüµÄ7¸öÊôÐÔ
• elÊôÐÔ
  • ÓÃÀ´Ö¸Ê¾vue±àÒëÆ÷´ÓʲôµØ·½¿ªÊ¼½âÎö vueµÄÓï·¨£¬¿ÉÒÔ˵ÊÇÒ»¸öռλ·û¡£
• dataÊôÐÔ
  • ÓÃÀ´×éÖ¯´ÓviewÖгéÏó³öÀ´µÄÊôÐÔ£¬¿ÉÒÔ˵½«ÊÓͼµÄÊý¾Ý³éÏó³öÀ´´æ·ÅÔÚdataÖС£
• templateÊôÐÔ
  • ÓÃÀ´ÉèÖÃÄ£°å£¬»áÌæ»»Ò³ÃæÔªËØ£¬°üÀ¨Õ¼Î»·û¡£
• methodsÊôÐÔ
  • ·ÅÖÃÒ³ÃæÖеÄÒµÎñÂß¼­£¬js·½·¨Ò»°ã¶¼·ÅÖÃÔÚmethodsÖÐ
• renderÊôÐÔ
  • ´´½¨ÕæÕýµÄVirtual Dom
• computedÊôÐÔ
  • ÓÃÀ´¼ÆËã
• watchÊôÐÔ
  • watch:function(new,old){}
  • ¼àÌýdataÖÐÊý¾ÝµÄ±ä»¯
  • Á½¸ö²ÎÊý£¬Ò»¸ö·µ»ØÐÂÖµ£¬Ò»¸ö·µ»Ø¾ÉÖµ

<div id="app">
{{msg}}
<div>ÕâÊÇÄ£°åµÄµÚ365ÌåÓýͶעʹÓ÷½·¨1</div>
</div>
 
<template id="bot">ÕâÊÇÄ£°åµÄµÚÈýÖÖʹÓ÷½·¨£¬²»³£ÓÃ3</template>
<script>
<div id="bot">Ä£°åµÄµÚËÄÖÖ´´½¨·½·¨4</div>
</script>
<script>
var vm1 = new Vue({
data: {
msg: "dataÊôÐÔ"
},
methods: {
Personal:function () {
console.log("methods·½·¨´æ·Å·½·¨")
}
},
template: `<div>Ä£°åµÄµÚ¶þÖÖʹÓ÷½·¨2</div>`,
//template£º"#bot",
render: (createElement) => {
return createElement("h1",{"class":"ÀàÃû"£¬"style":"color: red"},"ÕâÒ»¸örenderÊôÐÔ´´½¨µÄÐéÄâdom")
},
})
</script>

• methodsºÍcomputedÆäÖж¼¿ÉÒÔдËã·¨£¬ÓÐʲôÇø±ðÄØ£¿

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="javascript/vue.min.js"></script>
</head> <body>
<div id="app">
<p>{{message}}</p> //Ö±½ÓÔÚÄ£°åÖа󶨱í´ïʽ
<p>{{message.split('').reverse().join('')}}</p> //ÔËÓüÆËãÊôÐÔ
<p>{{reverseMessage}}</p> //ÔËÓÃmethods·½Ê½
<p>{{methodMessage()}}</p>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
message:"hello"
},
computed:{
reverseMessage:function(){
return this.message.split('').reverse().join('');
}
},
methods:{
methodMessage:function () {
return this.message.split('').reverse().join('');
}
}
})
</script>
</body>
</html>

• 365betÌåÓýÔÚÏßÔڴ˽«ÈýÖÖ·½Ê½½øÐÐÁ˱Ƚϡ£·µ»ØµÄ½á¹ûÊÇÒ»ÑùµÄ£¬µ«ÔÚд·¨ÉÏcomputed¼ÆËãÊôÐԵķ½Ê½ÔÚÓÃÊôÐÔʱ²»ÓüÓ(),¶ømethods·½Ê½ÔÚʹÓÃʱҪÏñ·½·¨Ò»ÑùÈ¥Ó㬱ØÐë¼Ó().
• Á½ÖÖ·½Ê½ÔÚ»º´æÉÏÒ²´óÓв»Í¬£¬ÀûÓÃcomputed¼ÆËãÊôÐÔÊǽ« reverseMessageÓëmessage°ó¶¨£¬Ö»Óе±message·¢Éú±ä»¯Ê±²Å»á´¥·¢reverseMessage£¬¶ømethods·½Ê½ÊÇÿ´Î½øÈëÒ³Ã涼ҪִÐи÷½·¨£¬µ«ÊÇÔÚÀûÓÃʵʱÐÅϢʱ£¬±ÈÈçÏÔʾµ±Ç°½øÈëÒ³ÃæµÄʱ¼ä£¬±ØÐëÓÃmethods·½Ê½

vue·ÓɵĹ³×Óº¯Êý£¿

• Ê×Ò³¿ÉÒÔ¿ØÖƵ¼º½Ìøת£¬beforeEach£¬afterEachµÈ£¬Ò»°ãÓÃÓÚÒ³ÃætitleµÄÐ޸ġ£Ò»Ð©ÐèÒªµÇ¼²ÅÄܵ÷ÕûÒ³ÃæµÄÖض¨Ïò¹¦ÄÜ¡£
• beforeEachÖ÷ÒªÓÐ3¸ö²ÎÊýto£¬from£¬next£º
  • to£ºroute¼´½«½øÈëµÄÄ¿±ê·ÓɶÔÏó£¬
  • from£ºrouteµ±Ç°µ¼º½ÕýÒªÀ뿪µÄ·ÓÉ
  • next£ºfunctionÒ»¶¨Òªµ÷Óø÷½·¨resolveÕâ¸ö¹³×Ó¡£Ö´ÐÐЧ¹ûÒÀÀµnext·½·¨µÄµ÷ÓòÎÊý¡£¿ÉÒÔ¿ØÖÆÍøÒ³µÄÌøת¡£

vuexÊÇʲô£¿ÔõôʹÓã¿ÄÄÖÖ¹¦Äܳ¡¾°Ê¹ÓÃËü£¿

• Ö»ÓÃÀ´¶ÁÈ¡µÄ״̬¼¯ÖзÅÔÚstoreÖУ» ¸Ä±ä״̬µÄ·½Ê½ÊÇÌá½»mutations£¬ÕâÊǸöͬ²½µÄÊÂÎ Òì²½Âß¼­Ó¦¸Ã·â×°ÔÚactionÖС£
• ÔÚmain.jsÒýÈëstore£¬×¢È롣н¨ÁËÒ»¸öĿ¼store£¬¡­.. export ¡£
• ³¡¾°ÓУºµ¥Ò³Ó¦ÓÃÖУ¬×é¼þÖ®¼äµÄ״̬¡¢ÒôÀÖ²¥·Å¡¢µÇ¼״̬¡¢¼ÓÈ빺Îï³µ

• state 
  • Vuex ʹÓõ¥Ò»×´Ì¬Ê÷,¼´365ÌåÓýͶעӦÓý«½ö½ö°üº¬Ò»¸östore ʵÀý£¬µ«µ¥Ò»×´Ì¬Ê÷ºÍÄ£¿é»¯²¢²»³åÍ»¡£´æ·ÅµÄÊý¾Ý״̬£¬²»¿ÉÒÔÖ±½ÓÐÞ¸ÄÀïÃæµÄÊý¾Ý¡£
• mutations
  • mutations¶¨ÒåµÄ·½·¨¶¯Ì¬ÐÞ¸ÄVuex µÄ store ÖеÄ״̬»òÊý¾Ý¡£
• getters
  • ÀàËÆvueµÄ¼ÆËãÊôÐÔ£¬Ö÷ÒªÓÃÀ´¹ýÂËһЩÊý¾Ý¡£
• action
  • actions¿ÉÒÔÀí½âΪͨ¹ý½«mutationsÀïÃæ´¦ÀïÊý¾ÝµÄ·½·¨±ä³É¿ÉÒì²½µÄ´¦ÀíÊý¾ÝµÄ·½·¨£¬¼òµ¥µÄ˵¾ÍÊÇÒì²½²Ù×÷Êý¾Ý¡£view ²ãͨ¹ý store.dispath À´·Ö·¢ action¡£

const store = new Vuex.Store({ //storeʵÀý 
¡¡¡¡state: { 
¡¡¡¡¡¡¡¡count: 0 
¡¡¡¡¡¡¡¡¡¡¡¡}, 
¡¡¡¡mutations: { 
¡¡¡¡¡¡¡¡increment (state) { 
¡¡¡¡¡¡¡¡state.count++ 
¡¡¡¡¡¡¡¡} 
¡¡¡¡¡¡¡¡}, 
¡¡¡¡actions: { 
¡¡¡¡¡¡¡¡increment (context) { 
¡¡¡¡¡¡¡¡¡¡¡¡context.commit('increment') 
¡¡¡¡} 
¡¡} 
})

• modules
  • ÏîÄ¿Ìرð¸´ÔÓµÄʱºò£¬¿ÉÒÔÈÃÿһ¸öÄ£¿éÓµÓÐ×Ô¼ºµÄstate¡¢mutation¡¢action¡¢getters,ʹµÃ½á¹¹·Ç³£ÇåÎú£¬·½±ã¹ÜÀí¡£

const moduleA = { 
¡¡¡¡state: { ... }, 
¡¡¡¡mutations: { ... }, 
¡¡¡¡actions: { ... }, 
¡¡¡¡getters: { ... } 
¡¡} 
const moduleB = { 
¡¡¡¡state: { ... }, 
¡¡¡¡mutations: { ... }, 
¡¡¡¡actions: { ... } 
¡¡} 
const store = new Vuex.Store({ 
¡¡¡¡modules: { 
¡¡¡¡¡¡¡¡a: moduleA, 
¡¡¡¡¡¡¡¡b: moduleB 
})

vue-cliÈçºÎÐÂÔö×Ô¶¨ÒåÖ¸Á

# 1.´´½¨¾Ö²¿Ö¸Áî
var app = new Vue({ 
¡¡¡¡el: '#app', 
¡¡¡¡data: { 
¡¡¡¡}, 
¡¡¡¡// ´´½¨Ö¸Áî(¿ÉÒÔ¶à¸ö) 
¡¡¡¡directives: { 
¡¡¡¡// Ö¸ÁîÃû³Æ 
¡¡¡¡dir1: { 
¡¡¡¡¡¡¡¡inserted(el) { 
¡¡¡¡¡¡¡¡¡¡¡¡// Ö¸ÁîÖеÚÒ»¸ö²ÎÊýÊǵ±Ç°Ê¹ÓÃÖ¸ÁîµÄDOM 
¡¡¡¡¡¡¡¡¡¡¡¡console.log(el); 
¡¡¡¡¡¡¡¡¡¡¡¡console.log(arguments); 
¡¡¡¡¡¡¡¡¡¡¡¡// ¶ÔDOM½øÐвÙ×÷ 
¡¡¡¡¡¡¡¡¡¡¡¡el.style.width = '200px'; 
¡¡¡¡¡¡¡¡¡¡¡¡el.style.height = '200px'; 
¡¡¡¡¡¡¡¡¡¡¡¡el.style.background = '#000'; 
¡¡¡¡¡¡¡¡} 
¡¡¡¡¡¡} 
¡¡¡¡} 
¡¡})
# 2.È«¾ÖÖ¸Áî
Vue.directive('dir2', { 
¡¡¡¡inserted(el) { 
¡¡¡¡¡¡¡¡console.log(el); 
¡¡¡¡} 
})
# 3.Ö¸ÁîµÄʹÓÃ
<div id="app"> 
¡¡¡¡<div v-dir1></div> 
¡¡¡¡<div v-dir2></div> 
</div>

vueÈçºÎ×Ô¶¨ÒåÒ»¸ö¹ýÂËÆ÷£¿

# html´úÂ룺 
<div id="app"> 
¡¡¡¡<input type="text" v-model="msg" /> 
¡¡¡¡{{msg| capitalize }} 
</div> 
# JS´úÂ룺
var vm=new Vue({ 
¡¡¡¡el:"#app", 
¡¡¡¡data:{ 
¡¡¡¡¡¡¡¡msg:'' 
¡¡¡¡}, 
¡¡¡¡filters: { 
¡¡¡¡¡¡¡¡capitalize: function (value) { 
¡¡¡¡¡¡¡¡¡¡¡¡if (!value) return '' 
¡¡¡¡¡¡¡¡¡¡¡¡value = value.toString() 
¡¡¡¡¡¡¡¡¡¡¡¡return value.charAt(0).toUpperCase() + value.slice(1) 
¡¡¡¡¡¡¡¡} 
¡¡¡¡¡¡} 
¡¡})
# È«¾Ö¶¨Òå¹ýÂËÆ÷
Vue.filter('capitalize', function (value) {
¡¡¡¡ if (!value) return '' 
¡¡¡¡ value = value.toString() 
¡¡¡¡ return value.charAt(0).toUpperCase() + value.slice(1) 
}) 
# ¹ýÂËÆ÷½ÓÊÕ±í´ïʽµÄÖµ (msg) ×÷ΪµÚÒ»¸ö²ÎÊý¡£capitalize ¹ýÂËÆ÷½«»áÊÕµ½ msgµÄÖµ×÷ΪµÚÒ»¸ö²ÎÊý¡£

¶Ôkeep-alive µÄÁ˽⣿

• keep-aliveÊÇ Vue ÄÚÖõÄÒ»¸ö×é¼þ£¬¿ÉÒÔʹ±»°üº¬µÄ×é¼þ±£Áô״̬£¬»ò±ÜÃâÖØÐÂäÖȾ¡£
• ÔÚvue 2.1.0 °æ±¾Ö®ºó£¬keep-aliveмÓÈëÁËÁ½¸öÊôÐÔ: include(°üº¬µÄ×é¼þ»º´æ) Óë exclude(ÅųýµÄ×é¼þ²»»º´æ£¬ÓÅÏȼ¶´óÓÚinclude) ¡£

• ʹÓ÷½·¨

<keep-alive include='include_components' exclude='exclude_components'> 
¡¡¡¡<component> 
¡¡¡¡¡¡¡¡<!-- ¸Ã×é¼þÊÇ·ñ»º´æÈ¡¾öÓÚincludeºÍexcludeÊôÐÔ --> 
¡¡¡¡</component> 
</keep-alive>

• ²ÎÊý½âÊÍ
  • include - ×Ö·û´®»òÕýÔò±í´ïʽ£¬Ö»ÓÐÃû³ÆÆ¥ÅäµÄ×é¼þ»á±»»º´æ
  • exclude - ×Ö·û´®»òÕýÔò±í´ïʽ£¬ÈκÎÃû³ÆÆ¥ÅäµÄ×é¼þ¶¼²»»á±»»º´æ
  • include ºÍ exclude µÄÊôÐÔÔÊÐí×é¼þÓÐÌõ¼þµØ»º´æ¡£¶þÕ߶¼¿ÉÒÔÓá°£¬¡±·Ö¸ô×Ö·û´®¡¢ÕýÔò±í´ïʽ¡¢Êý×é¡£µ±Ê¹ÓÃÕýÔò»òÕßÊÇÊý×éʱ£¬Òª¼ÇµÃʹÓÃv-bind ¡£
• ʹÓÃʾÀý

<!-- ¶ººÅ·Ö¸ô×Ö·û´®£¬Ö»ÓÐ×é¼þaÓëb±»»º´æ¡£ --> 
<keep-alive include="a,b"> 
¡¡¡¡<component></component>
 </keep-alive> 
<!-- ÕýÔò±í´ïʽ (ÐèҪʹÓà v-bind£¬·ûºÏÆ¥Åä¹æÔòµÄ¶¼»á±»»º´æ) --> 
<keep-alive :include="/a|b/"> 
<component></component> 
</keep-alive> 
<!-- Array (ÐèҪʹÓà v-bind£¬±»°üº¬µÄ¶¼»á±»»º´æ) --> 
<keep-alive :include="['a', 'b']"> 
¡¡¡¡<component></component> 
</keep-alive>

Ò»¾ä»°¾ÍÄܻشðµÄÃæÊÔÌ⣿

• cssÖ»ÔÚµ±Ç°×é¼þÆð×÷ÓÃ
  • ´ð£ºÔÚstyle±êÇ©ÖÐдÈëscoped¼´¿É ÀýÈ磺<style scoped></style>
• v-if ºÍ v-show Çø±ð
  • ´ð£ºv-if°´ÕÕÌõ¼þÊÇ·ñäÖȾ£¬v-showÊÇdisplayµÄblock»ònone£»
• $routeºÍ$routerµÄÇø±ð
  • ´ð£º$routeÊÇ¡°Â·ÓÉÐÅÏ¢¶ÔÏó¡±£¬°üÀ¨path£¬params£¬hash£¬query£¬fullPath£¬matched£¬nameµÈ·ÓÉÐÅÏ¢²ÎÊý¡£¶ø$routerÊÇ¡°Â·ÓÉʵÀý¡±¶ÔÏó°üÀ¨ÁË·ÓɵÄÌøת·½·¨£¬¹³×Óº¯ÊýµÈ¡£
• vue.jsµÄÁ½¸öºËÐÄÊÇʲô£¿
  • ´ð£ºÊý¾ÝÇý¶¯¡¢×é¼þϵͳ
• vue¼¸ÖÖ³£ÓõÄÖ¸Áî
  • ´ð£ºv-for ¡¢ v-if ¡¢v-bind¡¢v-on¡¢v-show¡¢v-else
• vue³£ÓõÄÐÞÊηû£¿
  • ´ð£º.prevent: Ìύʼþ²»ÔÙÖØÔØÒ³Ã棻.stop: ×èÖ¹µ¥»÷ʼþðÅÝ£».self: µ±Ê¼þ·¢ÉúÔÚ¸ÃÔªËر¾Éí¶ø²»ÊÇ×ÓÔªËصÄʱºò»á´¥·¢£».capture: ʼþÕìÌý£¬Ê¼þ·¢ÉúµÄʱºò»áµ÷ÓÃ
• v-on ¿ÉÒ԰󶨶à¸ö·½·¨Âð£¿
  • ´ð£º¿ÉÒÔ
• vueÖÐ key ÖµµÄ×÷Óã¿
  • ´ð£ºµ± Vue.js Óà v-for ÕýÔÚ¸üÐÂÒÑäÖȾ¹ýµÄÔªËØÁбíʱ£¬ËüĬÈÏÓ᰾͵ظ´Óá±²ßÂÔ¡£Èç¹ûÊý¾ÝÏîµÄ˳Ðò±»¸Ä±ä£¬Vue ½«²»»áÒƶ¯ DOM ÔªËØÀ´Æ¥ÅäÊý¾ÝÏîµÄ˳Ðò£¬ ¶øÊǼòµ¥¸´Óô˴¦365ÌåÓýͶעԪËØ£¬²¢ÇÒÈ·±£ËüÔÚÌض¨Ë÷ÒýÏÂÏÔʾÒѱ»äÖȾ¹ýµÄ365ÌåÓýͶעԪËØ¡£keyµÄ×÷ÓÃÖ÷ÒªÊÇΪÁ˸ßЧµÄ¸üÐÂÐéÄâDOM¡£
• ʲôÊÇvueµÄ¼ÆËãÊôÐÔ£¿
  • ´ð£ºÔÚÄ£°åÖзÅÈëÌ«¶àµÄÂß¼­»áÈÃÄ£°å¹ýÖØÇÒÄÑÒÔά»¤£¬ÔÚÐèÒª¶ÔÊý¾Ý½øÐи´ÔÓ´¦Àí£¬ÇÒ¿ÉÄܶà´ÎʹÓõÄÇé¿öÏ£¬¾¡Á¿²ÉÈ¡¼ÆËãÊôÐԵķ½Ê½¡£ºÃ´¦£º¢ÙʹµÃÊý¾Ý´¦Àí½á¹¹ÇåÎú£»¢ÚÒÀÀµÓÚÊý¾Ý£¬Êý¾Ý¸üУ¬´¦Àí½á¹û×Ô¶¯¸üУ»¢Û¼ÆËãÊôÐÔÄÚ²¿thisÖ¸ÏòvmʵÀý£»¢ÜÔÚtemplateµ÷ÓÃʱ£¬Ö±½Óд¼ÆËãÊôÐÔÃû¼´¿É£»¢Ý³£ÓõÄÊÇgetter·½·¨£¬»ñÈ¡Êý¾Ý£¬Ò²¿ÉÒÔʹÓÃset·½·¨¸Ä±äÊý¾Ý£»¢ÞÏà½ÏÓÚmethods£¬²»¹ÜÒÀÀµµÄÊý¾Ý±ä²»±ä£¬methods¶¼»áÖØмÆË㣬µ«ÊÇÒÀÀµÊý¾Ý²»±äµÄʱºòcomputed´Ó»º´æÖлñÈ¡£¬²»»áÖØмÆËã¡£
• vueµÈµ¥Ò³ÃæÓ¦Óü°ÆäÓÅȱµã
  • ´ð£ºÓŵ㣺Vue µÄÄ¿±êÊÇͨ¹ý¾¡¿ÉÄܼòµ¥µÄ API ʵÏÖÏìÓ¦µÄÊý¾Ý°ó¶¨ºÍ×éºÏµÄÊÓͼ×é¼þ£¬ºËÐÄÊÇÒ»¸öÏìÓ¦µÄÊý¾Ý°ó¶¨ÏµÍ³¡£MVVM¡¢Êý¾ÝÇý¶¯¡¢×é¼þ»¯¡¢ÇáÁ¿¡¢¼ò½à¡¢¸ßЧ¡¢¿ìËÙ¡¢Ä£¿éÓѺá£
  • ȱµã£º²»Ö§³ÖµÍ°æ±¾µÄä¯ÀÀÆ÷£¬×îµÍÖ»Ö§³Öµ½IE9£»²»ÀûÓÚSEOµÄÓÅ»¯£¨Èç¹ûÒªÖ§³ÖSEO£¬½¨Òéͨ¹ý·þÎñ¶ËÀ´½øÐÐäÖȾ×é¼þ£©£»µÚÒ»´Î¼ÓÔØÊ×Ò³ºÄʱÏà¶Ô³¤Ò»Ð©£»²»¿ÉÒÔʹÓÃä¯ÀÀÆ÷µÄµ¼º½°´Å¥ÐèÒª×ÔÐÐʵÏÖÇ°½ø¡¢ºóÍË¡£
• Ôõô¶¨Òå vue-router µÄ¶¯Ì¬Â·ÓÉ? Ôõô»ñÈ¡´«¹ýÀ´µÄÖµ
  • ´ð£ºÔÚ router Ŀ¼Ï嵀 index.js ÎļþÖУ¬¶Ô path ÊôÐÔ¼ÓÉÏ /:id£¬Ê¹Óà router ¶ÔÏóµÄ params.id »ñÈ¡¡£

¶Ô SPA µ¥Ò³ÃæµÄÀí½â£¬ËüµÄÓÅȱµã·Ö±ðÊÇʲô£¿

• SPA£¨ single-page application £©½öÔÚ Web Ò³Ãæ³õʼ»¯Ê±¼ÓÔØÏàÓ¦µÄ HTML¡¢JavaScript ºÍ CSS¡£Ò»µ©Ò³Ãæ¼ÓÔØÍê³É£¬SPA ²»»áÒòΪÓû§µÄ²Ù×÷¶ø½øÐÐÒ³ÃæµÄÖØмÓÔØ»òÌøת£»È¡¶ø´úÖ®µÄÊÇÀûÓ÷ÓÉ»úÖÆʵÏÖ HTML ÄÚÈݵı任£¬UI ÓëÓû§µÄ½»»¥£¬±ÜÃâÒ³ÃæµÄÖØмÓÔØ¡£
• Óŵ㣺
  • Óû§ÌåÑéºÃ¡¢¿ì£¬ÄÚÈݵĸı䲻ÐèÒªÖØмÓÔØÕû¸öÒ³Ã棬±ÜÃâÁ˲»±ØÒªµÄÌøתºÍÖظ´äÖȾ£»
  • »ùÓÚÉÏÃæÒ»µã£¬SPA Ïà¶Ô¶Ô·þÎñÆ÷ѹÁ¦Ð¡£»
  • Ç°ºó¶ËÖ°Ôð·ÖÀ룬¼Ü¹¹ÇåÎú£¬Ç°¶Ë½øÐн»»¥Âß¼­£¬ºó¶Ë¸ºÔðÊý¾Ý´¦Àí£»
• ȱµã£º
  • ³õ´Î¼ÓÔغÄʱ¶à£ºÎªÊµÏÖµ¥Ò³ Web Ó¦Óù¦Äܼ°ÏÔʾЧ¹û£¬ÐèÒªÔÚ¼ÓÔØÒ³ÃæµÄʱºò½« JavaScript¡¢CSS ͳһ¼ÓÔØ£¬²¿·ÖÒ³Ãæ°´Ðè¼ÓÔØ£»
  • Ç°½øºóÍË·ÓɹÜÀí£ºÓÉÓÚµ¥Ò³Ó¦ÓÃÔÚÒ»¸öÒ³ÃæÖÐÏÔʾËùÓеÄÄÚÈÝ£¬365betÌåÓýÔÚÏß²»ÄÜʹÓÃä¯ÀÀÆ÷µÄÇ°½øºóÍ˹¦ÄÜ£¬ËùÓеÄÒ³ÃæÇл»ÐèÒª×Ô¼º½¨Á¢¶ÑÕ»¹ÜÀí£»
  • SEO ÄѶȽϴó£ºÓÉÓÚËùÓеÄÄÚÈݶ¼ÔÚÒ»¸öÒ³ÃæÖж¯Ì¬Ìæ»»ÏÔʾ£¬365betÌåÓýÔÚÏßÔÚ SEO ÉÏÆäÓÐ×ÅÌìÈ»µÄÈõÊÆ¡£

Class Óë Style ÈçºÎ¶¯Ì¬°ó¶¨£¿

• Class ¿ÉÒÔͨ¹ý¶ÔÏóÓï·¨ºÍÊý×éÓï·¨½øÐж¯Ì¬°ó¶¨£º

<!-- ¶ÔÏóÓï·¨£º-->
<div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

data: {
  isActive: true,
  hasError: false
}

<!-- Êý×éÓï·¨ -->£º
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

• Style Ò²¿ÉÒÔͨ¹ý¶ÔÏóÓï·¨ºÍÊý×éÓï·¨½øÐж¯Ì¬°ó¶¨£º

<!-- ¶ÔÏóÓï·¨ -->£º
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: {
  activeColor: 'red',
  fontSize: 30
}

<!-- Êý×éÓï·¨ -->£º
<div v-bind:style="[styleColor, styleSize]"></div>

data: {
  styleColor: {
     color: 'red'
   },
  styleSize:{
     fontSize:'23px'
  }
}

 

Àí½â Vue µÄµ¥ÏòÊý¾ÝÁ÷£¿

• ËùÓÐµÄ prop ¶¼Ê¹µÃÆ丸×Ó prop Ö®¼äÐγÉÁËÒ»¸öµ¥ÏòÏÂÐа󶨣º¸¸¼¶ prop µÄ¸üлáÏòÏÂÁ÷¶¯µ½×Ó×é¼þÖУ¬µ«ÊÇ·´¹ýÀ´Ôò²»ÐС£ÕâÑù»á·ÀÖ¹´Ó×Ó×é¼þÒâÍâ¸Ä±ä¸¸¼¶×é¼þµÄ״̬£¬´Ó¶øµ¼ÖÂÄãµÄÓ¦ÓõÄÊý¾ÝÁ÷ÏòÄÑÒÔÀí½â¡£
• ¶îÍâµÄ£¬Ã¿´Î¸¸¼¶×é¼þ·¢Éú¸üÐÂʱ£¬×Ó×é¼þÖÐËùÓÐµÄ prop ¶¼½«»áË¢ÐÂΪ×îеÄÖµ¡£ÕâÒâζ×ÅÄã²»Ó¦¸ÃÔÚÒ»¸ö×Ó×é¼þÄÚ²¿¸Ä±ä prop¡£Èç¹ûÄãÕâÑù×öÁË£¬Vue »áÔÚä¯ÀÀÆ÷µÄ¿ØÖÆ̨Öз¢³ö¾¯¸æ¡£×Ó×é¼þÏëÐÞ¸Äʱ£¬Ö»ÄÜͨ¹ý $emit ÅÉ·¢Ò»¸ö×Ô¶¨Òåʼþ£¬¸¸×é¼þ½ÓÊÕµ½ºó£¬Óɸ¸×é¼þÐ޸ġ£
• ÓÐÁ½ÖÖ³£¼ûµÄÊÔͼ¸Ä±äÒ»¸ö prop µÄÇéÐÎ :
• Õâ¸ö prop ÓÃÀ´´«µÝÒ»¸ö³õʼֵ£»Õâ¸ö×Ó×é¼þ½ÓÏÂÀ´Ï£Íû½«Æä×÷Ϊһ¸ö±¾µØµÄ prop Êý¾ÝÀ´Ê¹ÓᣠÔÚÕâÖÖÇé¿öÏ£¬×îºÃ¶¨ÒåÒ»¸ö±¾µØµÄ data ÊôÐÔ²¢½«Õâ¸ö prop ÓÃ×÷Æä³õʼֵ£º

props: ['initialCounter'],
data: function () {
  return {
    counter: this.initialCounter
  }
}

• Õâ¸ö prop ÒÔ365ÌåÓýͶעԭʼµÄÖµ´«ÈëÇÒÐèÒª½øÐÐת»»¡£ ÔÚÕâÖÖÇé¿öÏ£¬×îºÃʹÓÃÕâ¸ö prop µÄÖµÀ´¶¨ÒåÒ»¸ö¼ÆËãÊôÐÔ

props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

 

computed ºÍ watch µÄÇø±ðºÍÔËÓõij¡¾°£¿

• computed£º ÊǼÆËãÊôÐÔ£¬ÒÀÀµÆäËüÊôÐÔÖµ£¬²¢ÇÒ computed µÄÖµÓлº´æ£¬Ö»ÓÐËüÒÀÀµµÄÊôÐÔÖµ·¢Éú¸Ä±ä£¬ÏÂÒ»´Î»ñÈ¡ computed µÄֵʱ²Å»áÖØмÆËã computed µÄÖµ£»
• watch£º ¸ü¶àµÄÊÇ¡¸¹Û²ì¡¹µÄ×÷Óã¬ÀàËÆÓÚijЩÊý¾ÝµÄ¼àÌý»Øµ÷ £¬Ã¿µ±¼àÌýµÄÊý¾Ý±ä»¯Ê±¶¼»áÖ´Ðлص÷½øÐкóÐø²Ù×÷£»
• ÔËÓó¡¾°£º
  • µ±365betÌåÓýÔÚÏßÃÇÐèÒª½øÐÐÊýÖµ¼ÆË㣬²¢ÇÒÒÀÀµÓÚÆäËüÊý¾Ýʱ£¬Ó¦¸ÃʹÓà computed£¬ÒòΪ¿ÉÒÔÀûÓà computed µÄ»º´æÌØÐÔ£¬±ÜÃâÿ´Î»ñȡֵʱ£¬¶¼ÒªÖØмÆË㣻
  • µ±365betÌåÓýÔÚÏßÃÇÐèÒªÔÚÊý¾Ý±ä»¯Ê±Ö´ÐÐÒì²½»ò¿ªÏú½Ï´óµÄ²Ù×÷ʱ£¬Ó¦¸ÃʹÓà watch£¬Ê¹Óàwatch Ñ¡ÏîÔÊÐí365betÌåÓýÔÚÏßÃÇÖ´ÐÐÒì²½²Ù×÷ ( ·ÃÎÊÒ»¸ö API )£¬ÏÞÖÆ365betÌåÓýÔÚÏßÃÇÖ´ÐиòÙ×÷µÄƵÂÊ£¬²¢ÔÚ365betÌåÓýÔÚÏßÃǵõ½×îÖÕ½á¹ûÇ°£¬ÉèÖÃÖмä״̬¡£ÕâЩ¶¼ÊǼÆËãÊôÐÔÎÞ·¨×öµ½µÄ¡£

Ö±½Ó¸øÒ»¸öÊý×éÏֵ£¬Vue Äܼì²âµ½±ä»¯Âð£¿

• ÓÉÓÚ JavaScript µÄÏÞÖÆ£¬Vue ²»Äܼì²âµ½ÒÔÏÂÊý×éµÄ±ä¶¯£º
• µ±ÄãÀûÓÃË÷ÒýÖ±½ÓÉèÖÃÒ»¸öÊý×éÏîʱ£¬ÀýÈ磺vm.items[indexOfItem] = newValue
• µ±ÄãÐÞ¸ÄÊý×éµÄ³¤¶Èʱ£¬ÀýÈ磺vm.items.length = newLength

<!-- ΪÁ˽â¾öµÚÒ»¸öÎÊÌ⣬Vue ÌṩÁËÒÔϲÙ×÷·½·¨£º -->
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// vm.$set£¬Vue.setµÄÒ»¸ö±ðÃû
vm.$set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

<!-- ΪÁ˽â¾öµÚ¶þ¸öÎÊÌ⣬Vue ÌṩÁËÒÔϲÙ×÷·½·¨£º -->
// Array.prototype.splice
vm.items.splice(newLength)

 

ÔÚÄĸöÉúÃüÖÜÆÚÄÚµ÷ÓÃÒì²½ÇëÇó£¿

• ¿ÉÒÔÔÚ¹³×Óº¯Êý created¡¢beforeMount¡¢mounted ÖнøÐе÷Óã¬ÒòΪÔÚÕâÈý¸ö¹³×Óº¯ÊýÖУ¬data ÒѾ­´´½¨£¬¿ÉÒÔ½«·þÎñ¶Ë¶Ë·µ»ØµÄÊý¾Ý½øÐи³Öµ¡£µ«ÊDZ¾ÈËÍƼöÔÚ created ¹³×Óº¯ÊýÖе÷ÓÃÒì²½ÇëÇó£¬ÒòΪÔÚ created ¹³×Óº¯ÊýÖе÷ÓÃÒì²½ÇëÇóÓÐÒÔÏÂ
• Óŵ㣺
  • Äܸü¿ì»ñÈ¡µ½·þÎñ¶ËÊý¾Ý£¬¼õÉÙÒ³Ãæ loading ʱ¼ä£»
  • ssr ²»Ö§³Ö beforeMount ¡¢mounted ¹³×Óº¯Êý£¬365betÌåÓýÔÚÏß·ÅÔÚ created ÖÐÓÐÖúÓÚÒ»ÖÂÐÔ£»

¸¸×é¼þ¿ÉÒÔ¼àÌýµ½×Ó×é¼þµÄÉúÃüÖÜÆÚÂð£¿

• ±ÈÈçÓи¸×é¼þ Parent ºÍ×Ó×é¼þ Child£¬Èç¹û¸¸×é¼þ¼àÌýµ½×Ó×é¼þ¹ÒÔØ mounted ¾Í×öһЩÂß¼­´¦Àí£¬¿ÉÒÔͨ¹ýÒÔÏÂд·¨ÊµÏÖ£º

// Parent.vue
<Child @mounted="doSomething"/>
    
// Child.vue
mounted() {
  this.$emit("mounted");
}

• ÒÔÉÏÐèÒªÊÖ¶¯Í¨¹ý $emit ´¥·¢¸¸×é¼þµÄʼþ£¬¸ü¼òµ¥µÄ·½Ê½¿ÉÒÔÔÚ¸¸×é¼þÒýÓÃ×Ó×é¼þʱͨ¹ý @hook À´¼àÌý¼´¿É£¬ÈçÏÂËùʾ£º

//  Parent.vue
<Child @hook:mounted="doSomething" ></Child>

doSomething() {
   console.log('¸¸×é¼þ¼àÌýµ½ mounted ¹³×Óº¯Êý ...');
},

//  Child.vue
mounted(){
   console.log('×Ó×é¼þ´¥·¢ mounted ¹³×Óº¯Êý ...');
},        
// ÒÔÉÏÊä³ö˳ÐòΪ£º
// ×Ó×é¼þ´¥·¢ mounted ¹³×Óº¯Êý ...
// ¸¸×é¼þ¼àÌýµ½ mounted ¹³×Óº¯Êý ...     

• µ±È» @hook ·½·¨²»½ö½öÊÇ¿ÉÒÔ¼àÌý mounted£¬ÆäËüµÄÉúÃüÖÜÆÚʼþ£¬ÀýÈ磺created£¬updated µÈ¶¼¿ÉÒÔ¼àÌý

×é¼þÖÐ data ΪʲôÊÇÒ»¸öº¯Êý£¿

• ÒòΪ×é¼þÊÇÓÃÀ´¸´Óõģ¬ÇÒ JS Àï¶ÔÏóÊÇÒýÓùØϵ£¬Èç¹û×é¼þÖÐ data ÊÇÒ»¸ö¶ÔÏó£¬ÄÇôÕâÑù×÷ÓÃÓòûÓиôÀ룬×Ó×é¼þÖÐµÄ data ÊôÐÔÖµ»áÏ໥ӰÏ죬Èç¹û×é¼þÖÐ data Ñ¡ÏîÊÇÒ»¸öº¯Êý£¬ÄÇô365ÌåÓýͶעʵÀý¿ÉÒÔά»¤Ò»·Ý±»·µ»Ø¶ÔÏóµÄ¶ÀÁ¢µÄ¿½±´£¬×é¼þʵÀýÖ®¼äµÄ data ÊôÐÔÖµ²»»á»¥ÏàÓ°Ï죻¶ø new Vue µÄʵÀý£¬ÊDz»»á±»¸´Óõģ¬Òò´Ë²»´æÔÚÒýÓöÔÏóµÄÎÊÌâ¡£

Vue ÔõôÓà vm.$set() ½â¾ö¶ÔÏóÐÂÔöÊôÐÔ²»ÄÜÏìÓ¦µÄÎÊÌâ £¿

• ÊÜÏÖ´ú JavaScript µÄÏÞÖÆ £¬Vue ÎÞ·¨¼ì²âµ½¶ÔÏóÊôÐÔµÄÌí¼Ó»òɾ³ý¡£ÓÉÓÚ Vue »áÔÚ³õʼ»¯ÊµÀýʱ¶ÔÊôÐÔÖ´ÐÐ getter/setter ת»¯£¬365betÌåÓýÔÚÏßÊôÐÔ±ØÐëÔÚ data ¶ÔÏóÉÏ´æÔÚ²ÅÄÜÈà Vue ½«Ëüת»»ÎªÏìӦʽµÄ¡£µ«ÊÇ Vue ÌṩÁË Vue.set (object, propertyName, value) / vm.$set (object, propertyName, value) À´ÊµÏÖΪ¶ÔÏóÌí¼ÓÏìӦʽÊôÐÔ£¬ÄÇ¿ò¼Ü±¾ÉíÊÇÈçºÎʵÏÖµÄÄØ£¿

Vue Ô´Âë
export function set (target: Array<any> | Object, key: any, val: any): any {
  // target ΪÊý×é  
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    // ÐÞ¸ÄÊý×éµÄ³¤¶È, ±ÜÃâË÷Òý>Êý×鳤¶Èµ¼ÖÂsplcie()Ö´ÐÐÓÐÎó
    target.length = Math.max(target.length, key)
    // ÀûÓÃÊý×éµÄsplice±äÒì·½·¨´¥·¢ÏìӦʽ  
    target.splice(key, 1, val)
    return val
  }
  // key ÒѾ­´æÔÚ£¬Ö±½ÓÐÞ¸ÄÊôÐÔÖµ  
  if (key in target && !(key in Object.prototype)) {
    target[key] = val
    return val
  }
  const ob = (target: any).__ob__
  // target ±¾Éí¾Í²»ÊÇÏìӦʽÊý¾Ý, Ö±½Ó¸³Öµ
  if (!ob) {
    target[key] = val
    return val
  }
  // ¶ÔÊôÐÔ½øÐÐÏìӦʽ´¦Àí
  defineReactive(ob.value, key, val)
  ob.dep.notify()
  return val
}

• ÔĶÁÒÔÉÏÔ´Âë¿ÉÖª£¬vm.$set µÄʵÏÖÔ­ÀíÊÇ£º
• Èç¹ûÄ¿±êÊÇÊý×飬ֱ½ÓʹÓÃÊý×éµÄ splice ·½·¨´¥·¢ÏàӦʽ£»
• Èç¹ûÄ¿±êÊǶÔÏ󣬻áÏÈÅжÁÊôÐÔÊÇ·ñ´æÔÚ¡¢¶ÔÏóÊÇ·ñÊÇÏìӦʽ£¬×îÖÕÈç¹ûÒª¶ÔÊôÐÔ½øÐÐÏìӦʽ´¦Àí£¬ÔòÊÇͨ¹ýµ÷Óà defineReactive ·½·¨½øÐÐÏìӦʽ´¦Àí£¨ defineReactive ·½·¨¾ÍÊÇ Vue ÔÚ³õʼ»¯¶ÔÏóʱ£¬¸ø¶ÔÏóÊôÐÔ²ÉÓà Object.defineProperty ¶¯Ì¬Ìí¼Ó getter ºÍ setter µÄ¹¦ÄÜËùµ÷Óõķ½·¨£©

Vue ÖÐµÄ key ÓÐʲô×÷Óã¿

• key ÊÇΪ Vue ÖÐ vnode µÄΨһ±ê¼Ç£¬Í¨¹ýÕâ¸ö key£¬365betÌåÓýÔÚÏßÃÇµÄ diff ²Ù×÷¿ÉÒÔ¸ü׼ȷ¡¢¸ü¿ìËÙ¡£
• Vue µÄ diff ¹ý³Ì¿ÉÒÔ¸ÅÀ¨Îª£ºoldCh ºÍ newCh ¸÷ÓÐÁ½¸öͷβµÄ±äÁ¿ oldStartIndex¡¢oldEndIndex ºÍ newStartIndex¡¢newEndIndex£¬ËüÃÇ»áнڵãºÍ¾É½Úµã»á½øÐÐÁ½Á½¶Ô±È£¬¼´Ò»¹²ÓÐ4ÖֱȽϷ½Ê½£ºnewStartIndex ºÍoldStartIndex ¡¢newEndIndex ºÍ oldEndIndex ¡¢newStartIndex ºÍ oldEndIndex ¡¢newEndIndex ºÍ oldStartIndex£¬Èç¹ûÒÔÉÏ 4 ÖֱȽ϶¼Ã»Æ¥Å䣬Èç¹ûÉèÖÃÁËkey£¬¾Í»áÓà key ÔÙ½øÐбȽϣ¬ÔڱȽϵĹý³ÌÖУ¬±éÀú»áÍùÖм俿£¬Ò»µ© StartIdx > EndIdx ±íÃ÷ oldCh ºÍ newCh ÖÁÉÙÓÐÒ»¸öÒѾ­±éÀúÍêÁË£¬¾Í»á½áÊø±È½Ï¡£
• 365betÌåÓýÔÚÏß Vue ÖÐ key µÄ×÷ÓÃÊÇ£ºkey ÊÇΪ Vue ÖÐ vnode µÄΨһ±ê¼Ç£¬Í¨¹ýÕâ¸ö key£¬365betÌåÓýÔÚÏßÃÇµÄ diff ²Ù×÷¿ÉÒÔ¸ü׼ȷ¡¢¸ü¿ìËÙ¡£
• ¸ü׼ȷ£ºÒòΪ´ø key ¾Í²»ÊǾ͵ظ´ÓÃÁË£¬ÔÚ sameNode º¯Êý a.key === b.key ¶Ô±ÈÖпÉÒÔ±ÜÃâ¾ÍµØ¸´ÓõÄÇé¿ö¡£365betÌåÓýÔÚÏß»á¸ü¼Ó׼ȷ¡£
• ¸ü¿ìËÙ£ºÀûÓà key µÄΨһÐÔÉú³É map ¶ÔÏóÀ´»ñÈ¡¶ÔÓ¦½Úµã£¬±È±éÀú·½Ê½¸ü¿ì£¬Ô´ÂëÈçÏ£º

function createKeyToOldIdx (children, beginIdx, endIdx) {
  let i, key
  const map = {}
  for (i = beginIdx; i <= endIdx; ++i) {
    key = children[i].key
    if (isDef(key)) map[key] = i
  }
  return map
}

 

˵˵¶ÔÓÚ SSRÁ˽⣿ÓÐûÓÐʹÓùý£¿

• Vue.js Êǹ¹½¨¿Í»§¶ËÓ¦ÓóÌÐòµÄ¿ò¼Ü¡£Ä¬ÈÏÇé¿öÏ£¬¿ÉÒÔÔÚä¯ÀÀÆ÷ÖÐÊä³ö Vue ×é¼þ£¬½øÐÐÉú³É DOM ºÍ²Ù×÷ DOM¡£È»¶ø£¬Ò²¿ÉÒÔ½«Í¬Ò»¸ö×é¼þäÖȾΪ·þÎñ¶ËµÄ HTML ×Ö·û´®£¬½«ËüÃÇÖ±½Ó·¢Ë͵½ä¯ÀÀÆ÷£¬×îºó½«ÕâЩ¾²Ì¬±ê¼Ç"¼¤»î"Ϊ¿Í»§¶ËÉÏÍêÈ«¿É½»»¥µÄÓ¦ÓóÌÐò¡£
• ¼´£ºSSR´óÖµÄÒâ˼¾ÍÊÇvueÔÚ¿Í»§¶Ë½«±êÇ©äÖȾ³ÉµÄÕû¸ö html Ƭ¶ÎµÄ¹¤×÷ÔÚ·þÎñ¶ËÍê³É£¬·þÎñ¶ËÐγɵÄhtml Ƭ¶ÎÖ±½Ó·µ»Ø¸ø¿Í»§¶ËÕâ¸ö¹ý³Ì¾Í½Ð×ö·þÎñ¶ËäÖȾ¡£
• Óŵ㣺
  • ¸üºÃµÄ SEO£º ÒòΪ SPA Ò³ÃæµÄÄÚÈÝÊÇͨ¹ý Ajax »ñÈ¡£¬¶øËÑË÷ÒýÇæÅÀÈ¡¹¤¾ß²¢²»»áµÈ´ý Ajax Òì²½Íê³ÉºóÔÙץȡҳÃæÄÚÈÝ£¬365betÌåÓýÔÚÏßÔÚ SPA ÖÐÊÇץȡ²»µ½Ò³Ãæͨ¹ý Ajax »ñÈ¡µ½µÄÄÚÈÝ£»¶ø SSR ÊÇÖ±½ÓÓÉ·þÎñ¶Ë·µ»ØÒѾ­äÖȾºÃµÄÒ³Ã棨Êý¾ÝÒѾ­°üº¬ÔÚÒ³ÃæÖУ©£¬365betÌåÓýÔÚÏßËÑË÷ÒýÇæÅÀÈ¡¹¤¾ß¿ÉÒÔץȡäÖȾºÃµÄÒ³Ã棻
  • ¸ü¿ìµÄÄÚÈݵ½´ïʱ¼ä£¨Ê×ÆÁ¼ÓÔظü¿ì£©£º SPA »áµÈ´ýËùÓÐ Vue ±àÒëºóµÄ js Îļþ¶¼ÏÂÔØÍê³Éºó£¬²Å¿ªÊ¼½øÐÐÒ³ÃæµÄäÖȾ£¬ÎļþÏÂÔصÈÐèÒªÒ»¶¨µÄʱ¼äµÈ£¬365betÌåÓýÔÚÏßÊ×ÆÁäÖȾÐèÒªÒ»¶¨µÄʱ¼ä£»SSR Ö±½ÓÓÉ·þÎñ¶ËäÖȾºÃÒ³ÃæÖ±½Ó·µ»ØÏÔʾ£¬ÎÞÐèµÈ´ýÏÂÔØ js Îļþ¼°ÔÙÈ¥äÖȾµÈ£¬365betÌåÓýÔÚÏß SSR Óиü¿ìµÄÄÚÈݵ½´ïʱ¼ä£»
• ȱµã£º
  • ¸ü¶àµÄ¿ª·¢Ìõ¼þÏÞÖÆ£º ÀýÈç·þÎñ¶ËäÖȾֻ֧³Ö beforCreate ºÍ created Á½¸ö¹³×Óº¯Êý£¬Õâ»áµ¼ÖÂһЩÍⲿÀ©Õ¹¿âÐèÒªÌØÊâ´¦Àí£¬²ÅÄÜÔÚ·þÎñ¶ËäÖȾӦÓóÌÐòÖÐÔËÐУ»²¢ÇÒÓë¿ÉÒÔ²¿ÊðÔÚÈκξ²Ì¬Îļþ·þÎñÆ÷ÉϵÄÍêÈ«¾²Ì¬µ¥Ò³ÃæÓ¦ÓóÌÐò SPA ²»Í¬£¬·þÎñ¶ËäÖȾӦÓóÌÐò£¬ÐèÒª´¦ÓÚ Node.js server ÔËÐл·¾³£»
  • ¸ü¶àµÄ·þÎñÆ÷¸ºÔØ£ºÔÚ Node.js ÖÐäÖȾÍêÕûµÄÓ¦ÓóÌÐò£¬ÏÔÈ»»á±È½ö½öÌṩ¾²Ì¬ÎļþµÄ server ¸ü¼Ó´óÁ¿Õ¼ÓÃCPU ×ÊÔ´¡£

·þÎñ¶ËäÖȾ SSR or Ô¤äÖȾ

• ·þÎñ¶ËäÖȾÊÇÖ¸ Vue ÔÚ¿Í»§¶Ë½«±êÇ©äÖȾ³ÉµÄÕû¸ö html Ƭ¶ÎµÄ¹¤×÷ÔÚ·þÎñ¶ËÍê³É£¬·þÎñ¶ËÐÎ³ÉµÄ html Ƭ¶ÎÖ±½Ó·µ»Ø¸ø¿Í»§¶ËÕâ¸ö¹ý³Ì¾Í½Ð×ö·þÎñ¶ËäÖȾ¡£
• ·þÎñ¶ËäÖȾµÄÓŵ㣺
  • ¸üºÃµÄ SEO£º ÒòΪ SPA Ò³ÃæµÄÄÚÈÝÊÇͨ¹ý Ajax »ñÈ¡£¬¶øËÑË÷ÒýÇæÅÀÈ¡¹¤¾ß²¢²»»áµÈ´ý Ajax Òì²½Íê³ÉºóÔÙץȡҳÃæÄÚÈÝ£¬365betÌåÓýÔÚÏßÔÚ SPA ÖÐÊÇץȡ²»µ½Ò³Ãæͨ¹ý Ajax »ñÈ¡µ½µÄÄÚÈÝ£»¶ø SSR ÊÇÖ±½ÓÓÉ·þÎñ¶Ë·µ»ØÒѾ­äÖȾºÃµÄÒ³Ã棨Êý¾ÝÒѾ­°üº¬ÔÚÒ³ÃæÖУ©£¬365betÌåÓýÔÚÏßËÑË÷ÒýÇæÅÀÈ¡¹¤¾ß¿ÉÒÔץȡäÖȾºÃµÄÒ³Ã棻
  • ¸ü¿ìµÄÄÚÈݵ½´ïʱ¼ä£¨Ê×ÆÁ¼ÓÔظü¿ì£©£º SPA »áµÈ´ýËùÓÐ Vue ±àÒëºóµÄ js Îļþ¶¼ÏÂÔØÍê³Éºó£¬²Å¿ªÊ¼½øÐÐÒ³ÃæµÄäÖȾ£¬ÎļþÏÂÔصÈÐèÒªÒ»¶¨µÄʱ¼äµÈ£¬365betÌåÓýÔÚÏßÊ×ÆÁäÖȾÐèÒªÒ»¶¨µÄʱ¼ä£»SSR Ö±½ÓÓÉ·þÎñ¶ËäÖȾºÃÒ³ÃæÖ±½Ó·µ»ØÏÔʾ£¬ÎÞÐèµÈ´ýÏÂÔØ js Îļþ¼°ÔÙÈ¥äÖȾµÈ£¬365betÌåÓýÔÚÏß SSR Óиü¿ìµÄÄÚÈݵ½´ïʱ¼ä£»
• ·þÎñ¶ËäÖȾµÄȱµã£º
  • ¸ü¶àµÄ¿ª·¢Ìõ¼þÏÞÖÆ£º ÀýÈç·þÎñ¶ËäÖȾֻ֧³Ö beforCreate ºÍ created Á½¸ö¹³×Óº¯Êý£¬Õâ»áµ¼ÖÂһЩÍⲿÀ©Õ¹¿âÐèÒªÌØÊâ´¦Àí£¬²ÅÄÜÔÚ·þÎñ¶ËäÖȾӦÓóÌÐòÖÐÔËÐУ»²¢ÇÒÓë¿ÉÒÔ²¿ÊðÔÚÈκξ²Ì¬Îļþ·þÎñÆ÷ÉϵÄÍêÈ«¾²Ì¬µ¥Ò³ÃæÓ¦ÓóÌÐò SPA ²»Í¬£¬·þÎñ¶ËäÖȾӦÓóÌÐò£¬ÐèÒª´¦ÓÚ Node.js server ÔËÐл·¾³£»
  • ¸ü¶àµÄ·þÎñÆ÷¸ºÔØ£ºÔÚ Node.js ÖÐäÖȾÍêÕûµÄÓ¦ÓóÌÐò£¬ÏÔÈ»»á±È½ö½öÌṩ¾²Ì¬ÎļþµÄ server ¸ü¼Ó´óÁ¿Õ¼ÓÃCPU ×ÊÔ´£¬Òò´ËÈç¹ûÄãÔ¤ÁÏÔÚ¸ßÁ÷Á¿»·¾³ÏÂʹÓã¬Çë×¼±¸ÏàÓ¦µÄ·þÎñÆ÷¸ºÔØ£¬²¢Ã÷ÖǵزÉÓûº´æ²ßÂÔ¡£
  • Èç¹ûÄãµÄÏîÄ¿µÄ SEO ºÍ Ê×ÆÁäÖȾÊÇÆÀ¼ÛÏîÄ¿µÄ¹Ø¼üÖ¸±ê£¬ÄÇôÄãµÄÏîÄ¿¾ÍÐèÒª·þÎñ¶ËäÖȾÀ´°ïÖúÄãʵÏÖ×î¼ÑµÄ³õʼ¼ÓÔØÐÔÄÜºÍ SEO¡£Èç¹ûÄãµÄ Vue ÏîÄ¿Ö»Ðè¸ÄÉÆÉÙÊýÓªÏúÒ³Ã棨ÀýÈç  /products£¬ /about£¬ /contact µÈ£©µÄ SEO£¬ÄÇôÄã¿ÉÄÜÐèÒªÔ¤äÖȾ£¬ÔÚ¹¹½¨Ê± (build time) ¼òµ¥µØÉú³ÉÕë¶ÔÌض¨Â·Óɵľ²Ì¬ HTML Îļþ¡£ÓŵãÊÇÉèÖÃÔ¤äÖȾ¸ü¼òµ¥£¬²¢¿ÉÒÔ½«ÄãµÄÇ°¶Ë×÷Ϊһ¸öÍêÈ«¾²Ì¬µÄÕ¾µã£¬¾ßÌåÄã¿ÉÒÔʹÓà prerender-spa-plugin ¾Í¿ÉÒÔÇáËɵØÌí¼ÓÔ¤äÖȾ ¡£

ÐéÄâ DOM µÄÓÅȱµã£¿

• Óŵ㣺
  • ±£Ö¤ÐÔÄÜÏÂÏÞ£º ¿ò¼ÜµÄÐéÄâ DOM ÐèÒªÊÊÅäÈκÎÉϲã API ¿ÉÄܲúÉúµÄ²Ù×÷£¬ËüµÄһЩ DOM ²Ù×÷µÄʵÏÖ±ØÐëÊÇÆÕÊʵģ¬365betÌåÓýÔÚÏßËüµÄÐÔÄܲ¢²»ÊÇ×îÓŵģ»µ«ÊDZÈÆð´Ö±©µÄ DOM ²Ù×÷ÐÔÄÜÒªºÃºÜ¶à£¬Òò´Ë¿ò¼ÜµÄÐéÄâ DOM ÖÁÉÙ¿ÉÒÔ±£Ö¤ÔÚÄã²»ÐèÒªÊÖ¶¯ÓÅ»¯µÄÇé¿öÏ£¬ÒÀÈ»¿ÉÒÔÌṩ»¹²»´íµÄÐÔÄÜ£¬¼´±£Ö¤ÐÔÄܵÄÏÂÏÞ£»
  • ÎÞÐèÊÖ¶¯²Ù×÷ DOM£º 365betÌåÓýÔÚÏßÃDz»ÔÙÐèÒªÊÖ¶¯È¥²Ù×÷ DOM£¬Ö»ÐèҪдºÃ View-Model µÄ´úÂëÂß¼­£¬¿ò¼Ü»á¸ù¾ÝÐéÄâ DOM ºÍ Êý¾ÝË«Ïò°ó¶¨£¬°ï365betÌåÓýÔÚÏßÃÇÒÔ¿ÉÔ¤Æڵķ½Ê½¸üÐÂÊÓͼ£¬¼«´óÌá¸ß365betÌåÓýÔÚÏßÃǵĿª·¢Ð§ÂÊ£»
  • ¿çƽ̨£º ÐéÄâ DOM ±¾ÖÊÉÏÊÇ JavaScript ¶ÔÏó,¶ø DOM Óëƽ̨ǿÏà¹Ø£¬Ïà±ÈÖ®ÏÂÐéÄâ DOM ¿ÉÒÔ½øÐиü·½±ãµØ¿çƽ̨²Ù×÷£¬ÀýÈç·þÎñÆ÷äÖȾ¡¢weex ¿ª·¢µÈµÈ¡£
• ȱµã:
  • ÎÞ·¨½øÐм«ÖÂÓÅ»¯£º ËäÈ»ÐéÄâ DOM + ºÏÀíµÄÓÅ»¯£¬×ãÒÔÓ¦¶Ô¾ø´ó²¿·ÖÓ¦ÓõÄÐÔÄÜÐèÇ󣬵«ÔÚһЩÐÔÄÜÒªÇ󼫸ߵÄÓ¦ÓÃÖÐÐéÄâ DOM ÎÞ·¨½øÐÐÕë¶ÔÐԵļ«ÖÂÓÅ»¯¡£

ÐéÄâ DOM ʵÏÖÔ­Àí£¿

• ÐéÄâ DOM µÄʵÏÖÔ­ÀíÖ÷Òª°üÀ¨ÒÔÏ 3 ²¿·Ö£º
  • Óà JavaScript ¶ÔÏóÄ£ÄâÕæʵ DOM Ê÷£¬¶ÔÕæʵ DOM ½øÐгéÏó£»
  • diff Ëã·¨ ¡ª ±È½ÏÁ½¿ÃÐéÄâ DOM Ê÷µÄ²îÒ죻
  • pach Ëã·¨ ¡ª ½«Á½¸öÐéÄâ DOM ¶ÔÏóµÄ²îÒìÓ¦Óõ½ÕæÕýµÄ DOM Ê÷¡£

Vue ÏîÄ¿ÓÅ»¯

• ´úÂë²ãÃæµÄÓÅ»¯
  • v-if ºÍ v-show Çø·ÖʹÓó¡¾°
  • computed ºÍ watch Çø·ÖʹÓó¡¾°
  • v-for ±éÀú±ØÐëΪ item Ìí¼Ó key£¬ÇÒ±ÜÃâͬʱʹÓà v-if
  • ³¤ÁбíÐÔÄÜÓÅ»¯
  • ʼþµÄÏú»Ù
  • ͼƬ×ÊÔ´ÀÁ¼ÓÔØ
  • ·ÓÉÀÁ¼ÓÔØ
  • µÚÈý·½²å¼þµÄ°´ÐèÒýÈë
  • ÓÅ»¯ÎÞÏÞÁбíÐÔÄÜ
  • ·þÎñ¶ËäÖȾ SSR or Ô¤äÖȾ
• Webpack ²ãÃæµÄÓÅ»¯
  • Webpack ¶ÔͼƬ½øÐÐѹËõ
  • ¼õÉÙ ES6 תΪ ES5 µÄÈßÓà´úÂë
  • ÌáÈ¡¹«¹²´úÂë
  • Ä£°åÔ¤±àÒë
  • ÌáÈ¡×é¼þµÄ CSS
  • ÓÅ»¯ SourceMap
  • ¹¹½¨½á¹ûÊä³ö·ÖÎö
  • Vue ÏîÄ¿µÄ±àÒëÓÅ»¯
• »ù´¡µÄ Web ¼¼ÊõµÄÓÅ»¯
  • ¿ªÆô gzip ѹËõ
  • ä¯ÀÀÆ÷»º´æ
  • CDN µÄʹÓÃ
  • ʹÓà Chrome Performance ²éÕÒÐÔÄÜÆ¿¾±

vue3.0 ÌØÐÔµÄÁ˽â

• ¼à²â»úÖƵĸıä
  • Vue3.0 ½«´øÀ´»ùÓÚ´úÀí Proxy µÄ observer ʵÏÖ£¬ÌṩȫÓïÑÔ¸²¸ÇµÄ·´Ó¦ÐÔ¸ú×Ù¡£ÕâÏû³ýÁË Vue 2 µ±ÖлùÓÚ Object.defineProperty µÄʵÏÖËù´æÔڵĺܶàÏÞÖÆ£º¢ÙÖ»Äܼà²âÊôÐÔ£¬²»Äܼà²â¶ÔÏ󣻢ڼì²âÊôÐÔµÄÌí¼ÓºÍɾ³ý£»¢Û¼ì²âÊý×éË÷ÒýºÍ³¤¶ÈµÄ±ä¸ü£»¢ÜÖ§³Ö Map¡¢Set¡¢WeakMap ºÍ WeakSet¡£
• Ð嵀 observer »¹ÌṩÁËÒÔÏÂÌØÐÔ£º
  • ÓÃÓÚ´´½¨ observable µÄ¹«¿ª API¡£ÕâΪÖÐС¹æÄ£³¡¾°ÌṩÁ˼òµ¥ÇáÁ¿¼¶µÄ¿ç×é¼þ״̬¹ÜÀí½â¾ö·½°¸¡£
  • ĬÈϲÉÓöèÐԹ۲졣ÔÚ 2.x ÖУ¬²»¹Ü·´Ó¦Ê½Êý¾ÝÓжà´ó£¬¶¼»áÔÚÆô¶¯Ê±±»¹Û²ìµ½¡£Èç¹ûÄãµÄÊý¾Ý¼¯ºÜ´ó£¬Õâ¿ÉÄÜ»áÔÚÓ¦ÓÃÆô¶¯Ê±´øÀ´Ã÷ÏԵĿªÏú¡£ÔÚ 3.x ÖУ¬Ö»¹Û²ìÓÃÓÚäÖȾӦÓóÌÐò×î³õ¿É¼û²¿·ÖµÄÊý¾Ý¡£
  • ¸ü¾«È·µÄ±ä¸ü֪ͨ¡£ÔÚ 2.x ÖУ¬Í¨¹ý Vue.set Ç¿ÖÆÌí¼ÓÐÂÊôÐÔ½«µ¼ÖÂÒÀÀµÓڸöÔÏóµÄ watcher ÊÕµ½±ä¸ü֪ͨ¡£ÔÚ 3.x ÖУ¬Ö»ÓÐÒÀÀµÓÚÌض¨ÊôÐ﵀ watcher ²Å»áÊÕµ½Í¨Öª¡£
  • ²»¿É±äµÄ observable£º365betÌåÓýÔÚÏßÃÇ¿ÉÒÔ´´½¨ÖµµÄ¡°²»¿É±ä¡±°æ±¾£¨¼´Ê¹ÊÇǶÌ×ÊôÐÔ£©£¬³ý·ÇϵͳÔÚÄÚ²¿ÔÝʱ½«Æä¡°½â½û¡±¡£Õâ¸ö»úÖÆ¿ÉÓÃÓÚ¶³½á prop ´«µÝ»ò Vuex ״̬Ê÷ÒÔÍâµÄ±ä»¯¡£
  • ¸üºÃµÄµ÷ÊÔ¹¦ÄÜ£º365betÌåÓýÔÚÏßÃÇ¿ÉÒÔʹÓÃÐ嵀 renderTracked ºÍ renderTriggered ¹³×Ó¾«È·µØ¸ú×Ù×é¼þÔÚʲôʱºòÒÔ¼°ÎªÊ²Ã´ÖØÐÂäÖȾ¡£
• Ä£°å
  • Ä£°å·½ÃæûÓдóµÄ±ä¸ü£¬Ö»¸ÄÁË×÷ÓÃÓò²å²Û£¬2.x µÄ»úÖƵ¼ÖÂ×÷ÓÃÓò²å²Û±äÁË£¬¸¸×é¼þ»áÖØÐÂäÖȾ£¬¶ø 3.0 °Ñ×÷ÓÃÓò²å²Û¸Ä³ÉÁ˺¯ÊýµÄ·½Ê½£¬ÕâÑùÖ»»áÓ°Ïì×Ó×é¼þµÄÖØÐÂäÖȾ£¬ÌáÉýÁËäÖȾµÄÐÔÄÜ¡£
  • ͬʱ£¬¶ÔÓÚ render º¯ÊýµÄ·½Ã棬vue3.0 Ò²»á½øÐÐһϵÁиü¸ÄÀ´·½±ãÏ°¹ßÖ±½ÓʹÓà api À´Éú³É vdom ¡£
• ¶ÔÏóʽµÄ×é¼þÉùÃ÷·½Ê½
  • vue2.x ÖеÄ×é¼þÊÇͨ¹ýÉùÃ÷µÄ·½Ê½´«ÈëһϵÁÐ option£¬ºÍ TypeScript µÄ½áºÏÐèҪͨ¹ýһЩװÊÎÆ÷µÄ·½Ê½À´×ö£¬ËäÈ»ÄÜʵÏÖ¹¦ÄÜ£¬µ«ÊDZȽÏÂé·³¡£3.0 ÐÞ¸ÄÁË×é¼þµÄÉùÃ÷·½Ê½£¬¸Ä³ÉÁËÀàʽµÄд·¨£¬ÕâÑùʹµÃºÍ TypeScript µÄ½áºÏ±äµÃºÜÈÝÒס£
  • ´ËÍ⣬vue µÄÔ´ÂëÒ²¸ÄÓÃÁË TypeScript À´Ð´¡£Æäʵµ±´úÂëµÄ¹¦Äܸ´ÔÓÖ®ºó£¬±ØÐëÓÐÒ»¸ö¾²Ì¬ÀàÐÍϵͳÀ´×öһЩ¸¨Öú¹ÜÀí¡£ÏÖÔÚ vue3.0 ҲȫÃæ¸ÄÓà TypeScript À´ÖØдÁË£¬¸üÊÇʹµÃ¶ÔÍⱩ¶µÄ api ¸üÈÝÒ×½áºÏ TypeScript¡£¾²Ì¬ÀàÐÍϵͳ¶ÔÓÚ¸´ÔÓ´úÂëµÄά»¤È·ÊµºÜÓбØÒª¡£
• ÆäËü·½ÃæµÄ¸ü¸Ä
  • vue3.0 µÄ¸Ä±äÊÇÈ«ÃæµÄ£¬ÉÏÃæÖ»Éæ¼°µ½Ö÷ÒªµÄ 3 ¸ö·½Ã棬»¹ÓÐһЩÆäËüµÄ¸ü¸Ä£º
  • Ö§³Ö×Ô¶¨ÒåäÖȾÆ÷£¬´Ó¶øʹµÃ weex ¿ÉÒÔͨ¹ý×Ô¶¨ÒåäÖȾÆ÷µÄ·½Ê½À´À©Õ¹£¬¶ø²»ÊÇÖ±½Ó fork Ô´ÂëÀ´¸ÄµÄ·½Ê½¡£
  • Ö§³Ö Fragment£¨¶à¸ö¸ù½Úµã£©ºÍ Protal£¨ÔÚ dom ÆäËü²¿·ÖäÖȾ×齨ÄÚÈÝ£©×é¼þ£¬Õë¶ÔһЩÌØÊâµÄ³¡¾°×öÁË´¦Àí¡£
  • »ùÓÚ treeshaking ÓÅ»¯£¬ÌṩÁ˸ü¶àµÄÄÚÖù¦ÄÜ¡£

Vue·ÓÉÌøת·½Ê½ÓÐÄļ¸ÖÖ£¿

• router-link

**²»´ø²ÎÊý** 
<router-link :to="{name:'home'}"> 
<router-link :to="{path:'/home'}"> //name,path¶¼ÐÐ, ½¨ÒéÓÃname  
// ×¢Ò⣺router-linkÖÐÁ´½ÓÈç¹ûÊÇ'/'¿ªÊ¼¾ÍÊÇ´Ó¸ù·ÓÉ¿ªÊ¼£¬Èç¹û¿ªÊ¼²»´ø'/'£¬Ôò´Óµ±Ç°Â·ÓÉ¿ªÊ¼¡£ 
´ø²ÎÊý
<router-link :to="{name:'home', params: {id:1}}">       
// params´«²ÎÊý (ÀàËÆpost)
// ·ÓÉÅäÖà path: "/home/:id" »òÕß path: "/home:id" 
// ²»ÅäÖÃpath ,µÚÒ»´Î¿ÉÇëÇó,Ë¢ÐÂÒ³Ãæid»áÏûʧ
// ÅäÖÃpath,Ë¢ÐÂÒ³Ãæid»á±£Áô     
// html È¡²Î  $route.params.id
// script È¡²Î  this.$route.params.id 
<router-link :to="{name:'home', query: {id:1}}"> 
// query´«²ÎÊý (ÀàËÆget,urlºóÃæ»áÏÔʾ²ÎÊý)
// ·Óɿɲ»ÅäÖÃ
// html È¡²Î  $route.query.id
// script È¡²Î  this.$route.query.id

• this.$router.push() (º¯ÊýÀïÃæµ÷ÓÃ)

<!-- ²»´ø²ÎÊý --> 
this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})
<!-- query´«²Î --> 
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}}) 
// html È¡²Î  $route.query.id
// script È¡²Î  this.$route.query.id

• params´«²Î

this.$router.push({name:'home',params: {id:'1'}})  // Ö»ÄÜÓà name
// ·ÓÉÅäÖà path: "/home/:id" »òÕß path: "/home:id" ,
// ²»ÅäÖÃpath ,µÚÒ»´Î¿ÉÇëÇó,Ë¢ÐÂÒ³Ãæid»áÏûʧ
// ÅäÖÃpath,Ë¢ÐÂÒ³Ãæid»á±£Áô
// html È¡²Î  $route.params.id
// script È¡²Î  this.$route.params.id 

• queryºÍparamsÇø±ð

queryÀàËÆget Ìøת֮ºóÒ³Ãæ urlºóÃæ»áÆ´½Ó²ÎÊý,ÀàËÆ?id=1, ·ÇÖØÒªÐԵĿÉÒÔÕâÑù´«, ÃÜÂëÖ®À໹ÊÇÓÃparamsË¢ÐÂÒ³Ãæid»¹ÔÚ 
paramsÀàËÆ post, Ìøת֮ºóÒ³Ãæ urlºóÃæ²»»áÆ´½Ó²ÎÊý , µ«ÊÇË¢ÐÂÒ³Ãæid »áÏûʧ
3.this.$router.replace() (Ó÷¨Í¬ÉÏ,push)
4. this.$router.go(n) ()

 

±Õ°ü

• ÃܱյÄÈÝÆ÷,ÀàËÆset,mapÈÝÆ÷,´æ´¢Êý¾ÝµÄ
• ±Õ°üÊÇÒ»¸ö¶ÔÏó,´æ·ÅÊý¾Ý key:value

• ÐγÉÌõ¼þ
  • º¯ÊýǶÌ×
  • ÄÚ²¿º¯ÊýÒýÓÃÍⲿº¯ÊýµÄ¾Ö²¿±äÁ¿
• ±Õ°üÓŵã:
  • ÑÓ³¤Íⲿº¯Êý¾Ö²¿±äÁ¿ÉúÃüÖÜÆÚ
• ±Õ°üȱµã:
  • ³¤Ê±¼äÕ¼ÓÃÈÝÒ×ÄÚ´æй¶
• ½¨Òé
  • ÓÃÍê±Õ°ü¼°Ê±Çå³ý,Ïú»Ù

//¼òµ¥±Õ°ü 
function out(){ 
    var a = 1; 
    function inner() { 
        console.log(a); 
    } 
     inner() 
} 
out()
//ÉÔ΢¸´Ôӵıհü 
function fun(a,b) { 
    //let a = 0 
    console.log(b) 
    return { 
        fun:function (m) { 
        //let m = 1 
        return fun(m,a) 
      } 
   } 
} 
//*let a = fun(0) 
a.fun(1) 
a.fun(2) 
a.fun(3);//undefined 0 0 0*/ 
// let b = fun(0).fun(1).fun(2);//undefined 0 1 
let c = fun(0).fun(1);//undefined 1 
c.fun(2) 
c.fun(3)
    

 ¸Ðл֧³Ö¡¢ºóÐø¸üдóÁ¿ÃæÊÔÌâ¡¢¹Ø×¢²»ÃÔ·Ŷ