[{"data":1,"prerenderedAt":1604},["ShallowReactive",2],{"article-vue-best-practices":3,"authors":1588},{"id":4,"title":5,"author":6,"body":7,"date":1579,"description":1580,"extension":1581,"meta":1582,"navigation":91,"path":1583,"seo":1584,"stem":1585,"thumbnail":1586,"__hash__":1587},"article\u002Farticle\u002Fvue-best-practices.md","Vue Best Practices","ashwin",{"type":8,"value":9,"toc":1565},"minimark",[10,15,19,22,32,134,137,141,148,151,185,188,215,217,221,224,227,237,247,250,284,287,318,321,492,494,498,508,511,531,534,676,678,682,691,699,701,731,733,760,762,766,769,771,786,788,803,805,809,812,831,842,844,848,854,857,860,862,903,905,963,972,974,978,981,984,986,1071,1073,1147,1149,1153,1156,1158,1167,1169,1184,1330,1332,1336,1339,1341,1450,1452,1543,1545,1549,1552,1555,1558,1561],[11,12,14],"h2",{"id":13},"_1-use-key-with-v-for","1. Use Key With V-For",[16,17,18],"p",{},"Vue does the heavy lifting of updating what’s rendered to the screen. But there’s only so much that Vue can know about your app and how it should do these updates.",[16,20,21],{},"This is necessary so that Vue can track your component state as well as have a constant reference to your different elements. An example where keys are extremely useful is when using animations or Vue transitions.",[16,23,24,25],{},"You can read a detailed article about \"Key attributes in Vue\" ",[26,27,31],"a",{"href":28,"rel":29},"https:\u002F\u002Fsimpletech.xyz\u002Farticle\u002Fkey-attribute-in-vue",[30],"nofollow","Here",[33,34,39],"pre",{"className":35,"code":36,"language":37,"meta":38,"style":38},"language-html shiki shiki-themes material-theme-darker","\u003C!-- Bad -->\n\u003Cdiv v-for=\"product in products\">\u003C\u002Fdiv>\n\n\u003C!-- Good! -->\n\u003Cdiv v-for=\"product in products\" :key=\"product.id\">\u003C\u002Fdiv>\n","html","",[40,41,42,51,86,93,99],"code",{"__ignoreMap":38},[43,44,47],"span",{"class":45,"line":46},"line",1,[43,48,50],{"class":49},"smLnX","\u003C!-- Bad -->\n",[43,52,54,58,62,66,69,72,76,78,81,83],{"class":45,"line":53},2,[43,55,57],{"class":56},"sAklC","\u003C",[43,59,61],{"class":60},"s-wAU","div",[43,63,65],{"class":64},"sJ14y"," v-for",[43,67,68],{"class":56},"=",[43,70,71],{"class":56},"\"",[43,73,75],{"class":74},"sfyAc","product in products",[43,77,71],{"class":56},[43,79,80],{"class":56},">\u003C\u002F",[43,82,61],{"class":60},[43,84,85],{"class":56},">\n",[43,87,89],{"class":45,"line":88},3,[43,90,92],{"emptyLinePlaceholder":91},true,"\n",[43,94,96],{"class":45,"line":95},4,[43,97,98],{"class":49},"\u003C!-- Good! -->\n",[43,100,102,104,106,108,110,112,114,116,119,121,123,126,128,130,132],{"class":45,"line":101},5,[43,103,57],{"class":56},[43,105,61],{"class":60},[43,107,65],{"class":64},[43,109,68],{"class":56},[43,111,71],{"class":56},[43,113,75],{"class":74},[43,115,71],{"class":56},[43,117,118],{"class":64}," :key",[43,120,68],{"class":56},[43,122,71],{"class":56},[43,124,125],{"class":74},"product.id",[43,127,71],{"class":56},[43,129,80],{"class":56},[43,131,61],{"class":60},[43,133,85],{"class":56},[135,136],"br",{},[11,138,140],{"id":139},"_2-use-kebab-case-for-events","2. Use Kebab-Case For Events",[16,142,143,144,147],{},"It's always recommended to use ",[40,145,146],{},"kebab-case"," for event\u002Fvue-attributes.",[16,149,150],{},"Example of emit:",[33,152,156],{"className":153,"code":154,"language":155,"meta":38,"style":38},"language-javascript shiki shiki-themes material-theme-darker","this.$emit('close-window');\n","javascript",[40,157,158],{"__ignoreMap":38},[43,159,160,163,167,171,174,177,179,182],{"class":45,"line":46},[43,161,162],{"class":56},"this.",[43,164,166],{"class":165},"sdLwU","$emit",[43,168,170],{"class":169},"svy0-","(",[43,172,173],{"class":56},"'",[43,175,176],{"class":74},"close-window",[43,178,173],{"class":56},[43,180,181],{"class":169},")",[43,183,184],{"class":56},";\n",[16,186,187],{},"Example in a tag:",[33,189,191],{"className":35,"code":190,"language":37,"meta":38,"style":38},"\u003CTab @close-window=\"handleEvent()\" \u002F>\n",[40,192,193],{"__ignoreMap":38},[43,194,195,197,200,203,205,207,210,212],{"class":45,"line":46},[43,196,57],{"class":56},[43,198,199],{"class":60},"Tab",[43,201,202],{"class":64}," @close-window",[43,204,68],{"class":56},[43,206,71],{"class":56},[43,208,209],{"class":74},"handleEvent()",[43,211,71],{"class":56},[43,213,214],{"class":56}," \u002F>\n",[135,216],{},[11,218,220],{"id":219},"_3-props-definition","3. Props Definition",[16,222,223],{},"In committed code, prop definitions should always be as detailed as possible, specifying at least type(s).",[16,225,226],{},"Detailed prop definitions have two advantages:",[228,229,230,234],"ul",{},[231,232,233],"li",{},"They document the API of the component, so that it’s easy to see how the component is meant to be used.",[231,235,236],{},"In development, Vue will warn you if a component is ever provided incorrectly formatted props, helping you catch potential sources of error.",[16,238,239,240,243,244,246],{},"Prop names should always use ",[40,241,242],{},"camelCase"," during declaration, but ",[40,245,146],{}," in templates\u002Fstrings and JSX",[16,248,249],{},"Bad:",[33,251,253],{"className":153,"code":252,"language":155,"meta":38,"style":38},"\u002F\u002F This is only OK when prototyping\nprops: ['status'];\n",[40,254,255,260],{"__ignoreMap":38},[43,256,257],{"class":45,"line":46},[43,258,259],{"class":49},"\u002F\u002F This is only OK when prototyping\n",[43,261,262,266,269,272,274,277,279,282],{"class":45,"line":53},[43,263,265],{"class":264},"s5Dmg","props",[43,267,268],{"class":56},":",[43,270,271],{"class":169}," [",[43,273,173],{"class":56},[43,275,276],{"class":74},"status",[43,278,173],{"class":56},[43,280,281],{"class":169},"]",[43,283,184],{"class":56},[16,285,286],{},"Good:",[33,288,290],{"className":153,"code":289,"language":155,"meta":38,"style":38},"props: {\n  status: String;\n}\n",[40,291,292,301,313],{"__ignoreMap":38},[43,293,294,296,298],{"class":45,"line":46},[43,295,265],{"class":264},[43,297,268],{"class":56},[43,299,300],{"class":56}," {\n",[43,302,303,306,308,311],{"class":45,"line":53},[43,304,305],{"class":264},"  status",[43,307,268],{"class":56},[43,309,310],{"class":169}," String",[43,312,184],{"class":56},[43,314,315],{"class":45,"line":88},[43,316,317],{"class":56},"}\n",[16,319,320],{},"Even Better:",[33,322,324],{"className":153,"code":323,"language":155,"meta":38,"style":38},"props: {\n  status: {\n    type: String,\n    required: true,\n    validator: function (value) {\n      return [\n        'syncing',\n        'synced',\n        'version-conflict',\n        'error'\n      ].indexOf(value) !== -1\n    }\n  }\n}\n\n",[40,325,326,334,342,354,367,388,398,411,423,435,446,475,481,487],{"__ignoreMap":38},[43,327,328,330,332],{"class":45,"line":46},[43,329,265],{"class":264},[43,331,268],{"class":56},[43,333,300],{"class":56},[43,335,336,338,340],{"class":45,"line":53},[43,337,305],{"class":264},[43,339,268],{"class":56},[43,341,300],{"class":56},[43,343,344,347,349,351],{"class":45,"line":88},[43,345,346],{"class":264},"    type",[43,348,268],{"class":56},[43,350,310],{"class":169},[43,352,353],{"class":56},",\n",[43,355,356,359,361,365],{"class":45,"line":95},[43,357,358],{"class":264},"    required",[43,360,268],{"class":56},[43,362,364],{"class":363},"sbqyR"," true",[43,366,353],{"class":56},[43,368,369,372,374,377,380,384,386],{"class":45,"line":101},[43,370,371],{"class":264},"    validator",[43,373,268],{"class":56},[43,375,376],{"class":64}," function",[43,378,379],{"class":56}," (",[43,381,383],{"class":382},"sLFUT","value",[43,385,181],{"class":56},[43,387,300],{"class":56},[43,389,391,395],{"class":45,"line":390},6,[43,392,394],{"class":393},"s6cf3","      return",[43,396,397],{"class":60}," [\n",[43,399,401,404,407,409],{"class":45,"line":400},7,[43,402,403],{"class":56},"        '",[43,405,406],{"class":74},"syncing",[43,408,173],{"class":56},[43,410,353],{"class":56},[43,412,414,416,419,421],{"class":45,"line":413},8,[43,415,403],{"class":56},[43,417,418],{"class":74},"synced",[43,420,173],{"class":56},[43,422,353],{"class":56},[43,424,426,428,431,433],{"class":45,"line":425},9,[43,427,403],{"class":56},[43,429,430],{"class":74},"version-conflict",[43,432,173],{"class":56},[43,434,353],{"class":56},[43,436,438,440,443],{"class":45,"line":437},10,[43,439,403],{"class":56},[43,441,442],{"class":74},"error",[43,444,445],{"class":56},"'\n",[43,447,449,452,455,458,460,462,465,468,471],{"class":45,"line":448},11,[43,450,451],{"class":60},"      ]",[43,453,454],{"class":56},".",[43,456,457],{"class":165},"indexOf",[43,459,170],{"class":60},[43,461,383],{"class":169},[43,463,464],{"class":60},") ",[43,466,467],{"class":56},"!==",[43,469,470],{"class":56}," -",[43,472,474],{"class":473},"sx098","1\n",[43,476,478],{"class":45,"line":477},12,[43,479,480],{"class":56},"    }\n",[43,482,484],{"class":45,"line":483},13,[43,485,486],{"class":56},"  }\n",[43,488,490],{"class":45,"line":489},14,[43,491,317],{"class":56},[135,493],{},[11,495,497],{"id":496},"_4-avoid-v-if-with-v-for","4. Avoid v-if with v-for",[16,499,500,501,504,505,454],{},"Never use ",[40,502,503],{},"v-if"," on the same element as ",[40,506,507],{},"v-for",[16,509,510],{},"There are two common cases where this can be tempting:",[228,512,513,524],{},[231,514,515,516,519,520,523],{},"To filter items in a list (e.g. ",[40,517,518],{},"v-for=\"user in users\" v-if=\"user.isActive\"","). In these cases, replace users with a new computed property that returns your filtered list (e.g. ",[40,521,522],{},"activeUsers",").",[231,525,526,527,530],{},"To avoid rendering a list if it should be hidden (e.g. ",[40,528,529],{},"v-for=\"user in users\" v-if=\"shouldShowUsers\"","). In these cases, move the v-if to a container element (e.g. ul, ol).",[16,532,533],{},"A smarter solution would be to iterate over a computed property. The above example would look something like this.",[33,535,537],{"className":35,"code":536,"language":37,"meta":38,"style":38},"\u003C!--Example 1-->\n\u003Cul>\n  \u003Cli v-for=\"user in activeUsers\" :key=\"user.id\">{{ user.name }}\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003C!--Example 2-->\n\u003Cul v-if=\"shouldShowUsers\">\n  \u003Cli v-for=\"user in users\" :key=\"user.id\">{{ user.name }}\u003C\u002Fli>\n\u003C\u002Ful>\n",[40,538,539,544,552,594,602,606,611,631,668],{"__ignoreMap":38},[43,540,541],{"class":45,"line":46},[43,542,543],{"class":49},"\u003C!--Example 1-->\n",[43,545,546,548,550],{"class":45,"line":53},[43,547,57],{"class":56},[43,549,228],{"class":60},[43,551,85],{"class":56},[43,553,554,557,559,561,563,565,568,570,572,574,576,579,581,584,587,590,592],{"class":45,"line":88},[43,555,556],{"class":56},"  \u003C",[43,558,231],{"class":60},[43,560,65],{"class":64},[43,562,68],{"class":56},[43,564,71],{"class":56},[43,566,567],{"class":74},"user in activeUsers",[43,569,71],{"class":56},[43,571,118],{"class":64},[43,573,68],{"class":56},[43,575,71],{"class":56},[43,577,578],{"class":74},"user.id",[43,580,71],{"class":56},[43,582,583],{"class":56},">",[43,585,586],{"class":169},"{{ user.name }}",[43,588,589],{"class":56},"\u003C\u002F",[43,591,231],{"class":60},[43,593,85],{"class":56},[43,595,596,598,600],{"class":45,"line":95},[43,597,589],{"class":56},[43,599,228],{"class":60},[43,601,85],{"class":56},[43,603,604],{"class":45,"line":101},[43,605,92],{"emptyLinePlaceholder":91},[43,607,608],{"class":45,"line":390},[43,609,610],{"class":49},"\u003C!--Example 2-->\n",[43,612,613,615,617,620,622,624,627,629],{"class":45,"line":400},[43,614,57],{"class":56},[43,616,228],{"class":60},[43,618,619],{"class":64}," v-if",[43,621,68],{"class":56},[43,623,71],{"class":56},[43,625,626],{"class":74},"shouldShowUsers",[43,628,71],{"class":56},[43,630,85],{"class":56},[43,632,633,635,637,639,641,643,646,648,650,652,654,656,658,660,662,664,666],{"class":45,"line":413},[43,634,556],{"class":56},[43,636,231],{"class":60},[43,638,65],{"class":64},[43,640,68],{"class":56},[43,642,71],{"class":56},[43,644,645],{"class":74},"user in users",[43,647,71],{"class":56},[43,649,118],{"class":64},[43,651,68],{"class":56},[43,653,71],{"class":56},[43,655,578],{"class":74},[43,657,71],{"class":56},[43,659,583],{"class":56},[43,661,586],{"class":169},[43,663,589],{"class":56},[43,665,231],{"class":60},[43,667,85],{"class":56},[43,669,670,672,674],{"class":45,"line":425},[43,671,589],{"class":56},[43,673,228],{"class":60},[43,675,85],{"class":56},[135,677],{},[11,679,681],{"id":680},"_5-single-file-component-filename-casing","5. Single-file Component Filename Casing",[16,683,684,685,688,689,454],{},"Filenames of single-file components should either be always ",[40,686,687],{},"PascalCase"," or always ",[40,690,146],{},[16,692,693,695,696,698],{},[40,694,687],{}," works best with autocompletion in code editors, as it’s consistent with how we reference components in JS(X) and templates, wherever possible. However, mixed case filenames can sometimes create issues on case-insensitive file systems, which is why ",[40,697,146],{}," is also perfectly acceptable.",[16,700,249],{},[33,702,706],{"className":703,"code":704,"language":705,"meta":38,"style":38},"language-treeview shiki shiki-themes material-theme-darker","components\u002F\n|- mycomponent.vue\n\ncomponents\u002F\n|- myComponent.vue\n","treeview",[40,707,708,713,718,722,726],{"__ignoreMap":38},[43,709,710],{"class":45,"line":46},[43,711,712],{},"components\u002F\n",[43,714,715],{"class":45,"line":53},[43,716,717],{},"|- mycomponent.vue\n",[43,719,720],{"class":45,"line":88},[43,721,92],{"emptyLinePlaceholder":91},[43,723,724],{"class":45,"line":95},[43,725,712],{},[43,727,728],{"class":45,"line":101},[43,729,730],{},"|- myComponent.vue\n",[16,732,286],{},[33,734,736],{"className":703,"code":735,"language":705,"meta":38,"style":38},"components\u002F\n|- MyComponent.vue\n\ncomponents\u002F\n|- my-component.vue\n",[40,737,738,742,747,751,755],{"__ignoreMap":38},[43,739,740],{"class":45,"line":46},[43,741,712],{},[43,743,744],{"class":45,"line":53},[43,745,746],{},"|- MyComponent.vue\n",[43,748,749],{"class":45,"line":88},[43,750,92],{"emptyLinePlaceholder":91},[43,752,753],{"class":45,"line":95},[43,754,712],{},[43,756,757],{"class":45,"line":101},[43,758,759],{},"|- my-component.vue\n",[135,761],{},[11,763,765],{"id":764},"_6-component-file-naming-conventions","6. Component File Naming conventions",[16,767,768],{},"Child components that are tightly coupled with their parent should include the parent component name as a prefix.",[16,770,249],{},[33,772,774],{"className":35,"code":773,"language":37,"meta":38,"style":38},"components\u002F |- TodoList.vue |- TodoItem.vue |- TodoButton.vue components\u002F |- SearchSidebar.vue |-\nNavigationForSearchSidebar.vue\n",[40,775,776,781],{"__ignoreMap":38},[43,777,778],{"class":45,"line":46},[43,779,780],{"class":169},"components\u002F |- TodoList.vue |- TodoItem.vue |- TodoButton.vue components\u002F |- SearchSidebar.vue |-\n",[43,782,783],{"class":45,"line":53},[43,784,785],{"class":169},"NavigationForSearchSidebar.vue\n",[16,787,286],{},[33,789,791],{"className":35,"code":790,"language":37,"meta":38,"style":38},"components\u002F |- TodoList.vue |- TodoListItem.vue |- TodoListItemButton.vue components\u002F |- SearchSidebar.vue |-\nSearchSidebarNavigation.vue\n",[40,792,793,798],{"__ignoreMap":38},[43,794,795],{"class":45,"line":46},[43,796,797],{"class":169},"components\u002F |- TodoList.vue |- TodoListItem.vue |- TodoListItemButton.vue components\u002F |- SearchSidebar.vue |-\n",[43,799,800],{"class":45,"line":53},[43,801,802],{"class":169},"SearchSidebarNavigation.vue\n",[135,804],{},[11,806,808],{"id":807},"_7-stay-consistent-with-your-directive-shorthand","7. Stay consistent with your directive shorthand",[16,810,811],{},"A common technique among Vue developers is to use shorthand for directives. For example:",[228,813,814,820,825],{},[231,815,816,819],{},[40,817,818],{},"@"," is short for v-on:",[231,821,822,824],{},[40,823,268],{}," is short for v-bind",[231,826,827,830],{},[40,828,829],{},"#"," is short for v-slot",[16,832,833,834,837,838,841],{},"It is great to use these shorthands in your Vue project. But to create some sort of convention across your project, you should either ",[40,835,836],{},"always"," use them or ",[40,839,840],{},"never"," use them. This will make your project\u002Fcodebase more cohesive and readable.",[135,843],{},[11,845,847],{"id":846},"_8-self-closing-components","8. Self Closing Components",[16,849,850,851,454],{},"Components with no content should be self-closing in single-file components, string templates, and JSX - but never in ",[40,852,853],{},"DOM templates",[16,855,856],{},"Components that self-close communicate that they not only have no content, but are meant to have no content. It’s the difference between a blank page in a book and one labeled “This page intentionally left blank.” Your code is also cleaner without the unnecessary closing tag.",[16,858,859],{},"Unfortunately, HTML doesn’t allow custom elements to be self-closing - only official “void” elements. That’s why the strategy is only possible when Vue’s template compiler can reach the template before the DOM, then serve the DOM spec-compliant HTML.",[16,861,249],{},[33,863,865],{"className":35,"code":864,"language":37,"meta":38,"style":38},"\u003C!-- In single-file components, string templates, and JSX -->\n\u003CMyComponent>\u003C\u002FMyComponent>\n\n\u003C!-- In DOM templates -->\n\u003Cmy-component \u002F>\n",[40,866,867,872,885,889,894],{"__ignoreMap":38},[43,868,869],{"class":45,"line":46},[43,870,871],{"class":49},"\u003C!-- In single-file components, string templates, and JSX -->\n",[43,873,874,876,879,881,883],{"class":45,"line":53},[43,875,57],{"class":56},[43,877,878],{"class":60},"MyComponent",[43,880,80],{"class":56},[43,882,878],{"class":60},[43,884,85],{"class":56},[43,886,887],{"class":45,"line":88},[43,888,92],{"emptyLinePlaceholder":91},[43,890,891],{"class":45,"line":95},[43,892,893],{"class":49},"\u003C!-- In DOM templates -->\n",[43,895,896,898,901],{"class":45,"line":101},[43,897,57],{"class":56},[43,899,900],{"class":60},"my-component",[43,902,214],{"class":56},[16,904,286],{},[33,906,908],{"className":35,"code":907,"language":37,"meta":38,"style":38},"\u003C!-- In single-file components, string templates, and JSX -->\n\u003CMyComponent \u002F>\n\n\u003C!-- In DOM templates -->\n\u003Cmy-component>\u003C\u002Fmy-component>\n\n\u003C!-- Or Everywhere -->\n\u003Cmy-component>\u003C\u002Fmy-component>\n",[40,909,910,914,922,926,930,942,946,951],{"__ignoreMap":38},[43,911,912],{"class":45,"line":46},[43,913,871],{"class":49},[43,915,916,918,920],{"class":45,"line":53},[43,917,57],{"class":56},[43,919,878],{"class":60},[43,921,214],{"class":56},[43,923,924],{"class":45,"line":88},[43,925,92],{"emptyLinePlaceholder":91},[43,927,928],{"class":45,"line":95},[43,929,893],{"class":49},[43,931,932,934,936,938,940],{"class":45,"line":101},[43,933,57],{"class":56},[43,935,900],{"class":60},[43,937,80],{"class":56},[43,939,900],{"class":60},[43,941,85],{"class":56},[43,943,944],{"class":45,"line":390},[43,945,92],{"emptyLinePlaceholder":91},[43,947,948],{"class":45,"line":400},[43,949,950],{"class":49},"\u003C!-- Or Everywhere -->\n",[43,952,953,955,957,959,961],{"class":45,"line":413},[43,954,57],{"class":56},[43,956,900],{"class":60},[43,958,80],{"class":56},[43,960,900],{"class":60},[43,962,85],{"class":56},[16,964,965,966,968,969],{},"Also note that if you’ve already invested heavily in ",[40,967,146],{},", consistency with HTML conventions and being able to use the same casing across all your projects may be more important than the advantages listed above. In those cases, ",[40,970,971],{},"using kebab-case everywhere is also acceptable.",[135,973],{},[11,975,977],{"id":976},"_9-multi-attribute-elements","9. Multi-Attribute Elements",[16,979,980],{},"Elements with multiple attributes should span multiple lines, with one attribute per line.",[16,982,983],{},"In JavaScript, splitting objects with multiple properties over multiple lines is widely considered a good convention, because it’s much easier to read.",[16,985,249],{},[33,987,989],{"className":35,"code":988,"language":37,"meta":38,"style":38},"\u003Cimg src=\"https:\u002F\u002Fvuejs.org\u002Fimages\u002Flogo.png\" alt=\"Vue Logo\" \u002F>\n\n\u003CMyComponent foo=\"a\" bar=\"b\" baz=\"c\" \u002F>\n",[40,990,991,1024,1028],{"__ignoreMap":38},[43,992,993,995,998,1001,1003,1005,1008,1010,1013,1015,1017,1020,1022],{"class":45,"line":46},[43,994,57],{"class":56},[43,996,997],{"class":60},"img",[43,999,1000],{"class":64}," src",[43,1002,68],{"class":56},[43,1004,71],{"class":56},[43,1006,1007],{"class":74},"https:\u002F\u002Fvuejs.org\u002Fimages\u002Flogo.png",[43,1009,71],{"class":56},[43,1011,1012],{"class":64}," alt",[43,1014,68],{"class":56},[43,1016,71],{"class":56},[43,1018,1019],{"class":74},"Vue Logo",[43,1021,71],{"class":56},[43,1023,214],{"class":56},[43,1025,1026],{"class":45,"line":53},[43,1027,92],{"emptyLinePlaceholder":91},[43,1029,1030,1032,1034,1037,1039,1041,1043,1045,1048,1050,1052,1055,1057,1060,1062,1064,1067,1069],{"class":45,"line":88},[43,1031,57],{"class":56},[43,1033,878],{"class":60},[43,1035,1036],{"class":64}," foo",[43,1038,68],{"class":56},[43,1040,71],{"class":56},[43,1042,26],{"class":74},[43,1044,71],{"class":56},[43,1046,1047],{"class":64}," bar",[43,1049,68],{"class":56},[43,1051,71],{"class":56},[43,1053,1054],{"class":74},"b",[43,1056,71],{"class":56},[43,1058,1059],{"class":64}," baz",[43,1061,68],{"class":56},[43,1063,71],{"class":56},[43,1065,1066],{"class":74},"c",[43,1068,71],{"class":56},[43,1070,214],{"class":56},[16,1072,286],{},[33,1074,1075],{"className":35,"code":988,"language":37,"meta":38,"style":38},[40,1076,1077,1105,1109],{"__ignoreMap":38},[43,1078,1079,1081,1083,1085,1087,1089,1091,1093,1095,1097,1099,1101,1103],{"class":45,"line":46},[43,1080,57],{"class":56},[43,1082,997],{"class":60},[43,1084,1000],{"class":64},[43,1086,68],{"class":56},[43,1088,71],{"class":56},[43,1090,1007],{"class":74},[43,1092,71],{"class":56},[43,1094,1012],{"class":64},[43,1096,68],{"class":56},[43,1098,71],{"class":56},[43,1100,1019],{"class":74},[43,1102,71],{"class":56},[43,1104,214],{"class":56},[43,1106,1107],{"class":45,"line":53},[43,1108,92],{"emptyLinePlaceholder":91},[43,1110,1111,1113,1115,1117,1119,1121,1123,1125,1127,1129,1131,1133,1135,1137,1139,1141,1143,1145],{"class":45,"line":88},[43,1112,57],{"class":56},[43,1114,878],{"class":60},[43,1116,1036],{"class":64},[43,1118,68],{"class":56},[43,1120,71],{"class":56},[43,1122,26],{"class":74},[43,1124,71],{"class":56},[43,1126,1047],{"class":64},[43,1128,68],{"class":56},[43,1130,71],{"class":56},[43,1132,1054],{"class":74},[43,1134,71],{"class":56},[43,1136,1059],{"class":64},[43,1138,68],{"class":56},[43,1140,71],{"class":56},[43,1142,1066],{"class":74},[43,1144,71],{"class":56},[43,1146,214],{"class":56},[135,1148],{},[11,1150,1152],{"id":1151},"_10-simple-expressions-in-templates","10. Simple Expressions In Templates",[16,1154,1155],{},"Component templates should only include simple expressions, with more complex expressions refactored into computed properties or methods.",[16,1157,249],{},[33,1159,1161],{"className":35,"code":1160,"language":37,"meta":38,"style":38},"{{ fullName.split(' ').map(function (word) { return word[0].toUpperCase() + word.slice(1) }).join(' ') }}\n",[40,1162,1163],{"__ignoreMap":38},[43,1164,1165],{"class":45,"line":46},[43,1166,1160],{"class":169},[16,1168,286],{},[33,1170,1172],{"className":35,"code":1171,"language":37,"meta":38,"style":38},"\u003C!-- In a template -->\n{{ normalizedFullName }}\n",[40,1173,1174,1179],{"__ignoreMap":38},[43,1175,1176],{"class":45,"line":46},[43,1177,1178],{"class":49},"\u003C!-- In a template -->\n",[43,1180,1181],{"class":45,"line":53},[43,1182,1183],{"class":169},"{{ normalizedFullName }}\n",[33,1185,1187],{"className":153,"code":1186,"language":155,"meta":38,"style":38},"\u002F\u002F The complex expression has been moved to a computed property\ncomputed: {\n  normalizedFullName: function () {\n    return this.fullName.split(' ').map(function (word) {\n      return word[0].toUpperCase() + word.slice(1)\n    }).join(' ')\n  }\n}\n",[40,1188,1189,1194,1203,1217,1261,1302,1322,1326],{"__ignoreMap":38},[43,1190,1191],{"class":45,"line":46},[43,1192,1193],{"class":49},"\u002F\u002F The complex expression has been moved to a computed property\n",[43,1195,1196,1199,1201],{"class":45,"line":53},[43,1197,1198],{"class":264},"computed",[43,1200,268],{"class":56},[43,1202,300],{"class":56},[43,1204,1205,1208,1210,1212,1215],{"class":45,"line":88},[43,1206,1207],{"class":264},"  normalizedFullName",[43,1209,268],{"class":56},[43,1211,376],{"class":64},[43,1213,1214],{"class":56}," ()",[43,1216,300],{"class":56},[43,1218,1219,1222,1225,1228,1230,1233,1235,1237,1240,1242,1244,1247,1249,1252,1254,1257,1259],{"class":45,"line":95},[43,1220,1221],{"class":393},"    return",[43,1223,1224],{"class":56}," this.",[43,1226,1227],{"class":169},"fullName",[43,1229,454],{"class":56},[43,1231,1232],{"class":165},"split",[43,1234,170],{"class":60},[43,1236,173],{"class":56},[43,1238,1239],{"class":56}," '",[43,1241,181],{"class":60},[43,1243,454],{"class":56},[43,1245,1246],{"class":165},"map",[43,1248,170],{"class":60},[43,1250,1251],{"class":64},"function",[43,1253,379],{"class":56},[43,1255,1256],{"class":382},"word",[43,1258,181],{"class":56},[43,1260,300],{"class":56},[43,1262,1263,1265,1268,1271,1274,1276,1278,1281,1284,1287,1289,1291,1294,1296,1299],{"class":45,"line":101},[43,1264,394],{"class":393},[43,1266,1267],{"class":169}," word",[43,1269,1270],{"class":60},"[",[43,1272,1273],{"class":473},"0",[43,1275,281],{"class":60},[43,1277,454],{"class":56},[43,1279,1280],{"class":165},"toUpperCase",[43,1282,1283],{"class":60},"() ",[43,1285,1286],{"class":56},"+",[43,1288,1267],{"class":169},[43,1290,454],{"class":56},[43,1292,1293],{"class":165},"slice",[43,1295,170],{"class":60},[43,1297,1298],{"class":473},"1",[43,1300,1301],{"class":60},")\n",[43,1303,1304,1307,1309,1311,1314,1316,1318,1320],{"class":45,"line":390},[43,1305,1306],{"class":56},"    }",[43,1308,181],{"class":60},[43,1310,454],{"class":56},[43,1312,1313],{"class":165},"join",[43,1315,170],{"class":60},[43,1317,173],{"class":56},[43,1319,1239],{"class":56},[43,1321,1301],{"class":60},[43,1323,1324],{"class":45,"line":400},[43,1325,486],{"class":56},[43,1327,1328],{"class":45,"line":413},[43,1329,317],{"class":56},[135,1331],{},[11,1333,1335],{"id":1334},"_11-dont-call-a-method-on-created-and-watch","11. Don’t call a method on created AND watch",[16,1337,1338],{},"A common mistake Vue developers make is they unnecessarily call a method in created and watch. The thought behind this is that we want to run the watch hook as soon as a component is initialized.",[16,1340,249],{},[33,1342,1344],{"className":153,"code":1343,"language":155,"meta":38,"style":38},"watch () {\n  property() {\n    this.handleChange()\n  }\n},\n\ncreated: () {\n  this.handleChange()\n},\n\nmethods: {\n  handleChange() {\n    \u002F\u002F stuff happens\n  }\n},\n",[40,1345,1346,1357,1366,1377,1381,1386,1390,1401,1410,1414,1418,1427,1436,1441,1445],{"__ignoreMap":38},[43,1347,1348,1351,1354],{"class":45,"line":46},[43,1349,1350],{"class":165},"watch",[43,1352,1353],{"class":169}," () ",[43,1355,1356],{"class":56},"{\n",[43,1358,1359,1362,1364],{"class":45,"line":53},[43,1360,1361],{"class":165},"  property",[43,1363,1283],{"class":60},[43,1365,1356],{"class":56},[43,1367,1368,1371,1374],{"class":45,"line":88},[43,1369,1370],{"class":56},"    this.",[43,1372,1373],{"class":165},"handleChange",[43,1375,1376],{"class":60},"()\n",[43,1378,1379],{"class":45,"line":95},[43,1380,486],{"class":56},[43,1382,1383],{"class":45,"line":101},[43,1384,1385],{"class":56},"},\n",[43,1387,1388],{"class":45,"line":390},[43,1389,92],{"emptyLinePlaceholder":91},[43,1391,1392,1395,1397,1399],{"class":45,"line":400},[43,1393,1394],{"class":264},"created",[43,1396,268],{"class":56},[43,1398,1353],{"class":169},[43,1400,1356],{"class":56},[43,1402,1403,1406,1408],{"class":45,"line":413},[43,1404,1405],{"class":56},"  this.",[43,1407,1373],{"class":165},[43,1409,1376],{"class":60},[43,1411,1412],{"class":45,"line":425},[43,1413,1385],{"class":56},[43,1415,1416],{"class":45,"line":437},[43,1417,92],{"emptyLinePlaceholder":91},[43,1419,1420,1423,1425],{"class":45,"line":448},[43,1421,1422],{"class":264},"methods",[43,1424,268],{"class":56},[43,1426,300],{"class":56},[43,1428,1429,1432,1434],{"class":45,"line":477},[43,1430,1431],{"class":165},"  handleChange",[43,1433,1283],{"class":60},[43,1435,1356],{"class":56},[43,1437,1438],{"class":45,"line":483},[43,1439,1440],{"class":49},"    \u002F\u002F stuff happens\n",[43,1442,1443],{"class":45,"line":489},[43,1444,486],{"class":56},[43,1446,1448],{"class":45,"line":1447},15,[43,1449,1385],{"class":56},[16,1451,286],{},[33,1453,1455],{"className":153,"code":1454,"language":155,"meta":38,"style":38},"watch () {\n  property {\n    immediate: true\n    handler() {\n      this.handleChange()\n    }\n  }\n},\n\nmethods: {\n  handleChange() {\n    \u002F\u002F stuff happens\n  }\n},\n",[40,1456,1457,1465,1471,1481,1490,1499,1503,1507,1511,1515,1523,1531,1535,1539],{"__ignoreMap":38},[43,1458,1459,1461,1463],{"class":45,"line":46},[43,1460,1350],{"class":165},[43,1462,1353],{"class":169},[43,1464,1356],{"class":56},[43,1466,1467,1469],{"class":45,"line":53},[43,1468,1361],{"class":169},[43,1470,300],{"class":56},[43,1472,1473,1476,1478],{"class":45,"line":88},[43,1474,1475],{"class":264},"    immediate",[43,1477,268],{"class":56},[43,1479,1480],{"class":363}," true\n",[43,1482,1483,1486,1488],{"class":45,"line":95},[43,1484,1485],{"class":165},"    handler",[43,1487,1283],{"class":60},[43,1489,1356],{"class":56},[43,1491,1492,1495,1497],{"class":45,"line":101},[43,1493,1494],{"class":56},"      this.",[43,1496,1373],{"class":165},[43,1498,1376],{"class":60},[43,1500,1501],{"class":45,"line":390},[43,1502,480],{"class":56},[43,1504,1505],{"class":45,"line":400},[43,1506,486],{"class":56},[43,1508,1509],{"class":45,"line":413},[43,1510,1385],{"class":56},[43,1512,1513],{"class":45,"line":425},[43,1514,92],{"emptyLinePlaceholder":91},[43,1516,1517,1519,1521],{"class":45,"line":437},[43,1518,1422],{"class":264},[43,1520,268],{"class":56},[43,1522,300],{"class":56},[43,1524,1525,1527,1529],{"class":45,"line":448},[43,1526,1431],{"class":165},[43,1528,1283],{"class":60},[43,1530,1356],{"class":56},[43,1532,1533],{"class":45,"line":477},[43,1534,1440],{"class":49},[43,1536,1537],{"class":45,"line":483},[43,1538,486],{"class":56},[43,1540,1541],{"class":45,"line":489},[43,1542,1385],{"class":56},[135,1544],{},[11,1546,1548],{"id":1547},"_12-store-observable-vs-vuex","12. Store: Observable vs Vuex",[16,1550,1551],{},"Everyone is inclined to using a full blown store with vuex. Though it's a good approach, I would like to provide an alternative thought process.",[16,1553,1554],{},"If it's a small project would recommend using Vue observable, which pretty much works the same as store. And for larger projects, using Vuex should be an obvious choice. Now, how do you decide which is a small project or a large project. The approach that I follow is, if I have less than 4 State objects or less than 2 actions\u002Fmethods, I use Vue Observable (If it's really required). If it goes beyond that, would recommend using Vuex for sure!",[16,1556,1557],{},"These set of Vue tips hopefully will make your codebase more maintainable, readable, and more professional.",[16,1559,1560],{},"Hope that you found this article on Vue best-practices helpful. ❤️",[1562,1563,1564],"style",{},"html pre.shiki code .smLnX, html code.shiki .smLnX{--shiki-default:#545454;--shiki-default-font-style:italic}html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .svy0-, html code.shiki .svy0-{--shiki-default:#EEFFFF}html pre.shiki code .s5Dmg, html code.shiki .s5Dmg{--shiki-default:#FFCB6B}html pre.shiki code .sbqyR, html code.shiki .sbqyR{--shiki-default:#FF9CAC}html pre.shiki code .sLFUT, html code.shiki .sLFUT{--shiki-default:#EEFFFF;--shiki-default-font-style:italic}html pre.shiki code .s6cf3, html code.shiki .s6cf3{--shiki-default:#89DDFF;--shiki-default-font-style:italic}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}",{"title":38,"searchDepth":53,"depth":53,"links":1566},[1567,1568,1569,1570,1571,1572,1573,1574,1575,1576,1577,1578],{"id":13,"depth":53,"text":14},{"id":139,"depth":53,"text":140},{"id":219,"depth":53,"text":220},{"id":496,"depth":53,"text":497},{"id":680,"depth":53,"text":681},{"id":764,"depth":53,"text":765},{"id":807,"depth":53,"text":808},{"id":846,"depth":53,"text":847},{"id":976,"depth":53,"text":977},{"id":1151,"depth":53,"text":1152},{"id":1334,"depth":53,"text":1335},{"id":1547,"depth":53,"text":1548},"2021-05-01T08:07:45.143Z","Here are some best practices emerging and becoming standard among vue devs.","md",{},"\u002Farticle\u002Fvue-best-practices",{"title":5,"description":1580},"article\u002Fvue-best-practices","\u002Fimg\u002Fvue-best-practises.jpg","UjppIznpP-cSNdRVFPjFVXzHoOf16NpQjqKKOUJLXQo",{"id":1589,"extension":1590,"meta":1591,"stem":1602,"__hash__":1603},"author\u002Fauthor\u002FauthorDetails.json","json",{"body":1592},[1593,1597],{"id":6,"fullName":1594,"description":1595,"image":1596},"Ashwin K Shenoy","Hi! I am Ashwin, an Software Engineer and Consultant based out of Bengaluru, India.","https:\u002F\u002Fsimpletech.xyz\u002Fimg\u002Fauthor\u002Fashwin.jpg",{"id":1598,"fullName":1599,"description":1600,"image":1601},"paul","Paul Shan","Hello! I am Paul, a front end engineer and consultant based out of Bengaluru, India.","https:\u002F\u002Fashwinshenoy.com\u002Fimg\u002Fashwin2.jpg","author\u002FauthorDetails","k8atXxcwAcv_rjC8llPba18X62upiKWYGU5dL4-S4lw",1782187479716]