"," ","\" alt=\"file explorer (comparison)\" width=\"600\">","https://user-images.githubusercontent.com/499550/62783026-810e6180-ba89-11e9-8774-e7771c8095d6.png",[1138],{"_33":233,"_234":1139},{"_236":1136},"

",[1143,1144,1145,1146,1147],{"_33":214,"_214":1156},{"_33":214,"_214":1153,"_230":1154},{"_33":214,"_214":1152},{"_33":214,"_214":1149,"_230":1150},{"_33":214,"_214":1148}," to indicate that it is a composition function. This pattern can be applied to all the other logical concerns in the component, resulting in a number of nicely decoupled functions:","use",[1151],{"_33":287},". It is a recommended convention to start the function's name with ","composition function",[1155],{"_33":295},"Notice how all the logic related to the create new folder feature is now collocated and encapsulated in a single function. The function is also somewhat self-documenting due to its descriptive name. This is what we call a ",{"_342":680},[1159],{"_33":214,"_214":1160},"function useCreateFolder (openFolder) {\n // originally data properties\n const showNewFolder = ref(false)\n const newFolderName = ref('')\n\n // originally computed property\n const newFolderValid = computed(() => isValidMultiName(newFolderName.value))\n\n // originally a method\n async function createFolder () {\n if (!newFolderValid.value) return\n const result = await mutate({\n mutation: FOLDER_CREATE,\n variables: {\n name: newFolderName.value\n }\n })\n openFolder(result.data.folderCreate.path)\n newFolderName.value = ''\n showNewFolder.value = false\n }\n\n return {\n showNewFolder,\n newFolderName,\n newFolderValid,\n createFolder\n }\n}",[1162],{"_33":214,"_214":1163},"It would be much nicer if we could collocate code related to the same logical concern. And this is exactly what the Composition API enables us to do. The \"create new folder\" feature can be written this way:",[1165],{"_33":211,"_27":1166},[1167],{"_33":214,"_214":1168},"Note: the original code can probably be improved a few places, but we are showing it off the latest commit (as of this writing) without modification to provide an example of actual in production code we wrote ourselves.",[1170],{"_33":214,"_214":1171},"Such fragmentation is exactly what makes it difficult to understand and maintain a complex component. The forced separation via options obscures the underlying logical concerns. In addition, when working on a single logical concern we have to constantly \"jump\" around option blocks to find the parts related to that concern.",[1173,1174,1175,1176,1177,1178,1179],{"_33":214,"_214":1141},{"_33":214,"_214":1134},{"_33":214,"_214":1140},{"_33":214,"_214":1181,"_230":1182},{"_33":214,"_214":1180},{"_33":214,"_214":1134},{"_33":214,"_214":1133},"\" alt=\"file explorer (before)\" width=\"131\">","https://user-images.githubusercontent.com/499550/62783021-7ce24400-ba89-11e9-9dd3-36f4f6b1fae2.png",[1183],{"_33":233,"_234":1184},{"_236":1181},[1186],{"_33":214,"_214":1187},"If we color-code each of these logical concerns, we notice how fragmented they are when expressed with component options:",[1189,1190,1191,1192,1193,1194,1195],{"_33":214,"_214":1213},{"_33":214,"_214":1208,"_230":1209},{"_33":214,"_214":954},{"_33":214,"_214":1203,"_230":1204},{"_33":214,"_214":1202},{"_33":214,"_214":1197,"_230":1198},{"_33":214,"_214":1196}," - where the method is defined in a location more than a hundred lines away from the data properties.","a method",[1199],{"_33":233,"_234":1200},{"_236":1201},"https://github.com/vuejs/vue-cli/blob/a09407dd5b9f18ace7501ddb603b95e31d6d93c0/packages/@vue/cli-ui/src/components/folder/FolderExplorer.vue#L387",", and ","one computed property",[1205],{"_33":233,"_234":1206},{"_236":1207},"https://github.com/vuejs/vue-cli/blob/a09407dd5b9f18ace7501ddb603b95e31d6d93c0/packages/@vue/cli-ui/src/components/folder/FolderExplorer.vue#L240","two data properties",[1210],{"_33":233,"_234":1211},{"_236":1212},"https://github.com/vuejs/vue-cli/blob/a09407dd5b9f18ace7501ddb603b95e31d6d93c0/packages/@vue/cli-ui/src/components/folder/FolderExplorer.vue#L221-L222","Can you instantly recognize and tell these logical concerns apart by reading the options-based code? It surely is difficult. You will notice that code related to a specific logical concern is often fragmented and scattered all over the place. For example, the \"create new folder\" feature makes use of ",[1215,1216,1217,1218,1219,1220],{"_33":222,"_27":1246},{"_33":222,"_27":1241},{"_33":222,"_27":1236},{"_33":222,"_27":1231},{"_33":222,"_27":1226},{"_33":222,"_27":1221},[1222],{"_33":211,"_27":1223},[1224],{"_33":214,"_214":1225},"Handling current working directory changes",[1227],{"_33":211,"_27":1228},[1229],{"_33":214,"_214":1230},"Toggling show hidden folders",[1232],{"_33":211,"_27":1233},[1234],{"_33":214,"_214":1235},"Toggling show favorite folders only",[1237],{"_33":211,"_27":1238},[1239],{"_33":214,"_214":1240},"Handling new folder creation",[1242],{"_33":211,"_27":1243},[1244],{"_33":214,"_214":1245},"Handling folder navigation (opening, closing, refreshing...)",[1247],{"_33":211,"_27":1248},[1249],{"_33":214,"_214":1250},"Tracking current folder state and displaying its content",[1252,1253,1254,1255,1256],{"_33":214,"_214":1266},{"_33":214,"_214":1073,"_230":1264},{"_33":214,"_214":1263},{"_33":214,"_214":1258,"_230":1259},{"_33":214,"_214":1257}," as an example. The component has to deal with many different logical concerns:","Vue CLI UI file explorer",[1260],{"_33":233,"_234":1261},{"_236":1262},"https://github.com/vuejs/vue-cli/blob/a09407dd5b9f18ace7501ddb603b95e31d6d93c0/packages/@vue/cli-ui/src/components/folder/FolderExplorer.vue#L198-L404",". The readability problem is typically non-present in small, single purpose components because the entire component deals with a single logical concern. However, the issue becomes much more prominent in advanced use cases. Take the ",[1265],{"_33":295},"Let's define the \"X, Y and Z\" the component is dealing with as ",{"_349":350},[1269],{"_33":214,"_214":1270},"Logical Concerns vs. Option Types",[1272],{"_33":214,"_214":1273},"Think about how we would walk a fellow developer through a big component like the one linked above. You will most likely start with \"this component is dealing with X, Y and Z\" instead of \"this component has these data properties, these computed properties and these methods\". When it comes to understanding a component, we care more about \"what the component is trying to do\" (i.e. the intentions behind the code) rather than \"what options the component happens to use\". While code written with options-based API naturally answers the latter, it does a rather poor job at expressing the former.",[1275,1276,1277],{"_33":214,"_214":1283},{"_33":214,"_214":1279,"_230":1280},{"_33":214,"_214":1278},"), and have a hard time wrapping your head around it?","this one",[1281],{"_33":233,"_234":1282},{"_236":1262},"Let's take a step back and consider what we really mean when we talk about \"organized code\". The end goal of keeping code organized should be making the code easier to read and understand. And what do we mean by \"understanding\" the code? Can we really claim that we \"understand\" a component just because we know what options it contains? Have you ever run into a big component authored by another developer (for example ",{"_349":350},[1286],{"_33":214,"_214":1287},"What is \"Organized Code\"?",[1289,1290,1291],{"_33":214,"_214":1296},{"_33":214,"_214":1293,"_230":1294},{"_33":214,"_214":1292}," organized code, particularly in complex components. Here we will try to explain why.","better",[1295],{"_33":273},"This is an understandable first impression. But as mentioned in the Motivations section, we believe the Composition API actually leads to ",[1298],{"_33":214,"_214":1299},"At this point we have replicated the component API with imported functions, but what for? Defining components with options seems to be much more organized than mixing everything together in a big function!",{"_349":366},[1302],{"_33":214,"_214":1303},"Code Organization",[1305],{"_33":211,"_27":1306},[1307,1308,1309],{"_33":214,"_214":1316},{"_33":214,"_214":1311,"_230":1312},{"_33":214,"_214":1310},". However, we recommend finishing the following sections before digging into the design details.","API Reference",[1313],{"_33":233,"_234":1314},{"_236":1315},"./api","More details about these APIs can be found in the ",[1318,1319,1320,1321,1322],{"_33":214,"_214":1329},{"_33":214,"_214":1047,"_230":1327},{"_33":214,"_214":1326},{"_33":214,"_214":1047,"_230":1324},{"_33":214,"_214":1323}," hook using internal global state. It is intentionally designed this way to reduce friction when extracting logic into external functions.",[1325],{"_33":287}," hook. It automatically figures out the current instance calling the ",[1328],{"_33":287},"These lifecycle registration methods can only be used during the invocation of a ",{"_342":680},[1332],{"_33":214,"_214":1333},"import { onMounted } from 'vue'\n\nexport default {\n setup() {\n onMounted(() => {\n console.log('component is mounted!')\n })\n }\n}",[1335,1336,1337,1338,1339,1340,1341],{"_33":214,"_214":1353},{"_33":214,"_214":1350,"_230":1351},{"_33":214,"_214":388},{"_33":214,"_214":1347,"_230":1348},{"_33":214,"_214":1346},{"_33":214,"_214":1343,"_230":1344},{"_33":214,"_214":1342}," APIs (which directly mirror the existing lifecycle options):","onXXX",[1345],{"_33":287}," APIs to apply side effects based on state changes. As for performing side effects in different lifecycle hooks, we can use the dedicated ","watch",[1349],{"_33":287},"watchEffect",[1352],{"_33":287},"We know that we can use the ",[1355,1356],{"_33":222,"_27":1362},{"_33":222,"_27":1357},[1358],{"_33":211,"_27":1359},[1360],{"_33":214,"_214":1361},"When the component is mounted, updated or unmounted (lifecycle hooks).",[1363],{"_33":211,"_27":1364},[1365],{"_33":214,"_214":1366},"When some state changes;",[1368,1369,1370],{"_33":214,"_214":1375},{"_33":214,"_214":1372,"_230":1373},{"_33":214,"_214":1371},". These side effects are typically performed at the following timings:","window",[1374],{"_33":287},"So far we have covered the pure state aspect of a component: reactive state, computed state and mutating state on user input. But a component may also need to perform side effects - for example, logging to the console, sending an ajax request, or setting up an event listener on ",{"_349":350},[1378],{"_33":214,"_214":1379},"Lifecycle Hooks",[1381,1382,1383,1384,1385],{"_33":214,"_214":1393},{"_33":214,"_214":284,"_230":1391},{"_33":214,"_214":1390},{"_33":214,"_214":1387,"_230":1388},{"_33":214,"_214":1386}," is omitted, but would also work exactly the same.","

RFC: Vue 3 Composition API