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