{"id":80190,"date":"2024-10-21T13:06:41","date_gmt":"2024-10-21T06:06:41","guid":{"rendered":"https:\/\/itviec.com\/blog\/?p=80190"},"modified":"2024-10-21T13:06:41","modified_gmt":"2024-10-21T06:06:41","slug":"lifecycle-vuejs-la-gi","status":"publish","type":"post","link":"https:\/\/itviec.com\/blog\/lifecycle-vuejs-la-gi\/","title":{"rendered":"Lifecycle VueJS: Chi ti\u1ebft c\u00e1ch d\u00f9ng Lifecycle Hooks trong VueJS"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">N\u1ed9i dung b\u00e0i vi\u1ebft<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/itviec.com\/blog\/lifecycle-vuejs-la-gi\/#Lifecycle_VueJS_la_gi\" >Lifecycle VueJS l\u00e0 g\u00ec?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/itviec.com\/blog\/lifecycle-vuejs-la-gi\/#Lifecycle_Hook_VueJS_la_gi\" >Lifecycle Hook VueJS l\u00e0 g\u00ec?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/itviec.com\/blog\/lifecycle-vuejs-la-gi\/#Giai_doan_1_Creation_%E2%80%93_Khoi_tao\" >Giai \u0111o\u1ea1n 1: Creation &#8211; Kh\u1edfi t\u1ea1o<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/itviec.com\/blog\/lifecycle-vuejs-la-gi\/#Giai_doan_2_Mount_%E2%80%93_Thao_tac_voi_cay_DOM\" >Giai \u0111o\u1ea1n 2: Mount &#8211; Thao t\u00e1c v\u1edbi c\u00e2y DOM<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/itviec.com\/blog\/lifecycle-vuejs-la-gi\/#Giai_doan_3_Update_%E2%80%93_Cap_nhat\" >Giai \u0111o\u1ea1n 3: Update &#8211; C\u1eadp nh\u1eadt<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/itviec.com\/blog\/lifecycle-vuejs-la-gi\/#Giai_doan_4_Unmount_%E2%80%93_Go_bo\" >Giai \u0111o\u1ea1n 4: Unmount &#8211; G\u1ee1 b\u1ecf<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/itviec.com\/blog\/lifecycle-vuejs-la-gi\/#Cac_lifecycle_hook_Vuejs_dac_biet\" >C\u00e1c lifecycle hook Vuejs \u0111\u1eb7c bi\u1ec7t<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/itviec.com\/blog\/lifecycle-vuejs-la-gi\/#Cac_cau_hoi_thuong_gap_ve_lifecycle_VueJS\" >C\u00e1c c\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 lifecycle VueJS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/itviec.com\/blog\/lifecycle-vuejs-la-gi\/#Tong_ket_lifecycle_VueJS\" >T\u1ed5ng k\u1ebft lifecycle VueJS<\/a><\/li><\/ul><\/nav><\/div>\n<p><em><strong>Trong qu\u00e1 tr\u00ecnh ph\u00e1t tri\u1ec3n \u1ee9ng d\u1ee5ng, vi\u1ec7c hi\u1ec3u r\u00f5 v\u1ec1 v\u00f2ng \u0111\u1eddi c\u1ee7a m\u1ed9t component l\u00e0 \u0111i\u1ec1u v\u00f4 c\u00f9ng quan tr\u1ecdng. Vue.js l\u00e0 m\u1ed9t trong nh\u1eefng framework JavaScript cung c\u1ea5p cho l\u1eadp tr\u00ecnh vi\u00ean h\u1ec7 th\u1ed1ng lifecycle hooks phong ph\u00fa \u0111\u1ec3 qu\u1ea3n l\u00fd v\u00e0 ki\u1ec3m so\u00e1t c\u00e1ch m\u00e0 c\u00e1c component \u0111\u01b0\u1ee3c kh\u1edfi t\u1ea1o, c\u1eadp nh\u1eadt v\u00e0 g\u1ee1 b\u1ecf. Trong b\u00e0i vi\u1ebft n\u00e0y, h\u00e3y c\u00f9ng ITviec t\u00ecm hi\u1ec3u v\u1ec1 lifecycle Vuejs.<\/strong><\/em><\/p>\n<p><span style=\"font-weight: 400;\">\u0110\u1ecdc b\u00e0i vi\u1ebft \u0111\u1ec3 hi\u1ec3u r\u00f5 h\u01a1n:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Lifecycle Vuejs l\u00e0 g\u00ec?<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Lifecycle Hook Vuejs l\u00e0 g\u00ec?<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">C\u00e1c giai \u0111o\u1ea1n ch\u00ednh trong lifecycle Vuejs c\u1ee7a component<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">C\u00e1c lifecycle hook \u0111\u1eb7c bi\u1ec7t kh\u00e1c trong Vuejs<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">C\u00e1c c\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 lifecycle Vuejs<\/span><\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Lifecycle_VueJS_la_gi\"><\/span><b>Lifecycle VueJS l\u00e0 g\u00ec?<\/b><i><\/i><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">M\u1ed7i khi m\u1ed9t \u1ee9ng d\u1ee5ng VueJS \u0111\u01b0\u1ee3c t\u1ea1o, m\u1ed9t instance m\u1edbi c\u1ee7a component \u0111\u01b0\u1ee3c t\u1ea1o ra \u0111\u1ec3 gi\u00fap l\u1eadp tr\u00ecnh vi\u00ean x\u00e2y d\u1ef1ng h\u00e0nh vi mong mu\u1ed1n. N\u00f3 bao g\u1ed3m c\u00e1c t\u00f9y ch\u1ecdn kh\u00e1c nhau nh\u01b0 templates, methods, props, watchers, lifecycles, data v\u00e0 nhi\u1ec1u th\u1ee9 kh\u00e1c.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Lifecycle (v\u00f2ng \u0111\u1eddi) c\u1ee7a m\u1ed9t component l\u00e0 qu\u00e1 tr\u00ecnh t\u1eeb l\u00fac \u0111\u01b0\u1ee3c t\u1ea1o ra, g\u1eafn v\u00e0o DOM, \u0111\u01b0\u1ee3c mounted (g\u1eafn k\u1ebft), c\u1eadp nh\u1eadt d\u1eef li\u1ec7u, cho \u0111\u1ebfn khi b\u1ecb h\u1ee7y b\u1ecf. Vi\u1ec7c hi\u1ec3u r\u00f5 v\u00f2ng \u0111\u1eddi n\u00e0y gi\u00fap l\u1eadp tr\u00ecnh vi\u00ean th\u00eam code v\u00e0o c\u00e1c giai \u0111o\u1ea1n kh\u00e1c nhau \u0111\u1ec3 th\u1ef1c hi\u1ec7n c\u00e1c t\u00e1c v\u1ee5 nh\u01b0:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Kh\u1edfi t\u1ea1o d\u1eef li\u1ec7u:<\/b><span style=\"font-weight: 400;\"> L\u1ea5y d\u1eef li\u1ec7u t\u1eeb server, kh\u1edfi t\u1ea1o c\u00e1c bi\u1ebfn.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>G\u1eafn k\u1ebft DOM:<\/b><span style=\"font-weight: 400;\"> Th\u1ef1c hi\u1ec7n c\u00e1c thao t\u00e1c v\u1edbi DOM sau khi component \u0111\u01b0\u1ee3c render.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>C\u1eadp nh\u1eadt giao di\u1ec7n:<\/b><span style=\"font-weight: 400;\"> C\u1eadp nh\u1eadt giao di\u1ec7n khi d\u1eef li\u1ec7u thay \u0111\u1ed5i.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>D\u1ecdn d\u1eb9p:<\/b><span style=\"font-weight: 400;\"> H\u1ee7y b\u1ecf c\u00e1c listener, timer tr\u01b0\u1edbc khi component b\u1ecb x\u00f3a kh\u1ecfi DOM.<\/span><\/li>\n<\/ul>\n<blockquote><p><em>\u0110\u1ecdc th\u00eam: <a href=\"https:\/\/itviec.com\/blog\/vuejs-la-gi\/\" target=\"_blank\" rel=\"noopener\"><strong>VueJS l\u00e0 g\u00ec? H\u01b0\u1edbng d\u1eabn \u1ee9ng d\u1ee5ng hi\u1ec7u qu\u1ea3 Vue.js trong l\u1eadp tr\u00ecnh<\/strong><\/a><\/em><\/p><\/blockquote>\n<h2><span class=\"ez-toc-section\" id=\"Lifecycle_Hook_VueJS_la_gi\"><\/span><b>Lifecycle Hook VueJS l\u00e0 g\u00ec?<\/b><i><\/i><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Lifecycle hook trong Vue.js l\u00e0 c\u00e1c ph\u01b0\u01a1ng th\u1ee9c \u0111\u01b0\u1ee3c g\u1ecdi t\u1ea1i nh\u1eefng th\u1eddi \u0111i\u1ec3m kh\u00e1c nhau trong v\u00f2ng \u0111\u1eddi c\u1ee7a m\u1ed9t component. M\u1ed7i component trong Vue.js tr\u1ea3i qua m\u1ed9t v\u00f2ng \u0111\u1eddi t\u1eeb khi \u0111\u01b0\u1ee3c kh\u1edfi t\u1ea1o, render, c\u1eadp nh\u1eadt, cho \u0111\u1ebfn khi b\u1ecb g\u1ee1 b\u1ecf kh\u1ecfi DOM. Trong qu\u00e1 tr\u00ecnh n\u00e0y, Vue cung c\u1ea5p c\u00e1c hook \u0111\u1ec3 l\u1eadp tr\u00ecnh vi\u00ean c\u00f3 th\u1ec3 can thi\u1ec7p v\u00e0 th\u1ef1c hi\u1ec7n c\u00e1c thao t\u00e1c t\u1ea1i c\u00e1c giai \u0111o\u1ea1n c\u1ee5 th\u1ec3 c\u1ee7a v\u00f2ng \u0111\u1eddi component.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">C\u00e1c m\u00f3c (hook) trong v\u00f2ng \u0111\u1eddi c\u1ee7a m\u1ed9t component:<\/span><\/p>\n<table>\n<tbody>\n<tr>\n<td><b>Lifecycle Hook <\/b><b>(M\u00f3c v\u00f2ng \u0111\u1eddi)<\/b><\/td>\n<td><b>M\u00f4 t\u1ea3<\/b><\/td>\n<\/tr>\n<tr>\n<td colspan=\"2\"><b>C\u00e1c giai \u0111o\u1ea1n ch\u00ednh trong v\u00f2ng \u0111\u1eddi c\u1ee7a component Vuejs<\/b><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">beforeCreate<\/span><\/td>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">X\u1ea3y ra tr\u01b0\u1edbc t\u1ea5t c\u1ea3 hook trong v\u00f2ng \u0111\u1eddi kh\u00e1c.<\/span><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">created<\/span><\/td>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">Component \u0111\u01b0\u1ee3c kh\u1edfi t\u1ea1o v\u00e0 b\u1ea1n c\u00f3 th\u1ec3 truy c\u1eadp c\u00e1c thu\u1ed9c t\u00ednh c\u1ee7a instance component.<\/span><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">beforeMount<\/span><\/td>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">Component ch\u01b0a \u0111\u01b0\u1ee3c g\u1eafn v\u00e0o DOM, v\u00ec v\u1eady b\u1ea1n kh\u00f4ng th\u1ec3 truy c\u1eadp c\u00e1c ph\u1ea7n t\u1eed DOM.<\/span><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">mounted<\/span><\/td>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">Component \u0111\u00e3 \u0111\u01b0\u1ee3c g\u1eafn v\u00e0o c\u00e2y DOM, cho ph\u00e9p truy c\u1eadp c\u00e1c ph\u1ea7n t\u1eed DOM.<\/span><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">beforeUpdate<\/span><\/td>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">X\u1ea3y ra khi h\u1ec7 th\u1ed1ng ph\u1ea3n \u1ee9ng c\u1ee7a Vue ph\u00e1t hi\u1ec7n c\u00f3 s\u1ef1 thay \u0111\u1ed5i c\u1ea7n m\u1ed9t l\u1ea7n render m\u1edbi.<\/span><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">updated<\/span><\/td>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">X\u1ea3y ra ngay sau khi c\u00e2y DOM \u0111\u00e3 \u0111\u01b0\u1ee3c c\u1eadp nh\u1eadt.<\/span><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">beforeUnmount<\/span><\/td>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">X\u1ea3y ra ngay tr\u01b0\u1edbc khi m\u1ed9t component b\u1ecb g\u1ee1 b\u1ecf kh\u1ecfi DOM.<\/span><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">unmounted<\/span><\/td>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">X\u1ea3y ra sau khi m\u1ed9t component b\u1ecb g\u1ee1 b\u1ecf kh\u1ecfi DOM.<\/span><\/td>\n<\/tr>\n<tr>\n<td colspan=\"2\"><b>C\u00e1c hook \u0111\u1eb7c bi\u1ec7t kh\u00e1c<\/b><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">errorCaptured<\/span><\/td>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">X\u1ea3y ra khi c\u00f3 l\u1ed7i trong m\u1ed9t component con ho\u1eb7c component con ch\u00e1u.<\/span><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">renderTracked<\/span><\/td>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">X\u1ea3y ra khi m\u1ed9t h\u00e0m render \u0111\u01b0\u1ee3c thi\u1ebft l\u1eadp \u0111\u1ec3 theo d\u00f5i ho\u1eb7c gi\u00e1m s\u00e1t m\u1ed9t component ph\u1ea3n \u1ee9ng.<\/span><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">renderTriggered<\/span><\/td>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">X\u1ea3y ra khi c\u00f3 thay \u0111\u1ed5i trong m\u1ed9t component ph\u1ea3n \u1ee9ng \u0111\u01b0\u1ee3c theo d\u00f5i, d\u1eabn \u0111\u1ebfn m\u1ed9t l\u1ea7n render m\u1edbi.<\/span><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">activated<\/span><\/td>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">X\u1ea3y ra khi m\u1ed9t component \u0111\u1ed9ng \u0111\u01b0\u1ee3c l\u01b0u trong b\u1ed9 nh\u1edb cache \u0111\u01b0\u1ee3c th\u00eam v\u00e0o (nh\u01b0ng \u0111\u00e3 c\u00f3 trong DOM).<\/span><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">deactivated<\/span><\/td>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">X\u1ea3y ra khi m\u1ed9t component \u0111\u1ed9ng \u0111\u01b0\u1ee3c l\u01b0u trong b\u1ed9 nh\u1edb cache b\u1ecb lo\u1ea1i b\u1ecf (nh\u01b0ng kh\u00f4ng b\u1ecb g\u1ee1 kh\u1ecfi DOM).<\/span><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">serverPrefetch<\/span><\/td>\n<td style=\"text-align: left;\"><span style=\"font-weight: 400;\">X\u1ea3y ra trong qu\u00e1 tr\u00ecnh render ph\u00eda server (SSR).<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><span style=\"font-weight: 400;\">C\u00f9ng t\u00ecm hi\u1ec3u v\u1ec1 c\u00e1c giai \u0111o\u1ea1n c\u1ee7a lifecycle Vuejs trong n\u1ed9i dung b\u00ean d\u01b0\u1edbi.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Giai_doan_1_Creation_%E2%80%93_Khoi_tao\"><\/span><b>Giai \u0111o\u1ea1n 1: Creation &#8211; Kh\u1edfi t\u1ea1o<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><b>Before create\u00a0<\/b><i><\/i><\/h3>\n<p><b>beforeCreate<\/b><span style=\"font-weight: 400;\"> l\u00e0 giai \u0111o\u1ea1n \u0111\u1ea7u ti\u00ean trong qu\u00e1 tr\u00ecnh t\u1ea1o ra m\u1ed9t instance Vue. T\u1ea1i giai \u0111o\u1ea1n n\u00e0y, instance v\u1eabn ch\u01b0a ho\u00e0n thi\u1ec7n v\u00e0 ch\u00fang ta <\/span><b>ch\u01b0a th\u1ec3<\/b><span style=\"font-weight: 400;\"> truy c\u1eadp v\u00e0o d\u1eef li\u1ec7u, ph\u01b0\u01a1ng th\u1ee9c, hay c\u00e1c thu\u1ed9c t\u00ednh t\u00ednh to\u00e1n c\u1ee7a component. H\u00e3y h\u00ecnh dung nh\u01b0 b\u1ea1n \u0111ang chu\u1ea9n b\u1ecb nguy\u00ean li\u1ec7u \u0111\u1ec3 l\u00e0m b\u00e1nh, nh\u01b0ng ch\u01b0a b\u1eaft \u0111\u1ea7u nh\u00e0o b\u1ed9t.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Lifecycle hook <\/span><b>beforeCreate<\/b><span style=\"font-weight: 400;\"> \u0111\u01b0\u1ee3c g\u1ecdi tr\u01b0\u1edbc khi Vue thi\u1ebft l\u1eadp c\u00e1c thu\u1ed9c t\u00ednh ph\u1ea3n \u1ee9ng (reactive), ph\u01b0\u01a1ng th\u1ee9c, v\u00e0 c\u00e1c tr\u00ecnh l\u1eafng nghe s\u1ef1 ki\u1ec7n. \u0110i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0 b\u1ea1n <\/span><b>kh\u00f4ng n\u00ean<\/b><span style=\"font-weight: 400;\"> c\u1ed1 g\u1eafng truy c\u1eadp v\u00e0o c\u00e1c ph\u1ea7n t\u1eed thu\u1ed9c v\u1ec1 component t\u1eeb lifecycle hook n\u00e0y.<\/span><\/p>\n<blockquote><p><b>L\u01b0u \u00fd:<\/b><span style=\"font-weight: 400;\"> B\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng beforeCreate \u0111\u1ec3 thi\u1ebft l\u1eadp m\u1ed9t s\u1ed1 bi\u1ebfn to\u00e0n c\u1ee5c ho\u1eb7c th\u1ef1c hi\u1ec7n c\u00e1c t\u00e1c v\u1ee5 kh\u1edfi t\u1ea1o ban \u0111\u1ea7u kh\u00e1c. Tuy nhi\u00ean, <\/span><b>kh\u00f4ng n\u00ean<\/b><span style=\"font-weight: 400;\"> c\u1ed1 g\u1eafng thao t\u00e1c v\u1edbi DOM ho\u1eb7c truy c\u1eadp v\u00e0o d\u1eef li\u1ec7u c\u1ee7a component.<\/span><\/p><\/blockquote>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5: S\u1eed d\u1ee5ng hook <\/span><b>beforeCreate<\/b><span style=\"font-weight: 400;\"> \u0111\u1ec3 t\u1ea1o m\u1ed9t c\u1ea3nh b\u00e1o, ghi v\u00e0o console, v\u00e0 th\u1eed thay \u0111\u1ed5i thu\u1ed9c t\u00ednh d\u1eef li\u1ec7u &#8216;text&#8217; nh\u01b0ng kh\u00f4ng th\u00e0nh c\u00f4ng.<\/span><\/p>\n<p><strong>App.vue<\/strong><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;template&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;h1&gt;The 'beforeCreate' Lifecycle Hook&lt;\/h1&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;p&gt;We can see the console.log() message from 'beforeCreate' lifecycle hook, but there is no effect from the text change we try to do to the Vue data property, because the Vue data property is not created yet.&lt;\/p&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;button @click=\"this.activeComp = !this.activeComp\"&gt;Add\/Remove Component&lt;\/button&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;div&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;comp-one v-if=\"activeComp\"&gt;&lt;\/comp-one&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;\/div&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/template&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;script&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">export default {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0data() {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0return {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0activeComp: false<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/script&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;style&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">#app &gt; div {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0border: dashed black 1px;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0border-radius: 10px;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0padding: 10px;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0margin-top: 10px;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0background-color: lightgreen;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">#pResult {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0background-color: lightcoral;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0display: inline-block;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/style&gt;<\/span><\/pre>\n<p><b>CompOne.vue<\/b><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;template&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;h2&gt;Component&lt;\/h2&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;p&gt;This is the component&lt;\/p&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;p id=\"pResult\"&gt;{{ text }}&lt;\/p&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/template&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;script&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">export default {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">data() {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">return {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">text: '...'<\/span>\r\n\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">},<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0beforeCreate() {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">this.text = 'initial text';<\/span>\r\n\r\n<span style=\"font-weight: 400;\">console.log(\"beforeCreate: The component is not created yet.\");<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/script&gt;<\/span><\/pre>\n<p><b>main.js<\/b><\/p>\n<pre><span style=\"font-weight: 400;\">import { createApp } from 'vue'<\/span>\r\n\r\n<span style=\"font-weight: 400;\">import App from '.\/App.vue'<\/span>\r\n\r\n<span style=\"font-weight: 400;\">import CompOne from '.\/components\/CompOne.vue'<\/span>\r\n\r\n<span style=\"font-weight: 400;\">const app = createApp(App)<\/span>\r\n\r\n<span style=\"font-weight: 400;\">app.component('comp-one', CompOne)<\/span>\r\n\r\n<span style=\"font-weight: 400;\">app.mount('#app')<\/span><\/pre>\n<p><a href=\"https:\/\/prnt.sc\/CpHnHzZidHtg\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">\u1ea2nh minh ho\u1ea1 1<\/span><\/a><span style=\"font-weight: 400;\"> \u2192 <\/span><a href=\"https:\/\/prnt.sc\/zLbT4i3hO5iN\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">\u1ea2nh minh ho\u1ea1 2<\/span><\/a><\/p>\n<h3><b>Created<\/b><i><\/i><\/h3>\n<p><b>Giai \u0111o\u1ea1n created<\/b><span style=\"font-weight: 400;\"> l\u00e0 th\u1eddi \u0111i\u1ec3m m\u00e0 m\u1ed9t component Vue \u0111\u00e3 \u0111\u01b0\u1ee3c kh\u1edfi t\u1ea1o ho\u00e0n ch\u1ec9nh. T\u1ea1i \u0111\u00e2y, t\u1ea5t c\u1ea3 c\u00e1c d\u1eef li\u1ec7u, ph\u01b0\u01a1ng th\u1ee9c, thu\u1ed9c t\u00ednh t\u00ednh to\u00e1n (computed properties) v\u00e0 c\u00e1c tr\u00ecnh l\u1eafng nghe s\u1ef1 ki\u1ec7n (event listeners) \u0111\u00e3 s\u1eb5n s\u00e0ng \u0111\u1ec3 s\u1eed d\u1ee5ng. H\u00e3y h\u00ecnh dung nh\u01b0 m\u1ed9t chi\u1ebfc b\u00e1nh \u0111\u00e3 \u0111\u01b0\u1ee3c nh\u00e0o xong v\u00e0 c\u00e1c nguy\u00ean li\u1ec7u \u0111\u00e3 \u0111\u01b0\u1ee3c chu\u1ea9n b\u1ecb \u0111\u1ea7y \u0111\u1ee7, s\u1eb5n s\u00e0ng \u0111\u1ec3 \u0111\u01b0a v\u00e0o l\u00f2 n\u01b0\u1edbng.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Lifecycle hook <\/span><b>created<\/b><span style=\"font-weight: 400;\"> \u0111\u01b0\u1ee3c g\u1ecdi sau khi component kh\u1edfi t\u1ea1o, x\u1ea3y ra sau &#8220;beforeCreate&#8221; v\u00e0 tr\u01b0\u1edbc &#8220;beforeMount&#8221; v\u00ec \u0111\u00e2y l\u00e0 th\u1eddi \u0111i\u1ec3m th\u00edch h\u1ee3p \u0111\u1ec3:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Truy c\u1eadp d\u1eef li\u1ec7u:<\/b><span style=\"font-weight: 400;\"> B\u1ea1n c\u00f3 th\u1ec3 truy c\u1eadp v\u00e0 thao t\u00e1c v\u1edbi d\u1eef li\u1ec7u c\u1ee7a component.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>G\u1ecdi c\u00e1c ph\u01b0\u01a1ng th\u1ee9c:<\/b><span style=\"font-weight: 400;\"> B\u1ea1n c\u00f3 th\u1ec3 g\u1ecdi c\u00e1c ph\u01b0\u01a1ng th\u1ee9c \u0111\u00e3 \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a trong component.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Th\u1ef1c hi\u1ec7n c\u00e1c t\u00e1c v\u1ee5 kh\u1edfi t\u1ea1o:<\/b><span style=\"font-weight: 400;\"> V\u00ed d\u1ee5, th\u1ef1c hi\u1ec7n c\u00e1c y\u00eau c\u1ea7u HTTP \u0111\u1ec3 l\u1ea5y d\u1eef li\u1ec7u t\u1eeb server v\u00e0 c\u1eadp nh\u1eadt d\u1eef li\u1ec7u c\u1ee7a component.<\/span><\/li>\n<\/ul>\n<p><b>Tuy nhi\u00ean,<\/b><span style=\"font-weight: 400;\"> b\u1ea1n <\/span><b>kh\u00f4ng n\u00ean<\/b><span style=\"font-weight: 400;\"> c\u1ed1 g\u1eafng truy c\u1eadp tr\u1ef1c ti\u1ebfp v\u00e0o c\u00e1c ph\u1ea7n t\u1eed DOM t\u1eeb giai \u0111o\u1ea1n created v\u00ec DOM ch\u01b0a \u0111\u01b0\u1ee3c g\u1eafn v\u00e0o (mount) v\u00e0o trang web t\u1ea1i th\u1eddi \u0111i\u1ec3m n\u00e0y.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5: S\u1eed d\u1ee5ng hook <\/span><b>created<\/b><span style=\"font-weight: 400;\"> \u0111\u1ec3 thay \u0111\u1ed5i thu\u1ed9c t\u00ednh d\u1eef li\u1ec7u &#8216;text&#8217;.<\/span><i><\/i><\/p>\n<p><b>App.vue<\/b><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;template&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;h1&gt;The 'created' Lifecycle Hook&lt;\/h1&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;p&gt;We can see the console.log() message from 'created' lifecycle hook, and the text change we try to do to the Vue data property works, because the Vue data property is already created at this stage.&lt;\/p&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;button @click=\"this.activeComp = !this.activeComp\"&gt;Add\/Remove Component&lt;\/button&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;div&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;comp-one v-if=\"activeComp\"&gt;&lt;\/comp-one&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;\/div&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/template&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;script&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">export default {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0data() {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0return {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0activeComp: false<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/script&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;style&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">#app &gt; div {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0border: dashed black 1px;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0border-radius: 10px;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0padding: 10px;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0margin-top: 10px;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0background-color: lightgreen;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">#pResult {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0background-color: lightcoral;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0display: inline-block;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/style&gt;<\/span><\/pre>\n<p><b>CompOne.vue<\/b><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;template&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;h2&gt;Component&lt;\/h2&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;p&gt;This is the component&lt;\/p&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;p id=\"pResult\"&gt;{{ text }}&lt;\/p&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/template&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;script&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">export default {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">data() {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">return {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">text: '...'<\/span>\r\n\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">},<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0created() {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">this.text = 'initial text';<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0console.log(\"created: The component just got created.\");<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/script&gt;<\/span><\/pre>\n<p><b>main.js<\/b><\/p>\n<pre><span style=\"font-weight: 400;\">import { createApp } from 'vue'<\/span>\r\n\r\n<span style=\"font-weight: 400;\">import App from '.\/App.vue'<\/span>\r\n\r\n<span style=\"font-weight: 400;\">import CompOne from '.\/components\/CompOne.vue'<\/span>\r\n\r\n<span style=\"font-weight: 400;\">const app = createApp(App)<\/span>\r\n\r\n<span style=\"font-weight: 400;\">app.component('comp-one', CompOne)<\/span>\r\n\r\n<span style=\"font-weight: 400;\">app.mount('#app')<\/span><\/pre>\n<p><a href=\"https:\/\/prnt.sc\/gt4vG5AGfAWc\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">\u1ea2nh minh ho\u1ea1 1<\/span><\/a><span style=\"font-weight: 400;\"> \u2192 <\/span><a href=\"https:\/\/prnt.sc\/HokVSd4tAyBI\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">\u1ea2nh minh ho\u1ea1 2<\/span><\/a><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Giai_doan_2_Mount_%E2%80%93_Thao_tac_voi_cay_DOM\"><\/span><b>Giai \u0111o\u1ea1n 2: Mount &#8211; Thao t\u00e1c v\u1edbi c\u00e2y DOM<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><b>Giai \u0111o\u1ea1n g\u1eafn k\u1ebft (Mounting)<\/b><span style=\"font-weight: 400;\"> l\u00e0 giai \u0111o\u1ea1n m\u00e0 component Vue \u0111\u01b0\u1ee3c k\u1ebft n\u1ed1i v\u1edbi DOM (Document Object Model), t\u1ee9c l\u00e0 n\u00f3 \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb tr\u00ean m\u00e0n h\u00ecnh. Trong giai \u0111o\u1ea1n n\u00e0y, Vue s\u1ebd thay th\u1ebf m\u1ed9t ph\u1ea7n t\u1eed trong DOM b\u1eb1ng c\u1ea5u tr\u00fac HTML \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a trong template c\u1ee7a component.<\/span><\/p>\n<h3><b>Before mount<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Tr\u01b0\u1edbc khi component \u0111\u01b0\u1ee3c g\u1eafn v\u00e0o DOM, Vue s\u1ebd ki\u1ec3m tra xem template c\u00f3 s\u1eb5n hay kh\u00f4ng. Giai \u0111o\u1ea1n n\u00e0y ch\u1ee7 y\u1ebfu d\u00f9ng \u0111\u1ec3 chu\u1ea9n b\u1ecb m\u1ed9t s\u1ed1 vi\u1ec7c tr\u01b0\u1edbc khi component \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb. Ch\u00fang ta n\u00ean tr\u00e1nh c\u1ed1 g\u1eafng truy c\u1eadp c\u00e1c ph\u1ea7n t\u1eed DOM t\u1eeb hook v\u00f2ng \u0111\u1eddi beforeMount, v\u00ec c\u00e1c ph\u1ea7n t\u1eed DOM kh\u00f4ng th\u1ec3 truy c\u1eadp \u0111\u01b0\u1ee3c cho \u0111\u1ebfn khi component \u0111\u01b0\u1ee3c g\u1eafn k\u1ebft.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5: S\u1eed d\u1ee5ng hook <\/span><b>mounted<\/b><span style=\"font-weight: 400;\"> \u0111\u1ec3 \u0111\u1eb7t con tr\u1ecf chu\u1ed9t v\u00e0o tr\u01b0\u1eddng nh\u1eadp li\u1ec7u ngay khi component \u0111\u01b0\u1ee3c g\u1eafn v\u00e0o.<\/span><i><\/i><\/p>\n<p><b>App.vue<\/b><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;template&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;h1&gt;The 'beforeMount' Lifecycle Hook&lt;\/h1&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;p&gt;We can see the console.log() message from the 'beforeMount' lifecycle hook, but the text change we try to do to the 'pEl' paragraph DOM element does not work, because the 'pEl' paragraph DOM element does not exist yet at this stage.&lt;\/p&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;button @click=\"this.activeComp = !this.activeComp\"&gt;Add\/Remove Component&lt;\/button&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;div&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;comp-one v-if=\"activeComp\"&gt;&lt;\/comp-one&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;\/div&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/template&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;script&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">export default {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0data() {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0return {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0activeComp: false<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/script&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;style&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">#app &gt; div {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0border: dashed black 1px;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0border-radius: 10px;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0padding: 10px;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0margin-top: 10px;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0background-color: lightgreen;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">#pEl {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0background-color: lightcoral;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0display: inline-block;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/style&gt;<\/span><\/pre>\n<p><b>CompOne.vue<\/b><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;template&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;h2&gt;Component&lt;\/h2&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;p&gt;This is the component&lt;\/p&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;p ref=\"pEl\" id=\"pEl\"&gt;We try to access this text from the 'beforeMount' hook.&lt;\/p&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/template&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;script&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">export default {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0beforeMount() {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">console.log(\"beforeMount: This is just before the component is mounted.\");<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0this.$refs.pEl.innerHTML = \"Hello World!\"; \/\/ &lt;-- We cannot reach the 'pEl' DOM element at this stage\u00a0<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/script&gt;\u00a0<\/span><\/pre>\n<p><b>main.js<\/b><\/p>\n<pre><span style=\"font-weight: 400;\">import { createApp } from 'vue'<\/span>\r\n\r\n<span style=\"font-weight: 400;\">import App from '.\/App.vue'<\/span>\r\n\r\n<span style=\"font-weight: 400;\">import CompOne from '.\/components\/CompOne.vue'<\/span>\r\n\r\n<span style=\"font-weight: 400;\">const app = createApp(App)<\/span>\r\n\r\n<span style=\"font-weight: 400;\">app.component('comp-one', CompOne)<\/span>\r\n\r\n<span style=\"font-weight: 400;\">app.mount('#app')<\/span><\/pre>\n<p><a href=\"https:\/\/prnt.sc\/-CdA1Iov7Pll\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">\u1ea2nh minh ho\u1ea1 1<\/span><\/a><span style=\"font-weight: 400;\"> \u2192 <\/span><a href=\"https:\/\/prnt.sc\/ZwYnvrHtP-6W\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">\u1ea2nh minh ho\u1ea1 2<\/span><\/a><\/p>\n<h3><b>Mounted<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Sau khi component \u0111\u00e3 \u0111\u01b0\u1ee3c g\u1eafn v\u00e0o DOM, Vue s\u1ebd g\u1ecdi hook mounted. \u0110\u00e2y l\u00e0 th\u1eddi \u0111i\u1ec3m th\u00edch h\u1ee3p \u0111\u1ec3 b\u1ea1n th\u1ef1c hi\u1ec7n c\u00e1c thao t\u00e1c li\u00ean quan \u0111\u1ebfn DOM, nh\u01b0 th\u00eam s\u1ef1 ki\u1ec7n, truy c\u1eadp c\u00e1c ph\u1ea7n t\u1eed DOM, ho\u1eb7c th\u1ef1c hi\u1ec7n c\u00e1c y\u00eau c\u1ea7u AJAX \u0111\u1ec3 l\u1ea5y d\u1eef li\u1ec7u.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5: S\u1eed d\u1ee5ng hook <\/span><b>mounted<\/b><span style=\"font-weight: 400;\"> \u0111\u1ec3 \u0111\u1eb7t con tr\u1ecf v\u00e0o b\u00ean trong tr\u01b0\u1eddng nh\u1eadp li\u1ec7u ngay khi component \u0111\u01b0\u1ee3c g\u1eafn v\u00e0o DOM.<\/span><i><\/i><\/p>\n<p><b>App.vue<\/b><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;template&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;h1&gt;The 'mounted' Lifecycle Hook&lt;\/h1&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;button @click=\"this.activeComp = !this.activeComp\"&gt;Create component&lt;\/button&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;div&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;comp-one v-if=\"activeComp\"&gt;&lt;\/comp-one&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;\/div&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/template&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;script&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">export default {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0data() {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0return {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0activeComp: false<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/script&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;style scoped&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0div {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0border: dashed black 1px;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0border-radius: 10px;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0padding: 20px;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0margin: 10px;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0width: 400px;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0background-color: lightgreen;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/style&gt;<\/span><\/pre>\n<p><b>CompOne.vue<\/b><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;template&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;h2&gt;Component&lt;\/h2&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;p&gt;Right after this component is added to the DOM, the mounted() function is called and we can add code to that mounted() function. In this example, an alert popup box appears after this component is mounted.&lt;\/p&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;p&gt;&lt;strong&gt;Note:&lt;\/strong&gt; The reason that the alert is visible before the component is visible is because the alert is called before the browser gets to render the component to the screen.&lt;\/p&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/template&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;script&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">export default {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0mounted() {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0alert(\"The component is mounted!\");<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/script&gt;<\/span><\/pre>\n<p><b>main.js<\/b><\/p>\n<pre><span style=\"font-weight: 400;\">import { createApp } from 'vue'<\/span>\r\n\r\n<span style=\"font-weight: 400;\">import App from '.\/App.vue'<\/span>\r\n\r\n<span style=\"font-weight: 400;\">import CompOne from '.\/components\/CompOne.vue'<\/span>\r\n\r\n<span style=\"font-weight: 400;\">const app = createApp(App)<\/span>\r\n\r\n<span style=\"font-weight: 400;\">app.component('comp-one', CompOne)<\/span>\r\n\r\n<span style=\"font-weight: 400;\">app.mount('#app')<\/span><\/pre>\n<p><a href=\"https:\/\/prnt.sc\/Wd1b9gMfecoR\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">\u1ea2nh minh ho\u1ea1 1<\/span><\/a><span style=\"font-weight: 400;\"> \u2192 <\/span><a href=\"https:\/\/prnt.sc\/eV_kkr1h3QWv\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">\u1ea2nh minh ho\u1ea1 2<\/span><\/a><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Giai_doan_3_Update_%E2%80%93_Cap_nhat\"><\/span><b>Giai \u0111o\u1ea1n 3: Update &#8211; C\u1eadp nh\u1eadt<\/b><i><\/i><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Giai \u0111o\u1ea1n c\u1eadp nh\u1eadt bao g\u1ed3m c\u00e1c hook beforeUpdated v\u00e0 updated, kh\u00e1 h\u1eefu \u00edch trong vi\u1ec7c g\u1ee1 l\u1ed7i, thay \u0111\u1ed5i tr\u1ea1ng th\u00e1i ph\u1ea3n \u1ee9ng c\u1ee7a component ho\u1eb7c x\u1ea3y ra render l\u1ea1i.<\/span><\/p>\n<h3><b>Before update<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">\u0110\u00e2y l\u00e0 th\u1eddi \u0111i\u1ec3m ngay tr\u01b0\u1edbc khi giao di\u1ec7n \u0111\u01b0\u1ee3c c\u1eadp nh\u1eadt. B\u1ea1n c\u00f3 th\u1ec3 t\u1eadn d\u1ee5ng giai \u0111o\u1ea1n n\u00e0y \u0111\u1ec3 ki\u1ec3m tra xem d\u1eef li\u1ec7u m\u1edbi c\u00f3 h\u1ee3p l\u1ec7 kh\u00f4ng ho\u1eb7c th\u1ef1c hi\u1ec7n m\u1ed9t s\u1ed1 chu\u1ea9n b\u1ecb tr\u01b0\u1edbc khi giao di\u1ec7n thay \u0111\u1ed5i.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">M\u1ed9t \u0111i\u1ec1u \u0111\u1eb7c bi\u1ec7t v\u1ec1 hook beforeUpdate l\u00e0 b\u1ea1n c\u00f3 th\u1ec3 th\u1ef1c hi\u1ec7n thay \u0111\u1ed5i cho \u1ee9ng d\u1ee5ng m\u00e0 kh\u00f4ng c\u1ea7n k\u00edch ho\u1ea1t b\u1ea3n c\u1eadp nh\u1eadt m\u1edbi, nh\u1edd \u0111\u00f3 tr\u00e1nh \u0111\u01b0\u1ee3c v\u00f2ng l\u1eb7p v\u00f4 h\u1ea1n. \u0110\u00f3 l\u00e0 l\u00fd do t\u1ea1i sao kh\u00f4ng n\u00ean th\u1ef1c hi\u1ec7n thay \u0111\u1ed5i cho d\u1eef li\u1ec7u reactive trong hook updated, v\u00ec v\u1edbi hook \u0111\u00f3, m\u1ed9t v\u00f2ng l\u1eb7p v\u00f4 h\u1ea1n s\u1ebd \u0111\u01b0\u1ee3c t\u1ea1o ra.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5: S\u1eed d\u1ee5ng hook <\/span><b>beforeUpdate<\/b><span style=\"font-weight: 400;\"> \u0111\u1ec3 \u0111\u1ebfm s\u1ed1 l\u1ea7n m\u1ed9t l\u1ea7n c\u1eadp nh\u1eadt \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t.<\/span><i><\/i><\/p>\n<p><b>App.vue<\/b><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;template&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;h1&gt;Lifecycle Hook 'beforeUpdate' Example&lt;\/h1&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;p&gt;When the 'sliderVal' property gets a new value from the slider, a new render is triggered because the page must be updated.&lt;\/p&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;p&gt;The 'beforeUpdate' lifecycle hook is used to count how many times a new page render is triggered.&lt;\/p&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;p&gt;Move image: &lt;input type=\"range\" v-model=\"sliderVal\" min=\"0\" max=\"200\"&gt; {{ sliderVal }} px&lt;\/p&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;div id=\"wrapper\"&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;img src=\"\/img_apple.svg\" v-bind:style=\"{ left: sliderVal + 'px' }\"&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;\/div&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;p&gt;Rendered &lt;span&gt;{{ renderCount }}&lt;\/span&gt; times.&lt;\/p&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/template&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;script&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">export default {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0data() {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0return {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0sliderVal: 50,<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0renderCount: 0<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0},<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0beforeUpdate() {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0this.renderCount++;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/script&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;style scoped&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">#wrapper {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0height: 100px;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0width: 300px;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0position: relative;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0border: solid black 3px;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">img {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0height: 100px;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0scale: 1;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0background-color: lightblue;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0position: absolute;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0top: 0;<\/span><\/pre>\n<p><b>main.js<\/b><\/p>\n<pre><span style=\"font-weight: 400;\">import { createApp } from 'vue'<\/span>\r\n\r\n<span style=\"font-weight: 400;\">import App from '.\/App.vue'<\/span>\r\n\r\n<span style=\"font-weight: 400;\">const app = createApp(App)<\/span>\r\n\r\n<span style=\"font-weight: 400;\">app.mount('#app')<\/span><\/pre>\n<p><a href=\"https:\/\/prnt.sc\/vFgaMCrxoerS\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">\u1ea2nh minh ho\u1ea1<\/span><\/a><\/p>\n<h3><b>Updated<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Hook Updated l\u00e0 giai \u0111o\u1ea1n sau khi giao di\u1ec7n \u0111\u00e3 \u0111\u01b0\u1ee3c c\u1eadp nh\u1eadt xong. DOM \u0111\u01b0\u1ee3c c\u1eadp nh\u1eadt d\u01b0\u1edbi hook n\u00e0y v\u00e0 c\u00e1c ho\u1ea1t \u0111\u1ed9ng ph\u1ee5 thu\u1ed9c v\u00e0o DOM \u0111\u00e3 c\u00f3 th\u1ec3 th\u1ef1c hi\u1ec7n nh\u01b0 th\u00eam s\u1ef1 ki\u1ec7n, cu\u1ed9n \u0111\u1ebfn m\u1ed9t ph\u1ea7n t\u1eed c\u1ee5 th\u1ec3,&#8230;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5: S\u1eed d\u1ee5ng hook <\/span><b>updated<\/b><span style=\"font-weight: 400;\"> \u0111\u1ec3 ghi m\u1ed9t th\u00f4ng \u0111i\u1ec7p v\u00e0o console m\u1ed7i khi c\u00e2y DOM \u0111\u01b0\u1ee3c c\u1eadp nh\u1eadt.<\/span><i><\/i><\/p>\n<p><b>App.vue<\/b><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;template&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;h1&gt;Lifecycle Hook 'updated' Example&lt;\/h1&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;p&gt;Using the 'updated' lifecycle hook to count how many times the page has been rendered.&lt;\/p&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;p&gt;Slider value &lt;input type=\"range\" v-model=\"sliderVal\"&gt; {{ sliderVal }}&lt;\/p&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;p&gt;In this example, we write the render count to the console, because making changes\u00a0 to the view would re-activate the updated hook and create an infinite loop.&lt;\/p&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/template&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;script&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">export default {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0data() {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0return {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0sliderVal: 50,<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0renderCount: 0<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0},<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0updated() {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0this.renderCount++;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0console.log('Updated ' + this.renderCount + ' times.')<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/script&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;style scoped&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">span {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0background-color: lightgreen;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/style&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\"><b>main.js<\/b><\/span><\/p>\n<pre><span style=\"font-weight: 400;\">import { createApp } from 'vue'<\/span>\r\n\r\n<span style=\"font-weight: 400;\">import App from '.\/App.vue'<\/span>\r\n\r\n<span style=\"font-weight: 400;\">const app = createApp(App)<\/span>\r\n\r\n<span style=\"font-weight: 400;\">app.mount('#app')<\/span><\/pre>\n<p><a href=\"https:\/\/prnt.sc\/mGxpf_4OaC6f\" target=\"_blank\" rel=\"noopener\">\u1ea2nh minh ho\u1ea1<\/a><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Giai_doan_4_Unmount_%E2%80%93_Go_bo\"><\/span><b>Giai \u0111o\u1ea1n 4: Unmount &#8211; G\u1ee1 b\u1ecf<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><b>Unmount<\/b><span style=\"font-weight: 400;\"> l\u00e0 m\u1ed9t giai \u0111o\u1ea1n trong v\u00f2ng \u0111\u1eddi c\u1ee7a m\u1ed9t component Vue, di\u1ec5n ra khi component \u0111\u00f3 b\u1ecb x\u00f3a kh\u1ecfi DOM. N\u00f3i c\u00e1ch kh\u00e1c, khi m\u1ed9t component kh\u00f4ng c\u00f2n \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb tr\u00ean giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng n\u1eefa, th\u00ec n\u00f3 s\u1ebd tr\u1ea3i qua giai \u0111o\u1ea1n unmount.<\/span><\/p>\n<h3><b>Before Unmount<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">\u0110\u00e2y l\u00e0 giai \u0111o\u1ea1n tr\u01b0\u1edbc khi component b\u1ecb g\u1ee1 b\u1ecf kh\u1ecfi DOM. \u1ede giai \u0111o\u1ea1n n\u00e0y, b\u1ea1n c\u00f3 th\u1ec3 th\u1ef1c hi\u1ec7n c\u00e1c thao t\u00e1c nh\u01b0 h\u1ee7y b\u1ecf c\u00e1c s\u1ef1 ki\u1ec7n, ng\u1eebng l\u1eafng nghe thay \u0111\u1ed5i d\u1eef li\u1ec7u, ho\u1eb7c d\u1ecdn d\u1eb9p t\u00e0i nguy\u00ean nh\u01b0 b\u1ed9 h\u1eb9n gi\u1edd, y\u00eau c\u1ea7u API \u0111ang ch\u1edd, ho\u1eb7c k\u1ebft n\u1ed1i WebSocket.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">T\u1ea1i th\u1eddi \u0111i\u1ec3m &#8220;beforeUnmount&#8221;, component v\u1eabn ho\u00e0n to\u00e0n ho\u1ea1t \u0111\u1ed9ng. T\u1ea5t c\u1ea3 c\u00e1c thu\u1ed9c t\u00ednh, computed properties, v\u00e0 methods v\u1eabn c\u00f3 th\u1ec3 truy c\u1eadp \u0111\u01b0\u1ee3c. Khi m\u1ed9t component cha b\u1ecb unmount, t\u1ea5t c\u1ea3 c\u00e1c component con c\u1ee7a n\u00f3 c\u0169ng s\u1ebd b\u1ecb unmount.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5: S\u1eed d\u1ee5ng hook <\/span><b>beforeUnmount<\/b><span style=\"font-weight: 400;\"> \u0111\u1ec3 t\u1ea1o m\u1ed9t c\u1ea3nh b\u00e1o v\u1edbi n\u1ed9i dung l\u1ea5y t\u1eeb b\u00ean trong m\u1ed9t ph\u1ea7n t\u1eed <\/span><span style=\"font-weight: 400;\">&lt;p&gt;<\/span><span style=\"font-weight: 400;\">.<\/span><i><\/i><\/p>\n<p><b>App.vue<\/b><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;template&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;h1&gt;The 'beforeUnmount' Lifecycle Hook&lt;\/h1&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;p&gt;As we can see in the alert box, the text inside the p-tag is still accessible in the 'beforeUnmount' hook, right before the 'unmount' hook.&lt;\/p&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;button @click=\"this.activeComp = !this.activeComp\"&gt;{{ btnText }}&lt;\/button&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;div&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;comp-one v-if=\"activeComp\"&gt;&lt;\/comp-one&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;\/div&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/template&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;script&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">export default {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0data() {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0return {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0activeComp: true<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0},<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0computed: {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0btnText() {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if(this.activeComp) {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return 'Remove component'<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0else {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return 'Add component'<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/script&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;style scoped&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0div {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0border: dashed black 1px;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0border-radius: 10px;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0padding: 20px;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0margin: 10px;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0width: 400px;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0background-color: lightgreen;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/style&gt;<\/span><\/pre>\n<p><b>CompOne.vue<\/b><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;template&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;h2&gt;Component&lt;\/h2&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;p ref=\"pEl\"&gt;Strawberries!&lt;\/p&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/template&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;script&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">export default {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0beforeUnmount() {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0alert(\"beforeUnmount: The text inside the p-tag is: \" + this.$refs.pEl.innerHTML);<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/script&gt;<\/span><\/pre>\n<p><b>main.js<\/b><\/p>\n<pre><span style=\"font-weight: 400;\">import { createApp } from 'vue'<\/span>\r\n\r\n<span style=\"font-weight: 400;\">import App from '.\/App.vue'<\/span>\r\n\r\n<span style=\"font-weight: 400;\">import CompOne from '.\/components\/CompOne.vue'<\/span>\r\n\r\n<span style=\"font-weight: 400;\">const app = createApp(App)<\/span>\r\n\r\n<span style=\"font-weight: 400;\">app.component('comp-one', CompOne)<\/span>\r\n\r\n<span style=\"font-weight: 400;\">app.mount('#app')<\/span><\/pre>\n<p><a href=\"https:\/\/prnt.sc\/hGSEFxee2gXH\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">\u1ea2nh minh ho\u1ea1 1<\/span><\/a><span style=\"font-weight: 400;\"> \u2192 <\/span><a href=\"https:\/\/prnt.sc\/UDmJxljqsLcP\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">\u1ea2nh minh ho\u1ea1 2<\/span><\/a><\/p>\n<h3><b>Unmounted<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">\u0110\u00e2y l\u00e0 giai \u0111o\u1ea1n khi component \u0111\u00e3 ho\u00e0n to\u00e0n b\u1ecb g\u1ee1 kh\u1ecfi DOM. Trong Vue.js 3, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng hook unmounted \u0111\u1ec3 ki\u1ec3m tra ho\u1eb7c th\u1ef1c hi\u1ec7n thao t\u00e1c khi DOM \u0111\u00e3 b\u1ecb x\u00f3a.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5: S\u1eed d\u1ee5ng hook <\/span><b>unmounted<\/b><span style=\"font-weight: 400;\"> \u0111\u1ec3 t\u1ea1o m\u1ed9t c\u1ea3nh b\u00e1o khi component b\u1ecb g\u1ee1 b\u1ecf kh\u1ecfi DOM.<\/span><i><\/i><\/p>\n<p><b>App.vue<\/b><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;template&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;h1&gt;Lifecycle Hooks&lt;\/h1&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;button @click=\"this.activeComp = !this.activeComp\"&gt;{{ btnText }}&lt;\/button&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;div&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;comp-one v-if=\"activeComp\"&gt;&lt;\/comp-one&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;\/div&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/template&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;script&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">export default {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0data() {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0return {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0activeComp: true<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0},<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0computed: {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0btnText() {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if(this.activeComp) {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return 'Remove component'<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0else {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return 'Add component'<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/script&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;style scoped&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0div {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0border: dashed black 1px;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0border-radius: 10px;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0padding: 20px;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0margin: 10px;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0width: 400px;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0background-color: lightgreen;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/style&gt;<\/span><\/pre>\n<p><b>CompOne.vue<\/b><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;template&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;h2&gt;Component&lt;\/h2&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;p&gt;When this component is removed from the DOM tree, the unmounted() function is called and we can add code to that function. In this example we create an alert popup box when this component is removed.&lt;\/p&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/template&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;script&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">export default {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0unmounted() {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alert(\"The component is removed (unmounted)!\");<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/script&gt;<\/span><\/pre>\n<p><b>main.js<\/b><\/p>\n<pre><span style=\"font-weight: 400;\">import { createApp } from 'vue'<\/span>\r\n\r\n<span style=\"font-weight: 400;\">import App from '.\/App.vue'<\/span>\r\n\r\n<span style=\"font-weight: 400;\">import CompOne from '.\/components\/CompOne.vue'<\/span>\r\n\r\n<span style=\"font-weight: 400;\">const app = createApp(App)<\/span>\r\n\r\n<span style=\"font-weight: 400;\">app.component('comp-one', CompOne)<\/span>\r\n\r\n<span style=\"font-weight: 400;\">app.mount('#app')<\/span><\/pre>\n<p><a href=\"https:\/\/prnt.sc\/gOohmPaE_czu\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">\u1ea2nh minh ho\u1ea1 1<\/span><\/a><span style=\"font-weight: 400;\"> \u2192 <\/span><a href=\"https:\/\/prnt.sc\/8AWLaE9a5Dkp\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">\u1ea2nh minh ho\u1ea1 2<\/span><\/a><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Cac_lifecycle_hook_Vuejs_dac_biet\"><\/span><b>C\u00e1c lifecycle hook Vuejs \u0111\u1eb7c bi\u1ec7t<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><b>errorCaptured<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Hook v\u00f2ng \u0111\u1eddi errorCaptured \u0111\u01b0\u1ee3c g\u1ecdi khi c\u00f3 l\u1ed7i x\u1ea3y ra trong m\u1ed9t component con ho\u1eb7c component con ch\u00e1u. Hook n\u00e0y c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 x\u1eed l\u00fd l\u1ed7i, ghi nh\u1eadt k\u00fd, ho\u1eb7c hi\u1ec3n th\u1ecb l\u1ed7i cho ng\u01b0\u1eddi d\u00f9ng.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Khi s\u1eed d\u1ee5ng hook errorCaptured, l\u01b0u \u00fd kh\u00f4ng k\u00edch ho\u1ea1t vi\u1ec7c render l\u1ea1i component n\u01a1i l\u1ed7i xu\u1ea5t ph\u00e1t, v\u00ec\u00a0 \u00f3 th\u1ec3 d\u1eabn \u0111\u1ebfn v\u00f2ng l\u1eb7p v\u00f4 h\u1ea1n. Th\u00f4ng tin v\u1ec1 l\u1ed7i \u0111\u01b0\u1ee3c cung c\u1ea5p qua ba tham s\u1ed1 trong h\u00e0m errorCaptured() g\u1ed3m: L\u1ed7i x\u1ea3y ra; Component k\u00edch ho\u1ea1t l\u1ed7i; Lo\u1ea1i ngu\u1ed3n c\u1ee7a l\u1ed7i.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">H\u00e0nh vi m\u1eb7c \u0111\u1ecbnh khi l\u1ed7i x\u1ea3y ra l\u00e0 l\u1ed7i s\u1ebd lan truy\u1ec1n, ho\u1eb7c &#8220;bong b\u00f3ng l\u00ean&#8221;, t\u1eeb component g\u00e2y ra l\u1ed7i. M\u1ed9t l\u1ed7i trong component s\u1ebd truy\u1ec1n l\u00ean component cha, v\u00e0 ti\u1ebfp t\u1ee5c truy\u1ec1n l\u00ean c\u00e1c c\u1ea5p cao h\u01a1n, cu\u1ed1i c\u00f9ng hi\u1ec3n th\u1ecb d\u01b0\u1edbi d\u1ea1ng th\u00f4ng b\u00e1o l\u1ed7i trong b\u1ea3ng \u0111i\u1ec1u khi\u1ec3n (console). B\u1eb1ng c\u00e1ch tr\u1ea3 v\u1ec1 false trong h\u00e0m errorCaptured(), l\u1ed7i s\u1ebd kh\u00f4ng truy\u1ec1n l\u00ean component cha (ng\u1eebng lan truy\u1ec1n) v\u00e0 c\u0169ng kh\u00f4ng xu\u1ea5t hi\u1ec7n d\u01b0\u1edbi d\u1ea1ng th\u00f4ng b\u00e1o l\u1ed7i trong b\u1ea3ng \u0111i\u1ec1u khi\u1ec3n.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Vi\u1ec7c x\u1eed l\u00fd l\u1ed7i c\u0169ng c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c thi\u1ebft l\u1eadp th\u00f4ng qua h\u00e0m app.config.errorHandler.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5: S\u1eed d\u1ee5ng hook v\u00f2ng \u0111\u1eddi errorCaptured \u0111\u1ec3 ph\u00e1t hi\u1ec7n l\u1ed7i t\u1eeb th\u00e0nh ph\u1ea7n con v\u00e0 t\u1ea1o c\u1ea3nh b\u00e1o cho ng\u01b0\u1eddi d\u00f9ng.<\/span><\/p>\n<p><b>App.vue<\/b><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;template&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;h1&gt;The 'errorCaptured' Lifecycle Hook&lt;\/h1&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;p&gt;Whenever there is an error in a child component, the errorCaptured() function is called on the parent.&lt;\/p&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;p&gt;When the button inside the component is clicked, a method will run that tries to do changes to a $refs object that does not exist. This creates an error in the component that triggers the 'errorCaptured' lifecycle hook in the parent, and an alert box is displayed with information about the error.&lt;\/p&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;p&gt;After clicking \"Ok\" in the alert box you can see the error in the browser console.&lt;\/p&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;div&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;comp-one&gt;&lt;\/comp-one&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;\/div&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/template&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;script&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">export default {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0errorCaptured() {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0alert(\"An error occurred\");<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/script&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;style&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">#app &gt; div {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0border: dashed black 1px;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0border-radius: 10px;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0padding: 10px;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0margin-top: 10px;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0background-color: lightgreen;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/style&gt;<\/span><\/pre>\n<p><b>CompOne.vue<\/b><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;template&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;h2&gt;Component&lt;\/h2&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;p&gt;This is the component&lt;\/p&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;button @click=\"generateError\"&gt;Generate Error&lt;\/button&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/template&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;script&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">export default {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0methods: {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0generateError() {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.$refs.objEl.innerHTML = \"hi\";<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/script&gt;<\/span><\/pre>\n<p><b>main.js<\/b><\/p>\n<pre><span style=\"font-weight: 400;\">import { createApp } from 'vue'<\/span>\r\n\r\n<span style=\"font-weight: 400;\">import App from '.\/App.vue'<\/span>\r\n\r\n<span style=\"font-weight: 400;\">import CompOne from '.\/components\/CompOne.vue'<\/span>\r\n\r\n<span style=\"font-weight: 400;\">const app = createApp(App)<\/span>\r\n\r\n<span style=\"font-weight: 400;\">app.component('comp-one', CompOne)<\/span>\r\n\r\n<span style=\"font-weight: 400;\">app.mount('#app')<\/span><\/pre>\n<p><a href=\"https:\/\/prnt.sc\/LU_E1hU_3fHG\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">\u1ea2nh minh ho\u1ea1<\/span><\/a><span style=\"font-weight: 400;\">\u00a0<\/span><\/p>\n<h3><b>renderTracked<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Hook <\/span><b>renderTracked<\/b><span style=\"font-weight: 400;\"> \u0111\u01b0\u1ee3c ch\u1ea1y khi m\u1ed9t h\u00e0m render \u0111\u01b0\u1ee3c thi\u1ebft l\u1eadp \u0111\u1ec3 theo d\u00f5i ho\u1eb7c gi\u00e1m s\u00e1t m\u1ed9t component ph\u1ea3n \u1ee9ng. (Component ph\u1ea3n \u1ee9ng l\u00e0 component c\u00f3 th\u1ec3 thay \u0111\u1ed5i). Hook <\/span><b>renderTracked<\/b><span style=\"font-weight: 400;\"> \u0111\u01b0\u1ee3c d\u00f9ng \u0111\u1ec3 h\u1ed7 tr\u1ee3 qu\u00e1 tr\u00ecnh g\u1ee1 l\u1ed7i v\u00e0 ch\u1ec9 kh\u1ea3 d\u1ee5ng \u1edf ch\u1ebf \u0111\u1ed9 ph\u00e1t tri\u1ec3n (development mode).<\/span><\/p>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5: S\u1eed d\u1ee5ng hook v\u00f2ng \u0111\u1eddi renderTracked \u0111\u1ec3 t\u1ea1o c\u1ea3nh b\u00e1o khi th\u00e0nh ph\u1ea7n ph\u1ea3n \u1ee9ng \u0111\u01b0\u1ee3c kh\u1edfi t\u1ea1o.<\/span><i><\/i><\/p>\n<p><b>App.vue<\/b><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;template&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;h1&gt;The 'renderTracked' Lifecycle Hook&lt;\/h1&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;p&gt;The 'renderTracked' lifecycle hook is used for debugging.&lt;\/p&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;p&gt;&lt;mark&gt;This example only works in development mode, so to see the hook run, you must copy this code and run it on you own computer in development mode.&lt;\/mark&gt;&lt;\/p&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;div&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;comp-one&gt;&lt;\/comp-one&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;\/div&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/template&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;style scoped&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0div {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0border: dashed black 1px;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0border-radius: 10px;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0padding: 20px;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0margin-top: 10px;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0background-color: lightgreen;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/style&gt;\u00a0<\/span><\/pre>\n<p><b>main.js<\/b><\/p>\n<pre><span style=\"font-weight: 400;\">import { createApp } from 'vue'<\/span>\r\n\r\n<span style=\"font-weight: 400;\">import App from '.\/App.vue'<\/span>\r\n\r\n<span style=\"font-weight: 400;\">import CompOne from '.\/components\/CompOne.vue'<\/span>\r\n\r\n<span style=\"font-weight: 400;\">const app = createApp(App)<\/span>\r\n\r\n<span style=\"font-weight: 400;\">app.component('comp-one', CompOne)<\/span>\r\n\r\n<span style=\"font-weight: 400;\">app.mount('#app')<\/span><\/pre>\n<p><a href=\"https:\/\/prnt.sc\/ribIaBbD9_7M\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">\u1ea2nh minh ho\u1ea1 1<\/span><\/a><span style=\"font-weight: 400;\"> \u2192 <\/span><a href=\"https:\/\/prnt.sc\/IfFkZiITf1vU\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">\u1ea2nh minh ho\u1ea1 2<\/span><\/a><\/p>\n<h3><b>renderTriggered<\/b><i><\/i><\/h3>\n<p><span style=\"font-weight: 400;\">Hook v\u00f2ng \u0111\u1eddi <\/span><b>renderTriggered<\/b><span style=\"font-weight: 400;\"> \u0111\u01b0\u1ee3c ch\u1ea1y khi m\u1ed9t component ph\u1ea3n \u1ee9ng \u0111\u01b0\u1ee3c theo d\u00f5i c\u00f3 s\u1ef1 thay \u0111\u1ed5i, t\u1eeb \u0111\u00f3 k\u00edch ho\u1ea1t m\u1ed9t l\u1ea7n render m\u1edbi, gi\u00fap m\u00e0n h\u00ecnh c\u1eadp nh\u1eadt v\u1edbi c\u00e1c thay \u0111\u1ed5i m\u1edbi nh\u1ea5t.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Hook <\/span><b>renderTriggered<\/b><span style=\"font-weight: 400;\"> \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf \u0111\u1ec3 s\u1eed d\u1ee5ng trong qu\u00e1 tr\u00ecnh g\u1ee1 l\u1ed7i v\u00e0 ch\u1ec9 kh\u1ea3 d\u1ee5ng \u1edf ch\u1ebf \u0111\u1ed9 ph\u00e1t tri\u1ec3n (development mode).<\/span><\/p>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5: S\u1eed d\u1ee5ng hook v\u00f2ng \u0111\u1eddi renderTriggered \u0111\u1ec3 hi\u1ec3n th\u1ecb c\u1ea3nh b\u00e1o m\u1ed7i khi qu\u00e1 tr\u00ecnh k\u1ebft xu\u1ea5t \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t.<\/span><\/p>\n<p><b>App.vue<\/b><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;template&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;h1&gt;The 'renderTriggered' Lifecycle Hook&lt;\/h1&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;p&gt;The 'renderTriggered' lifecycle hook is used for debugging.&lt;\/p&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;p&gt;&lt;mark&gt;This example only works in development mode, so to see the hooks run, you must copy this code and run it on you own computer in development mode, and click the 'Add One' button.&lt;\/mark&gt;&lt;\/p&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;div&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;comp-one&gt;&lt;\/comp-one&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;\/div&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/template&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;style scoped&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0div {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0border: dashed black 1px;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0border-radius: 10px;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0padding: 20px;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0margin-top: 10px;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0background-color: lightgreen;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/style&gt;<\/span><\/pre>\n<p><b>CompOne.vue<\/b><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;template&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;h2&gt;Component One&lt;\/h2&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;p&gt;This is a component.&lt;\/p&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;button @click=\"counter++\"&gt;Add One&lt;\/button&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;p&gt;{{ counter }}&lt;\/p&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/template&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;script&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">export default {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0data() {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0return {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0counter: 0<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0},<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0renderTriggered(evt) {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">console.log(\"renderTriggered: \",evt)<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0alert(\"renderTriggered\");<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/script&gt;<\/span><\/pre>\n<p><b>main.js<\/b><\/p>\n<pre><span style=\"font-weight: 400;\">import { createApp } from 'vue'<\/span>\r\n\r\n<span style=\"font-weight: 400;\">import App from '.\/App.vue'<\/span>\r\n\r\n<span style=\"font-weight: 400;\">import CompOne from '.\/components\/CompOne.vue'<\/span>\r\n\r\n<span style=\"font-weight: 400;\">const app = createApp(App)<\/span>\r\n\r\n<span style=\"font-weight: 400;\">app.component('comp-one', CompOne)<\/span>\r\n\r\n<span style=\"font-weight: 400;\">app.mount('#app')<\/span><\/pre>\n<p><a href=\"https:\/\/prnt.sc\/TD0QZ4RVZW85\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">\u1ea2nh minh ho\u1ea1 1<\/span><\/a><span style=\"font-weight: 400;\"> \u2192 <\/span><a href=\"https:\/\/prnt.sc\/QVnJ0nZ17RRP\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">\u1ea2nh minh ho\u1ea1 2<\/span><\/a><\/p>\n<h3><b>Activated<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Hook Activated \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1eb7c bi\u1ec7t cho c\u00e1c component trong template keep-alive. N\u00f3 r\u1ea5t h\u1eefu \u00edch cho c\u00e1c nh\u00e0 ph\u00e1t tri\u1ec3n \u0111\u1ec3 gi\u1eef nguy\u00ean tr\u1ea1ng th\u00e1i c\u1ee7a m\u1ed9t component ngay c\u1ea3 sau khi chuy\u1ec3n sang m\u1ed9t component kh\u00e1c. M\u1ed7i khi template keep-alive \u0111\u01b0\u1ee3c chuy\u1ec3n \u0111\u1ed5i v\u1edbi m\u1ed9t component, c\u00e1c hook activated v\u00e0 deactivated \u0111\u01b0\u1ee3c b\u1eadt.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5: S\u1eed d\u1ee5ng hook v\u00f2ng \u0111\u1eddi <\/span><b>activated<\/b><span style=\"font-weight: 400;\"> \u0111\u1ec3 ghi l\u1ea1i m\u1ed7i khi hook <\/span><b>activated<\/b><span style=\"font-weight: 400;\"> \u0111\u01b0\u1ee3c g\u1ecdi.<\/span><i><\/i><\/p>\n<p><b>App.vue<\/b><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;template&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;h1&gt;The 'activated' Lifecycle Hook&lt;\/h1&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;p&gt;In this example for the 'activated' hook we check if the component is cached properly with &amp;lt;KeepAlive&amp;gt;.&lt;\/p&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;p&gt;If the component is cached properly with &amp;lt;KeepAlive&amp;gt; we expect the 'mounted' hook to run once the first time the component is included (must be added to the DOM the first time), and we expect the 'activated' hook to run every time the component is included (also the first time).&lt;\/p&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;button @click=\"this.activeComp = !this.activeComp\"&gt;Include component&lt;\/button&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;div&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;KeepAlive&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;comp-one v-if=\"activeComp\"&gt;&lt;\/comp-one&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;\/KeepAlive&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;\/div&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/template&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;script&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">export default {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0data() {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0return {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0activeComp: false<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/script&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;style scoped&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0div {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0border: dashed black 1px;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0border-radius: 10px;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0padding: 20px;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0margin-top: 10px;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0background-color: lightgreen;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/style&gt;<\/span><\/pre>\n<p><b>CompOne.vue<\/b><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;template&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;h2&gt;Component&lt;\/h2&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;p&gt;Below is a log with every time the 'mounted' or 'activated' hooks run.&lt;\/p&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;ol ref=\"olEl\"&gt;&lt;\/ol&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;p&gt;You can also see when these hooks run in the console.&lt;\/p&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/template&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;script&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">export default {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0mounted() {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0console.log(\"mounted\");<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0const liEl = document.createElement(\"li\");<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0liEl.innerHTML = \"mounted\"; this.$refs.olEl.appendChild(liEl);<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0},<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0activated() {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0console.log(\"activated\");<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0const liEl = document.createElement(\"li\");<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0liEl.innerHTML = \"activated\";<\/span>\r\n\r\n<span style=\"font-weight: 400;\">this.$refs.olEl.appendChild(liEl);<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/script&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;style&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0li {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0background-color: lightcoral;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0width: 5em;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/style&gt;<\/span><\/pre>\n<p><b>main.js<\/b><\/p>\n<pre><span style=\"font-weight: 400;\">import { createApp } from 'vue'<\/span>\r\n\r\n<span style=\"font-weight: 400;\">import App from '.\/App.vue'<\/span>\r\n\r\n<span style=\"font-weight: 400;\">import CompOne from '.\/components\/CompOne.vue'<\/span>\r\n\r\n<span style=\"font-weight: 400;\">const app = createApp(App)<\/span>\r\n\r\n<span style=\"font-weight: 400;\">app.component('comp-one', CompOne)<\/span>\r\n\r\n<span style=\"font-weight: 400;\">app.mount('#app')<\/span><\/pre>\n<p><a href=\"https:\/\/prnt.sc\/TZ06ugOhJc5J\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">\u1ea2nh minh ho\u1ea1 1<\/span><\/a><span style=\"font-weight: 400;\"> \u2192 <\/span><a href=\"https:\/\/prnt.sc\/VybTqC9mX-95\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">\u1ea2nh minh ho\u1ea1 2<\/span><\/a><\/p>\n<h3><b>Deactivated<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Nh\u01b0 \u0111\u00e3 gi\u1ea3i th\u00edch trong hook tr\u01b0\u1edbc, hook deactivated c\u0169ng \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 gi\u1eef cho c\u00e1c component c\u1ee7a template \u0111\u00f3 ho\u1ea1t \u0111\u1ed9ng. Hook n\u00e0y \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 x\u00e1c \u0111\u1ecbnh khi n\u00e0o m\u1ed9t component c\u1ee7a template n\u00e0y b\u1ecb t\u1eaft.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5: S\u1eed d\u1ee5ng hook v\u00f2ng \u0111\u1eddi <\/span><b>deactivated<\/b><span style=\"font-weight: 400;\"> \u0111\u1ec3 ghi l\u1ea1i m\u1ed7i l\u1ea7n hook <\/span><b>deactivated<\/b><span style=\"font-weight: 400;\"> \u0111\u01b0\u1ee3c g\u1ecdi.<\/span><i><\/i><\/p>\n<p><b>App.vue<\/b><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;template&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;h1&gt;The 'deactivated' Lifecycle Hook&lt;\/h1&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;p&gt;Using the 'deactivated' hook to log when the 'deactivated' hook is called.&lt;\/p&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;button @click=\"this.activeComp = !this.activeComp\"&gt;Include component&lt;\/button&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;div&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;KeepAlive&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;comp-one v-if=\"activeComp\"&gt;&lt;\/comp-one&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;\/KeepAlive&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;\/div&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/template&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;script&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">export default {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0data() {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0return {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0activeComp: false<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/script&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;style scoped&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0div {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0border: dashed black 1px;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0border-radius: 10px;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0padding: 20px;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0margin-top: 10px;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0background-color: lightgreen;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/style&gt;<\/span><\/pre>\n<p><b>CompOne.vue<\/b><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;template&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;h2&gt;Component&lt;\/h2&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;p&gt;Below is a log with every time the 'deactivated' hook runs.&lt;\/p&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;ol&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;li v-for=\"x in hookLog\"&gt;{{ x }}&lt;\/li&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;\/ol&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;p&gt;You can also see when the 'deactivated' hook runs in the console.&lt;\/p&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/template&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;script&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">export default {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0data() {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0return {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0hookLog: []<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0},<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0deactivated() {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0console.log(\"deactivated\")<\/span>\r\n\r\n<span style=\"font-weight: 400;\">this.hookLog.push(\"deactivated\");<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/script&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;style&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0li {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0background-color: lightcoral;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0width: 5em;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/style&gt;<\/span><\/pre>\n<p><b>main.js<\/b><\/p>\n<pre><span style=\"font-weight: 400;\">import { createApp } from 'vue'<\/span>\r\n\r\n<span style=\"font-weight: 400;\">import App from '.\/App.vue'<\/span>\r\n\r\n<span style=\"font-weight: 400;\">import CompOne from '.\/components\/CompOne.vue'<\/span>\r\n\r\n<span style=\"font-weight: 400;\">const app = createApp(App)<\/span>\r\n\r\n<span style=\"font-weight: 400;\">app.component('comp-one', CompOne)<\/span>\r\n\r\n<span style=\"font-weight: 400;\">app.mount('#app')<\/span><\/pre>\n<p><a href=\"https:\/\/prnt.sc\/Ow5IdAAXtvEK\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">\u1ea2nh minh ho\u1ea1 1<\/span><\/a><span style=\"font-weight: 400;\"> \u2192 <\/span><a href=\"https:\/\/prnt.sc\/3Sb1CbNnAdLm\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">\u1ea2nh minh ho\u1ea1 2<\/span><\/a><\/p>\n<h3><b>serverPrefetch<\/b><i><\/i><\/h3>\n<p><span style=\"font-weight: 400;\">Hook v\u00f2ng \u0111\u1eddi <\/span><b>serverPrefetch<\/b><span style=\"font-weight: 400;\"> ch\u1ec9 x\u1ea3y ra trong qu\u00e1 tr\u00ecnh render ph\u00eda server (SSR). Ch\u00fang th\u01b0\u1eddng \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 l\u1ea5y d\u1eef li\u1ec7u, trong tr\u01b0\u1eddng h\u1ee3p c\u1ea7n th\u1ef1c hi\u1ec7n vi\u1ec7c n\u00e0y \u1edf ph\u00eda server.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Hook <\/span><b>serverPrefetch<\/b><span style=\"font-weight: 400;\"> ho\u1ea1t \u0111\u1ed9ng nh\u01b0 m\u1ed9t h\u00e0m b\u1ea5t \u0111\u1ed3ng b\u1ed9 (asynchronous function), do \u0111\u00f3 n\u1ebfu n\u00f3 tr\u1ea3 v\u1ec1 m\u1ed9t promise, server s\u1ebd ch\u1edd cho \u0111\u1ebfn khi promise \u0111\u01b0\u1ee3c gi\u1ea3i quy\u1ebft tr\u01b0\u1edbc khi ti\u1ebfn h\u00e0nh render component.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">export default {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0data() {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0return {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0data: null,<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0};<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0},<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0async serverPrefetch() {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0const response = await fetch(\"https:\/\/random-data-api.com\/api\/v2\/users\");\u00a0<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0this.data = await response.json();<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">};<\/span><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Cac_cau_hoi_thuong_gap_ve_lifecycle_VueJS\"><\/span><b>C\u00e1c c\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 lifecycle VueJS<\/b><i><\/i><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><b>Khi n\u00e0o n\u00ean s\u1eed d\u1ee5ng lifecycle hook?<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Lifecycle hook l\u00e0 m\u1ed9t c\u00f4ng c\u1ee5 m\u1ea1nh m\u1ebd \u0111\u1ec3 th\u00eam h\u00e0nh vi t\u00f9y ch\u1ec9nh v\u00e0o c\u00e1c instance ho\u1eb7c component Vue t\u1ea1i c\u00e1c giai \u0111o\u1ea1n kh\u00e1c nhau trong v\u00f2ng \u0111\u1eddi c\u1ee7a ch\u00fang. Ch\u00fang \u0111\u1eb7c bi\u1ec7t h\u1eefu \u00edch cho nh\u1eefng vi\u1ec7c nh\u01b0 l\u1ea5y d\u1eef li\u1ec7u t\u1eeb API, d\u1ecdn d\u1eb9p tr\u01b0\u1edbc khi m\u1ed9t component b\u1ecb h\u1ee7y, ph\u1ea3n \u1ee9ng v\u1edbi c\u00e1c thay \u0111\u1ed5i trong props ho\u1eb7c d\u1eef li\u1ec7u.<\/span><\/p>\n<h3><b>T\u00f4i c\u00f3 th\u1ec3 t\u00ecm hi\u1ec3u th\u00eam v\u1ec1 lifecycle VueJS \u1edf \u0111\u00e2u?\u00a0<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">B\u1ea1n c\u00f3 th\u1ec3 t\u00ecm hi\u1ec3u th\u00eam v\u1ec1 lifecycle hook Vuejs t\u1ea1i c\u00e1c ngu\u1ed3n t\u00e0i li\u1ec7u ch\u00ednh th\u1ee9c c\u1ee7a nh\u00e0 ph\u00e1t h\u00e0nh ch\u1eb3ng h\u1ea1n <a href=\"https:\/\/vuejs.org\/guide\/essentials\/lifecycle.html\" target=\"_blank\" rel=\"noopener\"><strong>Document ch\u00ednh th\u1ee9c t\u1eeb VueJS v\u1ec1 Hooks<\/strong><\/a> <\/span><span style=\"font-weight: 400;\">v\u00e0 <a href=\"https:\/\/vuejs.org\/api\/options-lifecycle.html\" target=\"_blank\" rel=\"noopener\"><strong>Document ch\u00ednh th\u1ee9c t\u1eeb VueJs v\u1ec1 Options: Lifecycle<\/strong><\/a>.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Tong_ket_lifecycle_VueJS\"><\/span><b>T\u1ed5ng k\u1ebft lifecycle VueJS<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Vuejs s\u1ebd h\u1ed7 tr\u1ee3 b\u1ea1n r\u1ea5t nhi\u1ec1u trong h\u00e0nh tr\u00ecnh tr\u1edf th\u00e0nh l\u1eadp tr\u00ecnh vi\u00ean gi\u1ecfi. B\u00ean c\u1ea1nh vi\u1ec7c hi\u1ec3u r\u00f5 v\u1ec1 \u201cVuejs tutorial\u201d trong b\u00e0i vi\u1ebft tr\u01b0\u1edbc, n\u1eafm b\u1eaft v\u00e0 s\u1eed d\u1ee5ng th\u00e0nh th\u1ea1o \u201clifecycle Vuejs\u201d c\u0169ng mang l\u1ea1i l\u1ee3i \u00edch l\u1edbn. Gi\u1edd \u0111\u00e2y, b\u1ea1n c\u00f3 th\u1ec3 h\u00ecnh dung quy tr\u00ecnh l\u00e0m vi\u1ec7c t\u1ed1t h\u01a1n v\u00e0 kh\u1edfi t\u1ea1o c\u00e1c component theo th\u1eddi gian v\u00e0 c\u00e1ch th\u1ee9c m\u00e0 m\u00ecnh mong mu\u1ed1n.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Trong qu\u00e1 tr\u00ecnh ph\u00e1t tri\u1ec3n \u1ee9ng d\u1ee5ng, vi\u1ec7c hi\u1ec3u r\u00f5 v\u1ec1 v\u00f2ng \u0111\u1eddi c\u1ee7a m\u1ed9t component l\u00e0 \u0111i\u1ec1u v\u00f4 c\u00f9ng quan tr\u1ecdng. Vue.js l\u00e0 m\u1ed9t trong nh\u1eefng framework JavaScript cung c\u1ea5p cho l\u1eadp tr\u00ecnh vi\u00ean h\u1ec7 th\u1ed1ng lifecycle hooks phong ph\u00fa \u0111\u1ec3 qu\u1ea3n l\u00fd v\u00e0 ki\u1ec3m so\u00e1t c\u00e1ch m\u00e0 c\u00e1c component \u0111\u01b0\u1ee3c kh\u1edfi t\u1ea1o, c\u1eadp [&hellip;]<\/p>\n","protected":false},"author":213,"featured_media":80294,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_gspb_post_css":"","footnotes":""},"categories":[109],"tags":[],"class_list":["post-80190","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-chuyen-mon-it"],"blocksy_meta":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.8 (Yoast SEO v27.8) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Lifecycle VueJS: Chi ti\u1ebft c\u00e1ch d\u00f9ng Lifecycle Hooks trong VueJS - ITviec Blog<\/title>\n<meta name=\"description\" content=\"Vue.js l\u00e0 m\u1ed9t framework JavaScript cung c\u1ea5p h\u1ec7 th\u1ed1ng lifecycle hooks phong ph\u00fa. T\u00ecm hi\u1ec3u chi ti\u1ebft v\u1ec1 lifecycle Vuejs trong b\u00e0i vi\u1ebft n\u00e0y.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/itviec.com\/blog\/lifecycle-vuejs-la-gi\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Lifecycle VueJS: Chi ti\u1ebft c\u00e1ch d\u00f9ng Lifecycle Hooks trong VueJS\" \/>\n<meta property=\"og:description\" content=\"Trong qu\u00e1 tr\u00ecnh ph\u00e1t tri\u1ec3n \u1ee9ng d\u1ee5ng, vi\u1ec7c hi\u1ec3u r\u00f5 v\u1ec1 v\u00f2ng \u0111\u1eddi c\u1ee7a m\u1ed9t component l\u00e0 \u0111i\u1ec1u v\u00f4 c\u00f9ng quan tr\u1ecdng. Vue.js l\u00e0 m\u1ed9t trong nh\u1eefng framework JavaScript\" \/>\n<meta property=\"og:url\" content=\"https:\/\/itviec.com\/blog\/lifecycle-vuejs-la-gi\/\" \/>\n<meta property=\"og:site_name\" content=\"ITviec Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ITviec\" \/>\n<meta property=\"article:published_time\" content=\"2024-10-21T06:06:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/10\/lifecycle-vuejs-vippro.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1500\" \/>\n\t<meta property=\"og:image:height\" content=\"790\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Linh Trao\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ITviec\" \/>\n<meta name=\"twitter:site\" content=\"@ITviec\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Linh Trao\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 ph\u00fat\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Lifecycle VueJS: Chi ti\u1ebft c\u00e1ch d\u00f9ng Lifecycle Hooks trong VueJS - ITviec Blog","description":"Vue.js l\u00e0 m\u1ed9t framework JavaScript cung c\u1ea5p h\u1ec7 th\u1ed1ng lifecycle hooks phong ph\u00fa. T\u00ecm hi\u1ec3u chi ti\u1ebft v\u1ec1 lifecycle Vuejs trong b\u00e0i vi\u1ebft n\u00e0y.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/itviec.com\/blog\/lifecycle-vuejs-la-gi\/","og_locale":"vi_VN","og_type":"article","og_title":"Lifecycle VueJS: Chi ti\u1ebft c\u00e1ch d\u00f9ng Lifecycle Hooks trong VueJS","og_description":"Trong qu\u00e1 tr\u00ecnh ph\u00e1t tri\u1ec3n \u1ee9ng d\u1ee5ng, vi\u1ec7c hi\u1ec3u r\u00f5 v\u1ec1 v\u00f2ng \u0111\u1eddi c\u1ee7a m\u1ed9t component l\u00e0 \u0111i\u1ec1u v\u00f4 c\u00f9ng quan tr\u1ecdng. Vue.js l\u00e0 m\u1ed9t trong nh\u1eefng framework JavaScript","og_url":"https:\/\/itviec.com\/blog\/lifecycle-vuejs-la-gi\/","og_site_name":"ITviec Blog","article_publisher":"https:\/\/www.facebook.com\/ITviec","article_published_time":"2024-10-21T06:06:41+00:00","og_image":[{"width":1500,"height":790,"url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/10\/lifecycle-vuejs-vippro.jpg","type":"image\/jpeg"}],"author":"Linh Trao","twitter_card":"summary_large_image","twitter_creator":"@ITviec","twitter_site":"@ITviec","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Linh Trao","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"15 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/itviec.com\/blog\/lifecycle-vuejs-la-gi\/#article","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/lifecycle-vuejs-la-gi\/"},"author":{"name":"Linh Trao","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/6d1bcbfa05475cbc5a2eaf0727501a16"},"headline":"Lifecycle VueJS: Chi ti\u1ebft c\u00e1ch d\u00f9ng Lifecycle Hooks trong VueJS","datePublished":"2024-10-21T06:06:41+00:00","mainEntityOfPage":{"@id":"https:\/\/itviec.com\/blog\/lifecycle-vuejs-la-gi\/"},"wordCount":3798,"publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"image":{"@id":"https:\/\/itviec.com\/blog\/lifecycle-vuejs-la-gi\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/10\/lifecycle-vuejs-vippro.jpg","articleSection":["Chuy\u00ean m\u00f4n IT"],"inLanguage":"vi"},{"@type":"WebPage","@id":"https:\/\/itviec.com\/blog\/lifecycle-vuejs-la-gi\/","url":"https:\/\/itviec.com\/blog\/lifecycle-vuejs-la-gi\/","name":"Lifecycle VueJS: Chi ti\u1ebft c\u00e1ch d\u00f9ng Lifecycle Hooks trong VueJS - ITviec Blog","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/itviec.com\/blog\/lifecycle-vuejs-la-gi\/#primaryimage"},"image":{"@id":"https:\/\/itviec.com\/blog\/lifecycle-vuejs-la-gi\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/10\/lifecycle-vuejs-vippro.jpg","datePublished":"2024-10-21T06:06:41+00:00","description":"Vue.js l\u00e0 m\u1ed9t framework JavaScript cung c\u1ea5p h\u1ec7 th\u1ed1ng lifecycle hooks phong ph\u00fa. T\u00ecm hi\u1ec3u chi ti\u1ebft v\u1ec1 lifecycle Vuejs trong b\u00e0i vi\u1ebft n\u00e0y.","breadcrumb":{"@id":"https:\/\/itviec.com\/blog\/lifecycle-vuejs-la-gi\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/itviec.com\/blog\/lifecycle-vuejs-la-gi\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/lifecycle-vuejs-la-gi\/#primaryimage","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/10\/lifecycle-vuejs-vippro.jpg","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/10\/lifecycle-vuejs-vippro.jpg","width":1500,"height":790,"caption":"lifecycle vuejs - hooks - itviec blog"},{"@type":"BreadcrumbList","@id":"https:\/\/itviec.com\/blog\/lifecycle-vuejs-la-gi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Chuy\u00ean m\u00f4n IT","item":"https:\/\/itviec.com\/blog\/chuyen-mon-it\/"},{"@type":"ListItem","position":2,"name":"Lifecycle VueJS: Chi ti\u1ebft c\u00e1ch d\u00f9ng Lifecycle Hooks trong VueJS"}]},{"@type":"WebSite","@id":"https:\/\/itviec.com\/blog\/#website","url":"https:\/\/itviec.com\/blog\/","name":"ITviec Blog","description":"IT Jobs &amp; People in Vietnam","publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/itviec.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"vi"},{"@type":"Organization","@id":"https:\/\/itviec.com\/blog\/#organization","name":"ITviec","url":"https:\/\/itviec.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","width":1800,"height":1800,"caption":"ITviec"},"image":{"@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/ITviec","https:\/\/x.com\/ITviec","https:\/\/www.linkedin.com\/company\/itviec","https:\/\/www.youtube.com\/channel\/UCYthAQ3bcGr57M_ag5gHDvQ"]},{"@type":"Person","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/6d1bcbfa05475cbc5a2eaf0727501a16","name":"Linh Trao","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/trao-thi-tung-linh-author-e1709892478113-100x100.jpg","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/trao-thi-tung-linh-author-e1709892478113-100x100.jpg","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/trao-thi-tung-linh-author-e1709892478113-100x100.jpg","caption":"Linh Trao"},"url":"https:\/\/itviec.com\/blog\/author\/linh-trao\/"}]}},"_links":{"self":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/80190","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/users\/213"}],"replies":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/comments?post=80190"}],"version-history":[{"count":0,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/80190\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media\/80294"}],"wp:attachment":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media?parent=80190"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/categories?post=80190"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/tags?post=80190"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}