[{"data":1,"prerenderedAt":1940},["ShallowReactive",2],{"page-\u002Fvue\u002Fvue父子组件生命周期":3},{"id":4,"title":5,"body":6,"description":1933,"extension":1934,"meta":1935,"navigation":170,"path":1936,"seo":1937,"stem":1938,"__hash__":1939},"content\u002FVue\u002FVue父子组件生命周期.md","Vue父子组件生命周期",{"type":7,"value":8,"toc":1913},"minimark",[9,13,57,61,65,77,87,90,98,104,107,119,125,128,1083,1086,1103,1106,1129,1213,1215,1248,1322,1325,1338,1412,1414,1442,1514,1517,1533,1611,1613,1628,1704,1707,1716,1793,1795,1815,1891,1894,1900,1903,1909],[10,11,5],"h1",{"id":12},"vue父子组件生命周期",[14,15,16,20,21,24,25,27,28,30,31,34,35,34,38,34,41,34,44,34,47,34,50,34,53,56],"p",{},[17,18,19],"code",{},"Vue","实例需要经过创建、初始化数据、编译模板、挂载",[17,22,23],{},"DOM","、渲染、更新、渲染、卸载等一系列过程，这个过程就是",[17,26,19],{},"的生命周期，",[17,29,19],{},"中提供的钩子函数有",[17,32,33],{},"beforeCreate","、",[17,36,37],{},"created",[17,39,40],{},"beforeMount",[17,42,43],{},"mounted",[17,45,46],{},"beforeUpdate",[17,48,49],{},"updated",[17,51,52],{},"beforeDestroy",[17,54,55],{},"destroyed","，父子组件嵌套时，父组件和子组件各拥有各自独立的钩子函数。",[58,59,60],"h2",{"id":60},"描述",[62,63,64],"h3",{"id":64},"创建过程",[14,66,67,68,34,70,34,72,34,74,76],{},"创建过程主要涉及",[17,69,33],{},[17,71,37],{},[17,73,40],{},[17,75,43],{},"四个钩子函数。",[78,79,84],"pre",{"className":80,"code":82,"language":83},[81],"language-text","Parent beforeCreate -> Parent Created -> Parent BeforeMount -> Child BeforeCreate -> Child Created -> Child BeforeMount -> Child Mounted -> Parent Mounted\n","text",[17,85,82],{"__ignoreMap":86},"",[62,88,89],{"id":89},"更新过程",[14,91,92,93,34,95,97],{},"更新过程主要涉及",[17,94,46],{},[17,96,49],{},"两个钩子函数，当父子组件有数据传递时才会有生命周期的比较。",[78,99,102],{"className":100,"code":101,"language":83},[81],"Parent BeforeUpdate -> Child BeforeUpdate -> Child Updated -> Parent Updated\n",[17,103,101],{"__ignoreMap":86},[62,105,106],{"id":106},"销毁过程",[14,108,109,110,34,112,114,115,118],{},"销毁过程主要涉及",[17,111,52],{},[17,113,55],{},"两个钩子函数，本例直接调用",[17,116,117],{},"vm.$destroy()","销毁整个实例以达到销毁父子组件的目的。",[78,120,123],{"className":121,"code":122,"language":83},[81],"Parent BeforeDestroy -> Child BeforeDestroy -> Child Destroyed -> Parent Destroyed\n",[17,124,122],{"__ignoreMap":86},[62,126,127],{"id":127},"示例",[78,129,133],{"className":130,"code":131,"language":132,"meta":86,"style":86},"language-html shiki shiki-themes github-light github-dark","\u003C!DOCTYPE html>\n\u003Chtml>\n\n\u003Chead>\n    \u003Ctitle>Vue父子组件生命周期\u003C\u002Ftitle>\n\u003C\u002Fhead>\n\n\u003Cbody>\n    \u003Cdiv id=\"app\">\u003C\u002Fdiv>\n\u003C\u002Fbody>\n\u003Cscript src=\"https:\u002F\u002Fcdn.bootcss.com\u002Fvue\u002F2.4.2\u002Fvue.js\">\u003C\u002Fscript>\n\u003Cscript type=\"text\u002Fjavascript\">\n    Vue.component(\"counter\", {\n        props: {\n            count: { \n                type: Number,\n                default: 0\n            },\n        },\n        beforeCreate: function() {\n            console.log(\"Child\", \"BeforeCreate\");\n        },\n        created: function() {\n            console.log(\"Child\", \"Created\");\n        },\n        beforeMount: function() {\n            console.log(\"Child\", \"BeforeMount\");\n        },\n        mounted: function() {\n            console.log(\"Child\", \"Mounted\");\n        },\n        beforeUpdate: function() {\n            console.log(\"Child\", \"BeforeUpdate\");\n        },\n        updated: function() {\n            console.log(\"Child\", \"Updated\");\n        },\n        beforeDestroy: function() {\n            console.log(\"Child\", \"BeforeDestroy\");\n        },\n        destroyed: function() {\n            console.log(\"Child\", \"Destroyed\");\n        },\n        template: `\n            \u003Cdiv>\n                \u003Cdiv>{{count}}\u003C\u002Fdiv>\n            \u003C\u002Fdiv>\n        `\n    })\n    var vm = new Vue({\n        el: '#app',\n        data: function(){\n            return {\n                count: 1\n            }\n        },\n        beforeCreate: function() {\n            console.log(\"Parent\", \"BeforeCreate\");\n        },\n        created: function() {\n            console.log(\"Parent\", \"Created\");\n        },\n        beforeMount: function() {\n            console.log(\"Parent\", \"BeforeMount\");\n        },\n        mounted: function() {\n            console.log(\"Parent\", \"Mounted\");\n        },\n        beforeUpdate: function() {\n            console.log(\"Parent\", \"BeforeUpdate\");\n        },\n        updated: function() {\n            console.log(\"Parent\", \"Updated\");\n        },\n        beforeDestroy: function() {\n            console.log(\"Parent\", \"BeforeDestroy\");\n        },\n        destroyed: function() {\n            console.log(\"Parent\", \"Destroyed\");\n        },\n        template: `\n            \u003Cdiv>\n                \u003Ccounter :count=\"count\">\u003C\u002Fcounter> \n                \u003Cbutton @click=\"count++\">++\u003C\u002Fbutton>\n            \u003C\u002Fdiv>\n        `\n    })\n\u003C\u002Fscript>\n\n\u003C\u002Fhtml>\n","html",[17,134,135,155,165,172,182,198,208,213,223,248,257,279,296,314,320,326,332,342,348,354,370,393,398,410,428,433,445,463,468,480,498,503,515,533,538,550,568,573,585,603,608,620,638,643,652,658,664,670,676,682,702,714,727,736,745,751,756,767,785,790,801,818,823,834,851,856,867,884,889,900,917,922,933,950,955,966,983,988,999,1016,1021,1028,1033,1039,1045,1050,1055,1060,1069,1074],{"__ignoreMap":86},[136,137,140,144,148,152],"span",{"class":138,"line":139},"line",1,[136,141,143],{"class":142},"sVt8B","\u003C!",[136,145,147],{"class":146},"s9eBZ","DOCTYPE",[136,149,151],{"class":150},"sScJk"," html",[136,153,154],{"class":142},">\n",[136,156,158,161,163],{"class":138,"line":157},2,[136,159,160],{"class":142},"\u003C",[136,162,132],{"class":146},[136,164,154],{"class":142},[136,166,168],{"class":138,"line":167},3,[136,169,171],{"emptyLinePlaceholder":170},true,"\n",[136,173,175,177,180],{"class":138,"line":174},4,[136,176,160],{"class":142},[136,178,179],{"class":146},"head",[136,181,154],{"class":142},[136,183,185,188,191,194,196],{"class":138,"line":184},5,[136,186,187],{"class":142},"    \u003C",[136,189,190],{"class":146},"title",[136,192,193],{"class":142},">Vue父子组件生命周期\u003C\u002F",[136,195,190],{"class":146},[136,197,154],{"class":142},[136,199,201,204,206],{"class":138,"line":200},6,[136,202,203],{"class":142},"\u003C\u002F",[136,205,179],{"class":146},[136,207,154],{"class":142},[136,209,211],{"class":138,"line":210},7,[136,212,171],{"emptyLinePlaceholder":170},[136,214,216,218,221],{"class":138,"line":215},8,[136,217,160],{"class":142},[136,219,220],{"class":146},"body",[136,222,154],{"class":142},[136,224,226,228,231,234,237,241,244,246],{"class":138,"line":225},9,[136,227,187],{"class":142},[136,229,230],{"class":146},"div",[136,232,233],{"class":150}," id",[136,235,236],{"class":142},"=",[136,238,240],{"class":239},"sZZnC","\"app\"",[136,242,243],{"class":142},">\u003C\u002F",[136,245,230],{"class":146},[136,247,154],{"class":142},[136,249,251,253,255],{"class":138,"line":250},10,[136,252,203],{"class":142},[136,254,220],{"class":146},[136,256,154],{"class":142},[136,258,260,262,265,268,270,273,275,277],{"class":138,"line":259},11,[136,261,160],{"class":142},[136,263,264],{"class":146},"script",[136,266,267],{"class":150}," src",[136,269,236],{"class":142},[136,271,272],{"class":239},"\"https:\u002F\u002Fcdn.bootcss.com\u002Fvue\u002F2.4.2\u002Fvue.js\"",[136,274,243],{"class":142},[136,276,264],{"class":146},[136,278,154],{"class":142},[136,280,282,284,286,289,291,294],{"class":138,"line":281},12,[136,283,160],{"class":142},[136,285,264],{"class":146},[136,287,288],{"class":150}," type",[136,290,236],{"class":142},[136,292,293],{"class":239},"\"text\u002Fjavascript\"",[136,295,154],{"class":142},[136,297,299,302,305,308,311],{"class":138,"line":298},13,[136,300,301],{"class":142},"    Vue.",[136,303,304],{"class":150},"component",[136,306,307],{"class":142},"(",[136,309,310],{"class":239},"\"counter\"",[136,312,313],{"class":142},", {\n",[136,315,317],{"class":138,"line":316},14,[136,318,319],{"class":142},"        props: {\n",[136,321,323],{"class":138,"line":322},15,[136,324,325],{"class":142},"            count: { \n",[136,327,329],{"class":138,"line":328},16,[136,330,331],{"class":142},"                type: Number,\n",[136,333,335,338],{"class":138,"line":334},17,[136,336,337],{"class":142},"                default: ",[136,339,341],{"class":340},"sj4cs","0\n",[136,343,345],{"class":138,"line":344},18,[136,346,347],{"class":142},"            },\n",[136,349,351],{"class":138,"line":350},19,[136,352,353],{"class":142},"        },\n",[136,355,357,360,363,367],{"class":138,"line":356},20,[136,358,359],{"class":150},"        beforeCreate",[136,361,362],{"class":142},": ",[136,364,366],{"class":365},"szBVR","function",[136,368,369],{"class":142},"() {\n",[136,371,373,376,379,381,384,387,390],{"class":138,"line":372},21,[136,374,375],{"class":142},"            console.",[136,377,378],{"class":150},"log",[136,380,307],{"class":142},[136,382,383],{"class":239},"\"Child\"",[136,385,386],{"class":142},", ",[136,388,389],{"class":239},"\"BeforeCreate\"",[136,391,392],{"class":142},");\n",[136,394,396],{"class":138,"line":395},22,[136,397,353],{"class":142},[136,399,401,404,406,408],{"class":138,"line":400},23,[136,402,403],{"class":150},"        created",[136,405,362],{"class":142},[136,407,366],{"class":365},[136,409,369],{"class":142},[136,411,413,415,417,419,421,423,426],{"class":138,"line":412},24,[136,414,375],{"class":142},[136,416,378],{"class":150},[136,418,307],{"class":142},[136,420,383],{"class":239},[136,422,386],{"class":142},[136,424,425],{"class":239},"\"Created\"",[136,427,392],{"class":142},[136,429,431],{"class":138,"line":430},25,[136,432,353],{"class":142},[136,434,436,439,441,443],{"class":138,"line":435},26,[136,437,438],{"class":150},"        beforeMount",[136,440,362],{"class":142},[136,442,366],{"class":365},[136,444,369],{"class":142},[136,446,448,450,452,454,456,458,461],{"class":138,"line":447},27,[136,449,375],{"class":142},[136,451,378],{"class":150},[136,453,307],{"class":142},[136,455,383],{"class":239},[136,457,386],{"class":142},[136,459,460],{"class":239},"\"BeforeMount\"",[136,462,392],{"class":142},[136,464,466],{"class":138,"line":465},28,[136,467,353],{"class":142},[136,469,471,474,476,478],{"class":138,"line":470},29,[136,472,473],{"class":150},"        mounted",[136,475,362],{"class":142},[136,477,366],{"class":365},[136,479,369],{"class":142},[136,481,483,485,487,489,491,493,496],{"class":138,"line":482},30,[136,484,375],{"class":142},[136,486,378],{"class":150},[136,488,307],{"class":142},[136,490,383],{"class":239},[136,492,386],{"class":142},[136,494,495],{"class":239},"\"Mounted\"",[136,497,392],{"class":142},[136,499,501],{"class":138,"line":500},31,[136,502,353],{"class":142},[136,504,506,509,511,513],{"class":138,"line":505},32,[136,507,508],{"class":150},"        beforeUpdate",[136,510,362],{"class":142},[136,512,366],{"class":365},[136,514,369],{"class":142},[136,516,518,520,522,524,526,528,531],{"class":138,"line":517},33,[136,519,375],{"class":142},[136,521,378],{"class":150},[136,523,307],{"class":142},[136,525,383],{"class":239},[136,527,386],{"class":142},[136,529,530],{"class":239},"\"BeforeUpdate\"",[136,532,392],{"class":142},[136,534,536],{"class":138,"line":535},34,[136,537,353],{"class":142},[136,539,541,544,546,548],{"class":138,"line":540},35,[136,542,543],{"class":150},"        updated",[136,545,362],{"class":142},[136,547,366],{"class":365},[136,549,369],{"class":142},[136,551,553,555,557,559,561,563,566],{"class":138,"line":552},36,[136,554,375],{"class":142},[136,556,378],{"class":150},[136,558,307],{"class":142},[136,560,383],{"class":239},[136,562,386],{"class":142},[136,564,565],{"class":239},"\"Updated\"",[136,567,392],{"class":142},[136,569,571],{"class":138,"line":570},37,[136,572,353],{"class":142},[136,574,576,579,581,583],{"class":138,"line":575},38,[136,577,578],{"class":150},"        beforeDestroy",[136,580,362],{"class":142},[136,582,366],{"class":365},[136,584,369],{"class":142},[136,586,588,590,592,594,596,598,601],{"class":138,"line":587},39,[136,589,375],{"class":142},[136,591,378],{"class":150},[136,593,307],{"class":142},[136,595,383],{"class":239},[136,597,386],{"class":142},[136,599,600],{"class":239},"\"BeforeDestroy\"",[136,602,392],{"class":142},[136,604,606],{"class":138,"line":605},40,[136,607,353],{"class":142},[136,609,611,614,616,618],{"class":138,"line":610},41,[136,612,613],{"class":150},"        destroyed",[136,615,362],{"class":142},[136,617,366],{"class":365},[136,619,369],{"class":142},[136,621,623,625,627,629,631,633,636],{"class":138,"line":622},42,[136,624,375],{"class":142},[136,626,378],{"class":150},[136,628,307],{"class":142},[136,630,383],{"class":239},[136,632,386],{"class":142},[136,634,635],{"class":239},"\"Destroyed\"",[136,637,392],{"class":142},[136,639,641],{"class":138,"line":640},43,[136,642,353],{"class":142},[136,644,646,649],{"class":138,"line":645},44,[136,647,648],{"class":142},"        template: ",[136,650,651],{"class":239},"`\n",[136,653,655],{"class":138,"line":654},45,[136,656,657],{"class":239},"            \u003Cdiv>\n",[136,659,661],{"class":138,"line":660},46,[136,662,663],{"class":239},"                \u003Cdiv>{{count}}\u003C\u002Fdiv>\n",[136,665,667],{"class":138,"line":666},47,[136,668,669],{"class":239},"            \u003C\u002Fdiv>\n",[136,671,673],{"class":138,"line":672},48,[136,674,675],{"class":239},"        `\n",[136,677,679],{"class":138,"line":678},49,[136,680,681],{"class":142},"    })\n",[136,683,685,688,691,693,696,699],{"class":138,"line":684},50,[136,686,687],{"class":365},"    var",[136,689,690],{"class":142}," vm ",[136,692,236],{"class":365},[136,694,695],{"class":365}," new",[136,697,698],{"class":150}," Vue",[136,700,701],{"class":142},"({\n",[136,703,705,708,711],{"class":138,"line":704},51,[136,706,707],{"class":142},"        el: ",[136,709,710],{"class":239},"'#app'",[136,712,713],{"class":142},",\n",[136,715,717,720,722,724],{"class":138,"line":716},52,[136,718,719],{"class":150},"        data",[136,721,362],{"class":142},[136,723,366],{"class":365},[136,725,726],{"class":142},"(){\n",[136,728,730,733],{"class":138,"line":729},53,[136,731,732],{"class":365},"            return",[136,734,735],{"class":142}," {\n",[136,737,739,742],{"class":138,"line":738},54,[136,740,741],{"class":142},"                count: ",[136,743,744],{"class":340},"1\n",[136,746,748],{"class":138,"line":747},55,[136,749,750],{"class":142},"            }\n",[136,752,754],{"class":138,"line":753},56,[136,755,353],{"class":142},[136,757,759,761,763,765],{"class":138,"line":758},57,[136,760,359],{"class":150},[136,762,362],{"class":142},[136,764,366],{"class":365},[136,766,369],{"class":142},[136,768,770,772,774,776,779,781,783],{"class":138,"line":769},58,[136,771,375],{"class":142},[136,773,378],{"class":150},[136,775,307],{"class":142},[136,777,778],{"class":239},"\"Parent\"",[136,780,386],{"class":142},[136,782,389],{"class":239},[136,784,392],{"class":142},[136,786,788],{"class":138,"line":787},59,[136,789,353],{"class":142},[136,791,793,795,797,799],{"class":138,"line":792},60,[136,794,403],{"class":150},[136,796,362],{"class":142},[136,798,366],{"class":365},[136,800,369],{"class":142},[136,802,804,806,808,810,812,814,816],{"class":138,"line":803},61,[136,805,375],{"class":142},[136,807,378],{"class":150},[136,809,307],{"class":142},[136,811,778],{"class":239},[136,813,386],{"class":142},[136,815,425],{"class":239},[136,817,392],{"class":142},[136,819,821],{"class":138,"line":820},62,[136,822,353],{"class":142},[136,824,826,828,830,832],{"class":138,"line":825},63,[136,827,438],{"class":150},[136,829,362],{"class":142},[136,831,366],{"class":365},[136,833,369],{"class":142},[136,835,837,839,841,843,845,847,849],{"class":138,"line":836},64,[136,838,375],{"class":142},[136,840,378],{"class":150},[136,842,307],{"class":142},[136,844,778],{"class":239},[136,846,386],{"class":142},[136,848,460],{"class":239},[136,850,392],{"class":142},[136,852,854],{"class":138,"line":853},65,[136,855,353],{"class":142},[136,857,859,861,863,865],{"class":138,"line":858},66,[136,860,473],{"class":150},[136,862,362],{"class":142},[136,864,366],{"class":365},[136,866,369],{"class":142},[136,868,870,872,874,876,878,880,882],{"class":138,"line":869},67,[136,871,375],{"class":142},[136,873,378],{"class":150},[136,875,307],{"class":142},[136,877,778],{"class":239},[136,879,386],{"class":142},[136,881,495],{"class":239},[136,883,392],{"class":142},[136,885,887],{"class":138,"line":886},68,[136,888,353],{"class":142},[136,890,892,894,896,898],{"class":138,"line":891},69,[136,893,508],{"class":150},[136,895,362],{"class":142},[136,897,366],{"class":365},[136,899,369],{"class":142},[136,901,903,905,907,909,911,913,915],{"class":138,"line":902},70,[136,904,375],{"class":142},[136,906,378],{"class":150},[136,908,307],{"class":142},[136,910,778],{"class":239},[136,912,386],{"class":142},[136,914,530],{"class":239},[136,916,392],{"class":142},[136,918,920],{"class":138,"line":919},71,[136,921,353],{"class":142},[136,923,925,927,929,931],{"class":138,"line":924},72,[136,926,543],{"class":150},[136,928,362],{"class":142},[136,930,366],{"class":365},[136,932,369],{"class":142},[136,934,936,938,940,942,944,946,948],{"class":138,"line":935},73,[136,937,375],{"class":142},[136,939,378],{"class":150},[136,941,307],{"class":142},[136,943,778],{"class":239},[136,945,386],{"class":142},[136,947,565],{"class":239},[136,949,392],{"class":142},[136,951,953],{"class":138,"line":952},74,[136,954,353],{"class":142},[136,956,958,960,962,964],{"class":138,"line":957},75,[136,959,578],{"class":150},[136,961,362],{"class":142},[136,963,366],{"class":365},[136,965,369],{"class":142},[136,967,969,971,973,975,977,979,981],{"class":138,"line":968},76,[136,970,375],{"class":142},[136,972,378],{"class":150},[136,974,307],{"class":142},[136,976,778],{"class":239},[136,978,386],{"class":142},[136,980,600],{"class":239},[136,982,392],{"class":142},[136,984,986],{"class":138,"line":985},77,[136,987,353],{"class":142},[136,989,991,993,995,997],{"class":138,"line":990},78,[136,992,613],{"class":150},[136,994,362],{"class":142},[136,996,366],{"class":365},[136,998,369],{"class":142},[136,1000,1002,1004,1006,1008,1010,1012,1014],{"class":138,"line":1001},79,[136,1003,375],{"class":142},[136,1005,378],{"class":150},[136,1007,307],{"class":142},[136,1009,778],{"class":239},[136,1011,386],{"class":142},[136,1013,635],{"class":239},[136,1015,392],{"class":142},[136,1017,1019],{"class":138,"line":1018},80,[136,1020,353],{"class":142},[136,1022,1024,1026],{"class":138,"line":1023},81,[136,1025,648],{"class":142},[136,1027,651],{"class":239},[136,1029,1031],{"class":138,"line":1030},82,[136,1032,657],{"class":239},[136,1034,1036],{"class":138,"line":1035},83,[136,1037,1038],{"class":239},"                \u003Ccounter :count=\"count\">\u003C\u002Fcounter> \n",[136,1040,1042],{"class":138,"line":1041},84,[136,1043,1044],{"class":239},"                \u003Cbutton @click=\"count++\">++\u003C\u002Fbutton>\n",[136,1046,1048],{"class":138,"line":1047},85,[136,1049,669],{"class":239},[136,1051,1053],{"class":138,"line":1052},86,[136,1054,675],{"class":239},[136,1056,1058],{"class":138,"line":1057},87,[136,1059,681],{"class":142},[136,1061,1063,1065,1067],{"class":138,"line":1062},88,[136,1064,203],{"class":142},[136,1066,264],{"class":146},[136,1068,154],{"class":142},[136,1070,1072],{"class":138,"line":1071},89,[136,1073,171],{"emptyLinePlaceholder":170},[136,1075,1077,1079,1081],{"class":138,"line":1076},90,[136,1078,203],{"class":142},[136,1080,132],{"class":146},[136,1082,154],{"class":142},[58,1084,1085],{"id":1085},"生命周期",[14,1087,1088,1090,1091,1094,1095,1098,1099,1102],{},[17,1089,19],{},"生命周期钩子函数功能示例，其中",[17,1092,1093],{},"this.msg","初始化赋值",[17,1096,1097],{},"Vue Lifecycle","，在更新过程中赋值为",[17,1100,1101],{},"Vue Update","。",[62,1104,33],{"id":1105},"beforecreate",[14,1107,1108,1109,1111,1112,1114,1115,34,1118,1121,1122,1124,1125,1128],{},"从",[17,1110,19],{},"实例开始创建到",[17,1113,33],{},"钩子执行的过程中主要进行了一些初始化操作，例如组件的事件与生命周期钩子的初始化。在此生命周期钩子执行时组件并未挂载，",[17,1116,1117],{},"data",[17,1119,1120],{},"methods","等也并未绑定，此时主要可以用来加载一些与",[17,1123,19],{},"数据无关的操作，例如展示一个",[17,1126,1127],{},"loading","等。",[78,1130,1134],{"className":1131,"code":1132,"language":1133,"meta":86,"style":86},"language-javascript shiki shiki-themes github-light github-dark","console.log(\"beforeCreate\");\nconsole.log(this.$el); \u002F\u002Fundefined\nconsole.log(this.$data); \u002F\u002Fundefined \nconsole.log(this.msg); \u002F\u002F undefined\nconsole.log(\"--------------------\");\n","javascript",[17,1135,1136,1150,1168,1184,1200],{"__ignoreMap":86},[136,1137,1138,1141,1143,1145,1148],{"class":138,"line":139},[136,1139,1140],{"class":142},"console.",[136,1142,378],{"class":150},[136,1144,307],{"class":142},[136,1146,1147],{"class":239},"\"beforeCreate\"",[136,1149,392],{"class":142},[136,1151,1152,1154,1156,1158,1161,1164],{"class":138,"line":157},[136,1153,1140],{"class":142},[136,1155,378],{"class":150},[136,1157,307],{"class":142},[136,1159,1160],{"class":340},"this",[136,1162,1163],{"class":142},".$el); ",[136,1165,1167],{"class":1166},"sJ8bj","\u002F\u002Fundefined\n",[136,1169,1170,1172,1174,1176,1178,1181],{"class":138,"line":167},[136,1171,1140],{"class":142},[136,1173,378],{"class":150},[136,1175,307],{"class":142},[136,1177,1160],{"class":340},[136,1179,1180],{"class":142},".$data); ",[136,1182,1183],{"class":1166},"\u002F\u002Fundefined \n",[136,1185,1186,1188,1190,1192,1194,1197],{"class":138,"line":174},[136,1187,1140],{"class":142},[136,1189,378],{"class":150},[136,1191,307],{"class":142},[136,1193,1160],{"class":340},[136,1195,1196],{"class":142},".msg); ",[136,1198,1199],{"class":1166},"\u002F\u002F undefined\n",[136,1201,1202,1204,1206,1208,1211],{"class":138,"line":184},[136,1203,1140],{"class":142},[136,1205,378],{"class":150},[136,1207,307],{"class":142},[136,1209,1210],{"class":239},"\"--------------------\"",[136,1212,392],{"class":142},[62,1214,37],{"id":37},[14,1216,1108,1217,1219,1220,1222,1223,1226,1227,1229,1230,1233,1234,1237,1238,1240,1241,1243,1244,1247],{},[17,1218,33],{},"到",[17,1221,37],{},"的过程中主要完成了数据绑定的配置、计算属性与方法的挂载、",[17,1224,1225],{},"watch\u002Fevent","事件回调等。在此生命周期钩子执行时组件未挂载到到",[17,1228,23],{},"，属性",[17,1231,1232],{},"$el","目前仍然为",[17,1235,1236],{},"undefined","，但此时已经可以开始操作",[17,1239,1117],{},"与",[17,1242,1120],{},"等，只是页面还未渲染，在此阶段通常用来发起一个",[17,1245,1246],{},"XHR","请求。",[78,1249,1251],{"className":1131,"code":1250,"language":1133,"meta":86,"style":86},"console.log(\"created\");\nconsole.log(this.$el); \u002F\u002Fundefined\nconsole.log(this.$data); \u002F\u002F{__ob__: Observer} \nconsole.log(this.msg); \u002F\u002F Vue Lifecycle\nconsole.log(\"--------------------\");\n",[17,1252,1253,1266,1280,1295,1310],{"__ignoreMap":86},[136,1254,1255,1257,1259,1261,1264],{"class":138,"line":139},[136,1256,1140],{"class":142},[136,1258,378],{"class":150},[136,1260,307],{"class":142},[136,1262,1263],{"class":239},"\"created\"",[136,1265,392],{"class":142},[136,1267,1268,1270,1272,1274,1276,1278],{"class":138,"line":157},[136,1269,1140],{"class":142},[136,1271,378],{"class":150},[136,1273,307],{"class":142},[136,1275,1160],{"class":340},[136,1277,1163],{"class":142},[136,1279,1167],{"class":1166},[136,1281,1282,1284,1286,1288,1290,1292],{"class":138,"line":167},[136,1283,1140],{"class":142},[136,1285,378],{"class":150},[136,1287,307],{"class":142},[136,1289,1160],{"class":340},[136,1291,1180],{"class":142},[136,1293,1294],{"class":1166},"\u002F\u002F{__ob__: Observer} \n",[136,1296,1297,1299,1301,1303,1305,1307],{"class":138,"line":174},[136,1298,1140],{"class":142},[136,1300,378],{"class":150},[136,1302,307],{"class":142},[136,1304,1160],{"class":340},[136,1306,1196],{"class":142},[136,1308,1309],{"class":1166},"\u002F\u002F Vue Lifecycle\n",[136,1311,1312,1314,1316,1318,1320],{"class":138,"line":184},[136,1313,1140],{"class":142},[136,1315,378],{"class":150},[136,1317,307],{"class":142},[136,1319,1210],{"class":239},[136,1321,392],{"class":142},[62,1323,40],{"id":1324},"beforemount",[14,1326,1108,1327,1219,1329,1331,1332,1334,1335,1337],{},[17,1328,37],{},[17,1330,40],{},"的过程中主要完成了页面模板的解析，在内存中将页面的数据与指令等进行解析，当页面解析完成，页面模板就存在于内存中。在此生命周期钩子执行时",[17,1333,1232],{},"被创建，但是页面只是在内存中，并未作为",[17,1336,23],{},"渲染。",[78,1339,1341],{"className":1131,"code":1340,"language":1133,"meta":86,"style":86},"console.log(\"beforeMount\");\nconsole.log(this.$el); \u002F\u002F\u003Cdiv id=\"app\">...\u003C\u002Fdiv>\nconsole.log(this.$data); \u002F\u002F {__ob__: Observer}\nconsole.log(this.msg); \u002F\u002F Vue Lifecycle\nconsole.log(\"--------------------\");\n",[17,1342,1343,1356,1371,1386,1400],{"__ignoreMap":86},[136,1344,1345,1347,1349,1351,1354],{"class":138,"line":139},[136,1346,1140],{"class":142},[136,1348,378],{"class":150},[136,1350,307],{"class":142},[136,1352,1353],{"class":239},"\"beforeMount\"",[136,1355,392],{"class":142},[136,1357,1358,1360,1362,1364,1366,1368],{"class":138,"line":157},[136,1359,1140],{"class":142},[136,1361,378],{"class":150},[136,1363,307],{"class":142},[136,1365,1160],{"class":340},[136,1367,1163],{"class":142},[136,1369,1370],{"class":1166},"\u002F\u002F\u003Cdiv id=\"app\">...\u003C\u002Fdiv>\n",[136,1372,1373,1375,1377,1379,1381,1383],{"class":138,"line":167},[136,1374,1140],{"class":142},[136,1376,378],{"class":150},[136,1378,307],{"class":142},[136,1380,1160],{"class":340},[136,1382,1180],{"class":142},[136,1384,1385],{"class":1166},"\u002F\u002F {__ob__: Observer}\n",[136,1387,1388,1390,1392,1394,1396,1398],{"class":138,"line":174},[136,1389,1140],{"class":142},[136,1391,378],{"class":150},[136,1393,307],{"class":142},[136,1395,1160],{"class":340},[136,1397,1196],{"class":142},[136,1399,1309],{"class":1166},[136,1401,1402,1404,1406,1408,1410],{"class":138,"line":184},[136,1403,1140],{"class":142},[136,1405,378],{"class":150},[136,1407,307],{"class":142},[136,1409,1210],{"class":239},[136,1411,392],{"class":142},[62,1413,43],{"id":43},[14,1415,1108,1416,1219,1418,1420,1421,1423,1424,1427,1428,1431,1432,1435,1436,1438,1439,1102],{},[17,1417,40],{},[17,1419,43],{},"的过程中执行的是将页面从内存中渲染到",[17,1422,23],{},"的操作。在此生命周期钩子执行时页面已经渲染完成，组件正式完成创建阶段的最后一个钩子，即将进入运行中阶段。此外关于渲染的页面模板的优先级，是",[17,1425,1426],{},"render","函数 ",[17,1429,1430],{},">"," ",[17,1433,1434],{},"template","属性 ",[17,1437,1430],{}," 外部",[17,1440,1441],{},"HTML",[78,1443,1445],{"className":1131,"code":1444,"language":1133,"meta":86,"style":86},"console.log(\"mounted\");\nconsole.log(this.$el); \u002F\u002F\u003Cdiv id=\"app\">...\u003C\u002Fdiv>\nconsole.log(this.$data); \u002F\u002F{__ob__: Observer} \nconsole.log(this.msg); \u002F\u002F Vue Lifecycle\nconsole.log(\"--------------------\");\n",[17,1446,1447,1460,1474,1488,1502],{"__ignoreMap":86},[136,1448,1449,1451,1453,1455,1458],{"class":138,"line":139},[136,1450,1140],{"class":142},[136,1452,378],{"class":150},[136,1454,307],{"class":142},[136,1456,1457],{"class":239},"\"mounted\"",[136,1459,392],{"class":142},[136,1461,1462,1464,1466,1468,1470,1472],{"class":138,"line":157},[136,1463,1140],{"class":142},[136,1465,378],{"class":150},[136,1467,307],{"class":142},[136,1469,1160],{"class":340},[136,1471,1163],{"class":142},[136,1473,1370],{"class":1166},[136,1475,1476,1478,1480,1482,1484,1486],{"class":138,"line":167},[136,1477,1140],{"class":142},[136,1479,378],{"class":150},[136,1481,307],{"class":142},[136,1483,1160],{"class":340},[136,1485,1180],{"class":142},[136,1487,1294],{"class":1166},[136,1489,1490,1492,1494,1496,1498,1500],{"class":138,"line":174},[136,1491,1140],{"class":142},[136,1493,378],{"class":150},[136,1495,307],{"class":142},[136,1497,1160],{"class":340},[136,1499,1196],{"class":142},[136,1501,1309],{"class":1166},[136,1503,1504,1506,1508,1510,1512],{"class":138,"line":184},[136,1505,1140],{"class":142},[136,1507,378],{"class":150},[136,1509,307],{"class":142},[136,1511,1210],{"class":239},[136,1513,392],{"class":142},[62,1515,46],{"id":1516},"beforeupdate",[14,1518,1519,1520,1522,1523,1525,1526,1529,1530,1532],{},"当数据发生更新时",[17,1521,46],{},"钩子便会被调用，此时",[17,1524,19],{},"实例中数据已经是最新的，但是在页面中的数据还是旧的，在此时可以进一步地更改状态，这不会触发附加的重渲染过程。在上述例子中加入了",[17,1527,1528],{},"debugger","断点，可以观察到",[17,1531,19],{},"实例中数据已经是最新的，但是在页面中的数据还是旧的。",[78,1534,1536],{"className":1131,"code":1535,"language":1133,"meta":86,"style":86},"\u002F\u002F this.msg = \"Vue Update\";\nconsole.log(\"beforeUpdate\");\nconsole.log(this.$el); \u002F\u002F\u003Cdiv id=\"app\">...\u003C\u002Fdiv>\nconsole.log(this.$data); \u002F\u002F{__ob__: Observer} \nconsole.log(this.msg); \u002F\u002F Vue Update\nconsole.log(\"--------------------\");\n",[17,1537,1538,1543,1556,1570,1584,1599],{"__ignoreMap":86},[136,1539,1540],{"class":138,"line":139},[136,1541,1542],{"class":1166},"\u002F\u002F this.msg = \"Vue Update\";\n",[136,1544,1545,1547,1549,1551,1554],{"class":138,"line":157},[136,1546,1140],{"class":142},[136,1548,378],{"class":150},[136,1550,307],{"class":142},[136,1552,1553],{"class":239},"\"beforeUpdate\"",[136,1555,392],{"class":142},[136,1557,1558,1560,1562,1564,1566,1568],{"class":138,"line":167},[136,1559,1140],{"class":142},[136,1561,378],{"class":150},[136,1563,307],{"class":142},[136,1565,1160],{"class":340},[136,1567,1163],{"class":142},[136,1569,1370],{"class":1166},[136,1571,1572,1574,1576,1578,1580,1582],{"class":138,"line":174},[136,1573,1140],{"class":142},[136,1575,378],{"class":150},[136,1577,307],{"class":142},[136,1579,1160],{"class":340},[136,1581,1180],{"class":142},[136,1583,1294],{"class":1166},[136,1585,1586,1588,1590,1592,1594,1596],{"class":138,"line":184},[136,1587,1140],{"class":142},[136,1589,378],{"class":150},[136,1591,307],{"class":142},[136,1593,1160],{"class":340},[136,1595,1196],{"class":142},[136,1597,1598],{"class":1166},"\u002F\u002F Vue Update\n",[136,1600,1601,1603,1605,1607,1609],{"class":138,"line":200},[136,1602,1140],{"class":142},[136,1604,378],{"class":150},[136,1606,307],{"class":142},[136,1608,1210],{"class":239},[136,1610,392],{"class":142},[62,1612,49],{"id":49},[14,1614,1615,1616,1618,1619,1621,1622,1624,1625,1627],{},"当数据发生更新并在",[17,1617,23],{},"渲染完成后",[17,1620,49],{},"钩子便会被调用，在此时组件的",[17,1623,23],{},"已经更新，可以执行依赖于",[17,1626,23],{},"的操作。",[78,1629,1631],{"className":1131,"code":1630,"language":1133,"meta":86,"style":86},"\u002F\u002F this.msg = \"Vue Update\";\nconsole.log(\"updated\");\nconsole.log(this.$el); \u002F\u002F\u003Cdiv id=\"app\">...\u003C\u002Fdiv>\nconsole.log(this.$data); \u002F\u002F{__ob__: Observer} \nconsole.log(this.msg); \u002F\u002F Vue Update\nconsole.log(\"--------------------\");\n",[17,1632,1633,1637,1650,1664,1678,1692],{"__ignoreMap":86},[136,1634,1635],{"class":138,"line":139},[136,1636,1542],{"class":1166},[136,1638,1639,1641,1643,1645,1648],{"class":138,"line":157},[136,1640,1140],{"class":142},[136,1642,378],{"class":150},[136,1644,307],{"class":142},[136,1646,1647],{"class":239},"\"updated\"",[136,1649,392],{"class":142},[136,1651,1652,1654,1656,1658,1660,1662],{"class":138,"line":167},[136,1653,1140],{"class":142},[136,1655,378],{"class":150},[136,1657,307],{"class":142},[136,1659,1160],{"class":340},[136,1661,1163],{"class":142},[136,1663,1370],{"class":1166},[136,1665,1666,1668,1670,1672,1674,1676],{"class":138,"line":174},[136,1667,1140],{"class":142},[136,1669,378],{"class":150},[136,1671,307],{"class":142},[136,1673,1160],{"class":340},[136,1675,1180],{"class":142},[136,1677,1294],{"class":1166},[136,1679,1680,1682,1684,1686,1688,1690],{"class":138,"line":184},[136,1681,1140],{"class":142},[136,1683,378],{"class":150},[136,1685,307],{"class":142},[136,1687,1160],{"class":340},[136,1689,1196],{"class":142},[136,1691,1598],{"class":1166},[136,1693,1694,1696,1698,1700,1702],{"class":138,"line":200},[136,1695,1140],{"class":142},[136,1697,378],{"class":150},[136,1699,307],{"class":142},[136,1701,1210],{"class":239},[136,1703,392],{"class":142},[62,1705,52],{"id":1706},"beforedestroy",[14,1708,1709,1710,1712,1713,1715],{},"在",[17,1711,19],{},"实例被销毁之前",[17,1714,52],{},"钩子便会被调用，在此时实例仍然完全可用。",[78,1717,1719],{"className":1131,"code":1718,"language":1133,"meta":86,"style":86},"\u002F\u002F this.$destroy();\nconsole.log(\"beforeDestroy\");\nconsole.log(this.$el); \u002F\u002F\u003Cdiv id=\"app\">...\u003C\u002Fdiv>\nconsole.log(this.$data); \u002F\u002F{__ob__: Observer} \nconsole.log(this.msg); \u002F\u002F Vue Update\nconsole.log(\"--------------------\");\n",[17,1720,1721,1726,1739,1753,1767,1781],{"__ignoreMap":86},[136,1722,1723],{"class":138,"line":139},[136,1724,1725],{"class":1166},"\u002F\u002F this.$destroy();\n",[136,1727,1728,1730,1732,1734,1737],{"class":138,"line":157},[136,1729,1140],{"class":142},[136,1731,378],{"class":150},[136,1733,307],{"class":142},[136,1735,1736],{"class":239},"\"beforeDestroy\"",[136,1738,392],{"class":142},[136,1740,1741,1743,1745,1747,1749,1751],{"class":138,"line":167},[136,1742,1140],{"class":142},[136,1744,378],{"class":150},[136,1746,307],{"class":142},[136,1748,1160],{"class":340},[136,1750,1163],{"class":142},[136,1752,1370],{"class":1166},[136,1754,1755,1757,1759,1761,1763,1765],{"class":138,"line":174},[136,1756,1140],{"class":142},[136,1758,378],{"class":150},[136,1760,307],{"class":142},[136,1762,1160],{"class":340},[136,1764,1180],{"class":142},[136,1766,1294],{"class":1166},[136,1768,1769,1771,1773,1775,1777,1779],{"class":138,"line":184},[136,1770,1140],{"class":142},[136,1772,378],{"class":150},[136,1774,307],{"class":142},[136,1776,1160],{"class":340},[136,1778,1196],{"class":142},[136,1780,1598],{"class":1166},[136,1782,1783,1785,1787,1789,1791],{"class":138,"line":200},[136,1784,1140],{"class":142},[136,1786,378],{"class":150},[136,1788,307],{"class":142},[136,1790,1210],{"class":239},[136,1792,392],{"class":142},[62,1794,55],{"id":55},[14,1796,1709,1797,1799,1800,1802,1803,1805,1806,1808,1809,1811,1812,1814],{},[17,1798,19],{},"实例被销毁之后",[17,1801,55],{},"钩子便会被调用，在此时",[17,1804,19],{},"实例绑定的所有东西都会解除绑定，所有的事件监听器会被移除，所有的子实例也会被销毁，组件无法使用，",[17,1807,1117],{},"和",[17,1810,1120],{},"也都不可使用，即使更改了实例的属性，页面的",[17,1813,23],{},"也不会重新渲染。",[78,1816,1818],{"className":1131,"code":1817,"language":1133,"meta":86,"style":86},"\u002F\u002F this.$destroy();\nconsole.log(\"destroyed\");\nconsole.log(this.$el); \u002F\u002F\u003Cdiv id=\"app\">...\u003C\u002Fdiv>\nconsole.log(this.$data); \u002F\u002F{__ob__: Observer} \nconsole.log(this.msg); \u002F\u002F Vue Update\nconsole.log(\"--------------------\");\n",[17,1819,1820,1824,1837,1851,1865,1879],{"__ignoreMap":86},[136,1821,1822],{"class":138,"line":139},[136,1823,1725],{"class":1166},[136,1825,1826,1828,1830,1832,1835],{"class":138,"line":157},[136,1827,1140],{"class":142},[136,1829,378],{"class":150},[136,1831,307],{"class":142},[136,1833,1834],{"class":239},"\"destroyed\"",[136,1836,392],{"class":142},[136,1838,1839,1841,1843,1845,1847,1849],{"class":138,"line":167},[136,1840,1140],{"class":142},[136,1842,378],{"class":150},[136,1844,307],{"class":142},[136,1846,1160],{"class":340},[136,1848,1163],{"class":142},[136,1850,1370],{"class":1166},[136,1852,1853,1855,1857,1859,1861,1863],{"class":138,"line":174},[136,1854,1140],{"class":142},[136,1856,378],{"class":150},[136,1858,307],{"class":142},[136,1860,1160],{"class":340},[136,1862,1180],{"class":142},[136,1864,1294],{"class":1166},[136,1866,1867,1869,1871,1873,1875,1877],{"class":138,"line":184},[136,1868,1140],{"class":142},[136,1870,378],{"class":150},[136,1872,307],{"class":142},[136,1874,1160],{"class":340},[136,1876,1196],{"class":142},[136,1878,1598],{"class":1166},[136,1880,1881,1883,1885,1887,1889],{"class":138,"line":200},[136,1882,1140],{"class":142},[136,1884,378],{"class":150},[136,1886,307],{"class":142},[136,1888,1210],{"class":239},[136,1890,392],{"class":142},[58,1892,1893],{"id":1893},"每日一题",[78,1895,1898],{"className":1896,"code":1897,"language":83},[81],"https:\u002F\u002Fgithub.com\u002FWindrunnerMax\u002FEveryDay\n",[17,1899,1897],{"__ignoreMap":86},[58,1901,1902],{"id":1902},"参考",[78,1904,1907],{"className":1905,"code":1906,"language":83},[81],"https:\u002F\u002Fsegmentfault.com\u002Fa\u002F1190000011381906\nhttps:\u002F\u002Fwww.cnblogs.com\u002Fyuliangbin\u002Fp\u002F9348156.html\nhttps:\u002F\u002Fwww.cnblogs.com\u002Fzmyxixihaha\u002Fp\u002F10714217.html\n",[17,1908,1906],{"__ignoreMap":86},[1910,1911,1912],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":86,"searchDepth":157,"depth":157,"links":1914},[1915,1921,1931,1932],{"id":60,"depth":157,"text":60,"children":1916},[1917,1918,1919,1920],{"id":64,"depth":167,"text":64},{"id":89,"depth":167,"text":89},{"id":106,"depth":167,"text":106},{"id":127,"depth":167,"text":127},{"id":1085,"depth":157,"text":1085,"children":1922},[1923,1924,1925,1926,1927,1928,1929,1930],{"id":1105,"depth":167,"text":33},{"id":37,"depth":167,"text":37},{"id":1324,"depth":167,"text":40},{"id":43,"depth":167,"text":43},{"id":1516,"depth":167,"text":46},{"id":49,"depth":167,"text":49},{"id":1706,"depth":167,"text":52},{"id":55,"depth":167,"text":55},{"id":1893,"depth":157,"text":1893},{"id":1902,"depth":157,"text":1902},"Vue实例需要经过创建、初始化数据、编译模板、挂载DOM、渲染、更新、渲染、卸载等一系列过程，这个过程就是Vue的生命周期，Vue中提供的钩子函数有beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed，父子组件嵌套时，父组件和子组件各拥有各自独立的钩子函数。","md",{},"\u002Fvue\u002Fvue父子组件生命周期",{"title":5,"description":1933},"Vue\u002FVue父子组件生命周期","c-1CiAKmdpTZ-rPAkk8s06X3Vd_8Krz4K4KTC5qrSZ8",1791042471101]