[{"data":1,"prerenderedAt":910},["ShallowReactive",2],{"page-\u002Fvue\u002Fdata为何以函数形式返回":3},{"id":4,"title":5,"body":6,"description":902,"extension":903,"meta":904,"navigation":905,"path":906,"seo":907,"stem":908,"__hash__":909},"content\u002FVue\u002Fdata为何以函数形式返回.md","data为何以函数形式返回",{"type":7,"value":8,"toc":896},"minimark",[9,12,25,30,39,296,299,326,615,621,872,875,883,886,892],[10,11,5],"h1",{"id":5},[13,14,15,16,20,21,24],"p",{},"在使用",[17,18,19],"code",{},"Vue","构建组件化应用时，每个组件的",[17,22,23],{},"data","属性都是以函数形式返回的，这主要是在组件化实现的时候，每个实例可以维护一份被返回对象的独立的拷贝，而不是共享同一个对象的引用。",[26,27,29],"h2",{"id":28},"vue简单实例","Vue简单实例",[13,31,32,33,35,36,38],{},"在一个",[17,34,19],{},"简单实例中，也就是不使用组件化实现的时候，",[17,37,23],{},"可以是一个对象，因为本身也只有一个实例，就不存在多个实例共享的问题。",[40,41,46],"pre",{"className":42,"code":43,"language":44,"meta":45,"style":45},"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    \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 Instance'\n        }\n    })\n\u003C\u002Fscript>\n\u003C\u002Fhtml>\n","html","",[17,47,48,68,78,88,104,114,124,144,159,169,178,201,218,239,251,257,266,272,278,287],{"__ignoreMap":45},[49,50,53,57,61,65],"span",{"class":51,"line":52},"line",1,[49,54,56],{"class":55},"sVt8B","\u003C!",[49,58,60],{"class":59},"s9eBZ","DOCTYPE",[49,62,64],{"class":63},"sScJk"," html",[49,66,67],{"class":55},">\n",[49,69,71,74,76],{"class":51,"line":70},2,[49,72,73],{"class":55},"\u003C",[49,75,44],{"class":59},[49,77,67],{"class":55},[49,79,81,83,86],{"class":51,"line":80},3,[49,82,73],{"class":55},[49,84,85],{"class":59},"head",[49,87,67],{"class":55},[49,89,91,94,97,100,102],{"class":51,"line":90},4,[49,92,93],{"class":55},"    \u003C",[49,95,96],{"class":59},"title",[49,98,99],{"class":55},">Vue\u003C\u002F",[49,101,96],{"class":59},[49,103,67],{"class":55},[49,105,107,110,112],{"class":51,"line":106},5,[49,108,109],{"class":55},"\u003C\u002F",[49,111,85],{"class":59},[49,113,67],{"class":55},[49,115,117,119,122],{"class":51,"line":116},6,[49,118,73],{"class":55},[49,120,121],{"class":59},"body",[49,123,67],{"class":55},[49,125,127,129,132,135,138,142],{"class":51,"line":126},7,[49,128,93],{"class":55},[49,130,131],{"class":59},"div",[49,133,134],{"class":63}," id",[49,136,137],{"class":55},"=",[49,139,141],{"class":140},"sZZnC","\"app\"",[49,143,67],{"class":55},[49,145,147,150,152,155,157],{"class":51,"line":146},8,[49,148,149],{"class":55},"        \u003C",[49,151,131],{"class":59},[49,153,154],{"class":55},">{{msg}}\u003C\u002F",[49,156,131],{"class":59},[49,158,67],{"class":55},[49,160,162,165,167],{"class":51,"line":161},9,[49,163,164],{"class":55},"    \u003C\u002F",[49,166,131],{"class":59},[49,168,67],{"class":55},[49,170,172,174,176],{"class":51,"line":171},10,[49,173,109],{"class":55},[49,175,121],{"class":59},[49,177,67],{"class":55},[49,179,181,183,186,189,191,194,197,199],{"class":51,"line":180},11,[49,182,73],{"class":55},[49,184,185],{"class":59},"script",[49,187,188],{"class":63}," src",[49,190,137],{"class":55},[49,192,193],{"class":140},"\"https:\u002F\u002Fcdn.bootcss.com\u002Fvue\u002F2.4.2\u002Fvue.js\"",[49,195,196],{"class":55},">\u003C\u002F",[49,198,185],{"class":59},[49,200,67],{"class":55},[49,202,204,206,208,211,213,216],{"class":51,"line":203},12,[49,205,73],{"class":55},[49,207,185],{"class":59},[49,209,210],{"class":63}," type",[49,212,137],{"class":55},[49,214,215],{"class":140},"\"text\u002Fjavascript\"",[49,217,67],{"class":55},[49,219,221,225,228,230,233,236],{"class":51,"line":220},13,[49,222,224],{"class":223},"szBVR","    var",[49,226,227],{"class":55}," vm ",[49,229,137],{"class":223},[49,231,232],{"class":223}," new",[49,234,235],{"class":63}," Vue",[49,237,238],{"class":55},"({\n",[49,240,242,245,248],{"class":51,"line":241},14,[49,243,244],{"class":55},"        el: ",[49,246,247],{"class":140},"'#app'",[49,249,250],{"class":55},",\n",[49,252,254],{"class":51,"line":253},15,[49,255,256],{"class":55},"        data: {\n",[49,258,260,263],{"class":51,"line":259},16,[49,261,262],{"class":55},"            msg: ",[49,264,265],{"class":140},"'Vue Instance'\n",[49,267,269],{"class":51,"line":268},17,[49,270,271],{"class":55},"        }\n",[49,273,275],{"class":51,"line":274},18,[49,276,277],{"class":55},"    })\n",[49,279,281,283,285],{"class":51,"line":280},19,[49,282,109],{"class":55},[49,284,185],{"class":59},[49,286,67],{"class":55},[49,288,290,292,294],{"class":51,"line":289},20,[49,291,109],{"class":55},[49,293,44],{"class":59},[49,295,67],{"class":55},[26,297,298],{"id":298},"组件化实例",[13,300,301,302,304,305,307,308,311,312,314,315,317,318,321,322,325],{},"如果是使用",[17,303,19],{},"的组件化实例，那么",[17,306,23],{},"属性就必须以函数的形式返回，如果不使用函数的形式返回，可能会出现一些意料之外的情况，比如下面的例子中，按钮组件是复用的，在点击第一个按钮时本身应该只有第一个按钮",[17,309,310],{},"+1","，但是所有的按钮都跟随",[17,313,310],{},"。请注意，在此处仍然是使用函数的形式返回，这是因为如果在组件化实现中如果不使用函数的形式返回",[17,316,19],{},"会直接报错，但是实现的效果是相同的，虽然是以函数的形式返回，但是返回的对象中",[17,319,320],{},"count","属性都是指向了对于",[17,323,324],{},"counter","对象的引用，本质上依旧是多个组件实例共享一个对象，实际效果与以对象的形式直接返回相同。",[40,327,329],{"className":42,"code":328,"language":44,"meta":45,"style":45},"\u003C!DOCTYPE html>\n\u003Chtml>\n\u003Chead>\n    \u003Ctitle>Vue\u003C\u002Ftitle>\n\u003C\u002Fhead>\n\u003Cbody>\n    \u003Cdiv id=\"app\">\n        \u003Cbutton-counter>\u003C\u002Fbutton-counter>\n        \u003Cbutton-counter>\u003C\u002Fbutton-counter>\n        \u003Cbutton-counter>\u003C\u002Fbutton-counter>\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 counter = {\n        count: 0\n    }\n    Vue.component('button-counter', {\n      data: function(){\n          return counter;\n      },\n      template: '\u003Cbutton v-on:click=\"count++\">You clicked me {{ count }} times.\u003C\u002Fbutton>'\n    })\n    var vm = new Vue({\n        el: '#app'\n    })\n\u003C\u002Fscript>\n\u003C\u002Fhtml>\n",[17,330,331,341,349,357,369,377,385,399,412,424,436,444,452,470,484,496,505,510,527,541,549,555,564,569,584,592,597,606],{"__ignoreMap":45},[49,332,333,335,337,339],{"class":51,"line":52},[49,334,56],{"class":55},[49,336,60],{"class":59},[49,338,64],{"class":63},[49,340,67],{"class":55},[49,342,343,345,347],{"class":51,"line":70},[49,344,73],{"class":55},[49,346,44],{"class":59},[49,348,67],{"class":55},[49,350,351,353,355],{"class":51,"line":80},[49,352,73],{"class":55},[49,354,85],{"class":59},[49,356,67],{"class":55},[49,358,359,361,363,365,367],{"class":51,"line":90},[49,360,93],{"class":55},[49,362,96],{"class":59},[49,364,99],{"class":55},[49,366,96],{"class":59},[49,368,67],{"class":55},[49,370,371,373,375],{"class":51,"line":106},[49,372,109],{"class":55},[49,374,85],{"class":59},[49,376,67],{"class":55},[49,378,379,381,383],{"class":51,"line":116},[49,380,73],{"class":55},[49,382,121],{"class":59},[49,384,67],{"class":55},[49,386,387,389,391,393,395,397],{"class":51,"line":126},[49,388,93],{"class":55},[49,390,131],{"class":59},[49,392,134],{"class":63},[49,394,137],{"class":55},[49,396,141],{"class":140},[49,398,67],{"class":55},[49,400,401,403,406,408,410],{"class":51,"line":146},[49,402,149],{"class":55},[49,404,405],{"class":59},"button-counter",[49,407,196],{"class":55},[49,409,405],{"class":59},[49,411,67],{"class":55},[49,413,414,416,418,420,422],{"class":51,"line":161},[49,415,149],{"class":55},[49,417,405],{"class":59},[49,419,196],{"class":55},[49,421,405],{"class":59},[49,423,67],{"class":55},[49,425,426,428,430,432,434],{"class":51,"line":171},[49,427,149],{"class":55},[49,429,405],{"class":59},[49,431,196],{"class":55},[49,433,405],{"class":59},[49,435,67],{"class":55},[49,437,438,440,442],{"class":51,"line":180},[49,439,164],{"class":55},[49,441,131],{"class":59},[49,443,67],{"class":55},[49,445,446,448,450],{"class":51,"line":203},[49,447,109],{"class":55},[49,449,121],{"class":59},[49,451,67],{"class":55},[49,453,454,456,458,460,462,464,466,468],{"class":51,"line":220},[49,455,73],{"class":55},[49,457,185],{"class":59},[49,459,188],{"class":63},[49,461,137],{"class":55},[49,463,193],{"class":140},[49,465,196],{"class":55},[49,467,185],{"class":59},[49,469,67],{"class":55},[49,471,472,474,476,478,480,482],{"class":51,"line":241},[49,473,73],{"class":55},[49,475,185],{"class":59},[49,477,210],{"class":63},[49,479,137],{"class":55},[49,481,215],{"class":140},[49,483,67],{"class":55},[49,485,486,488,491,493],{"class":51,"line":253},[49,487,224],{"class":223},[49,489,490],{"class":55}," counter ",[49,492,137],{"class":223},[49,494,495],{"class":55}," {\n",[49,497,498,501],{"class":51,"line":259},[49,499,500],{"class":55},"        count: ",[49,502,504],{"class":503},"sj4cs","0\n",[49,506,507],{"class":51,"line":268},[49,508,509],{"class":55},"    }\n",[49,511,512,515,518,521,524],{"class":51,"line":274},[49,513,514],{"class":55},"    Vue.",[49,516,517],{"class":63},"component",[49,519,520],{"class":55},"(",[49,522,523],{"class":140},"'button-counter'",[49,525,526],{"class":55},", {\n",[49,528,529,532,535,538],{"class":51,"line":280},[49,530,531],{"class":63},"      data",[49,533,534],{"class":55},": ",[49,536,537],{"class":223},"function",[49,539,540],{"class":55},"(){\n",[49,542,543,546],{"class":51,"line":289},[49,544,545],{"class":223},"          return",[49,547,548],{"class":55}," counter;\n",[49,550,552],{"class":51,"line":551},21,[49,553,554],{"class":55},"      },\n",[49,556,558,561],{"class":51,"line":557},22,[49,559,560],{"class":55},"      template: ",[49,562,563],{"class":140},"'\u003Cbutton v-on:click=\"count++\">You clicked me {{ count }} times.\u003C\u002Fbutton>'\n",[49,565,567],{"class":51,"line":566},23,[49,568,277],{"class":55},[49,570,572,574,576,578,580,582],{"class":51,"line":571},24,[49,573,224],{"class":223},[49,575,227],{"class":55},[49,577,137],{"class":223},[49,579,232],{"class":223},[49,581,235],{"class":63},[49,583,238],{"class":55},[49,585,587,589],{"class":51,"line":586},25,[49,588,244],{"class":55},[49,590,591],{"class":140},"'#app'\n",[49,593,595],{"class":51,"line":594},26,[49,596,277],{"class":55},[49,598,600,602,604],{"class":51,"line":599},27,[49,601,109],{"class":55},[49,603,185],{"class":59},[49,605,67],{"class":55},[49,607,609,611,613],{"class":51,"line":608},28,[49,610,109],{"class":55},[49,612,44],{"class":59},[49,614,67],{"class":55},[13,616,617,618,620],{},"所以为了规避这种现象，在组件化实现的时候，",[17,619,23],{},"属性必须以函数的形式返回，以便每个实例可以维护一份被返回对象的独立的拷贝，而不是共享同一个对象的引用。",[40,622,624],{"className":42,"code":623,"language":44,"meta":45,"style":45},"\u003C!DOCTYPE html>\n\u003Chtml>\n\u003Chead>\n    \u003Ctitle>Vue\u003C\u002Ftitle>\n\u003C\u002Fhead>\n\u003Cbody>\n    \u003Cdiv id=\"app\">\n        \u003Cbutton-counter>\u003C\u002Fbutton-counter>\n        \u003Cbutton-counter>\u003C\u002Fbutton-counter>\n        \u003Cbutton-counter>\u003C\u002Fbutton-counter>\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    Vue.component('button-counter', {\n      data: function(){\n          return {\n            count: 0\n          }\n      },\n      template: '\u003Cbutton v-on:click=\"count++\">You clicked me {{ count }} times.\u003C\u002Fbutton>'\n    })\n    var vm = new Vue({\n        el: '#app'\n    })\n\u003C\u002Fscript>\n\u003C\u002Fhtml>\n",[17,625,626,636,644,652,664,672,680,694,706,718,730,738,746,764,778,790,800,806,813,818,822,828,832,846,852,856,864],{"__ignoreMap":45},[49,627,628,630,632,634],{"class":51,"line":52},[49,629,56],{"class":55},[49,631,60],{"class":59},[49,633,64],{"class":63},[49,635,67],{"class":55},[49,637,638,640,642],{"class":51,"line":70},[49,639,73],{"class":55},[49,641,44],{"class":59},[49,643,67],{"class":55},[49,645,646,648,650],{"class":51,"line":80},[49,647,73],{"class":55},[49,649,85],{"class":59},[49,651,67],{"class":55},[49,653,654,656,658,660,662],{"class":51,"line":90},[49,655,93],{"class":55},[49,657,96],{"class":59},[49,659,99],{"class":55},[49,661,96],{"class":59},[49,663,67],{"class":55},[49,665,666,668,670],{"class":51,"line":106},[49,667,109],{"class":55},[49,669,85],{"class":59},[49,671,67],{"class":55},[49,673,674,676,678],{"class":51,"line":116},[49,675,73],{"class":55},[49,677,121],{"class":59},[49,679,67],{"class":55},[49,681,682,684,686,688,690,692],{"class":51,"line":126},[49,683,93],{"class":55},[49,685,131],{"class":59},[49,687,134],{"class":63},[49,689,137],{"class":55},[49,691,141],{"class":140},[49,693,67],{"class":55},[49,695,696,698,700,702,704],{"class":51,"line":146},[49,697,149],{"class":55},[49,699,405],{"class":59},[49,701,196],{"class":55},[49,703,405],{"class":59},[49,705,67],{"class":55},[49,707,708,710,712,714,716],{"class":51,"line":161},[49,709,149],{"class":55},[49,711,405],{"class":59},[49,713,196],{"class":55},[49,715,405],{"class":59},[49,717,67],{"class":55},[49,719,720,722,724,726,728],{"class":51,"line":171},[49,721,149],{"class":55},[49,723,405],{"class":59},[49,725,196],{"class":55},[49,727,405],{"class":59},[49,729,67],{"class":55},[49,731,732,734,736],{"class":51,"line":180},[49,733,164],{"class":55},[49,735,131],{"class":59},[49,737,67],{"class":55},[49,739,740,742,744],{"class":51,"line":203},[49,741,109],{"class":55},[49,743,121],{"class":59},[49,745,67],{"class":55},[49,747,748,750,752,754,756,758,760,762],{"class":51,"line":220},[49,749,73],{"class":55},[49,751,185],{"class":59},[49,753,188],{"class":63},[49,755,137],{"class":55},[49,757,193],{"class":140},[49,759,196],{"class":55},[49,761,185],{"class":59},[49,763,67],{"class":55},[49,765,766,768,770,772,774,776],{"class":51,"line":241},[49,767,73],{"class":55},[49,769,185],{"class":59},[49,771,210],{"class":63},[49,773,137],{"class":55},[49,775,215],{"class":140},[49,777,67],{"class":55},[49,779,780,782,784,786,788],{"class":51,"line":253},[49,781,514],{"class":55},[49,783,517],{"class":63},[49,785,520],{"class":55},[49,787,523],{"class":140},[49,789,526],{"class":55},[49,791,792,794,796,798],{"class":51,"line":259},[49,793,531],{"class":63},[49,795,534],{"class":55},[49,797,537],{"class":223},[49,799,540],{"class":55},[49,801,802,804],{"class":51,"line":268},[49,803,545],{"class":223},[49,805,495],{"class":55},[49,807,808,811],{"class":51,"line":274},[49,809,810],{"class":55},"            count: ",[49,812,504],{"class":503},[49,814,815],{"class":51,"line":280},[49,816,817],{"class":55},"          }\n",[49,819,820],{"class":51,"line":289},[49,821,554],{"class":55},[49,823,824,826],{"class":51,"line":551},[49,825,560],{"class":55},[49,827,563],{"class":140},[49,829,830],{"class":51,"line":557},[49,831,277],{"class":55},[49,833,834,836,838,840,842,844],{"class":51,"line":566},[49,835,224],{"class":223},[49,837,227],{"class":55},[49,839,137],{"class":223},[49,841,232],{"class":223},[49,843,235],{"class":63},[49,845,238],{"class":55},[49,847,848,850],{"class":51,"line":571},[49,849,244],{"class":55},[49,851,591],{"class":140},[49,853,854],{"class":51,"line":586},[49,855,277],{"class":55},[49,857,858,860,862],{"class":51,"line":594},[49,859,109],{"class":55},[49,861,185],{"class":59},[49,863,67],{"class":55},[49,865,866,868,870],{"class":51,"line":599},[49,867,109],{"class":55},[49,869,44],{"class":59},[49,871,67],{"class":55},[26,873,874],{"id":874},"每日一题",[40,876,881],{"className":877,"code":879,"language":880},[878],"language-text","https:\u002F\u002Fgithub.com\u002FWindrunnerMax\u002FEveryDay\n","text",[17,882,879],{"__ignoreMap":45},[26,884,885],{"id":885},"参考",[40,887,890],{"className":888,"code":889,"language":880},[878],"https:\u002F\u002Fsegmentfault.com\u002Fa\u002F1190000019318483\nhttps:\u002F\u002Fcn.vuejs.org\u002Fv2\u002Fguide\u002Fcomponents.html\nhttps:\u002F\u002Fblog.csdn.net\u002Ffengjingyu168\u002Farticle\u002Fdetails\u002F72900624\n",[17,891,889],{"__ignoreMap":45},[893,894,895],"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 .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 .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":45,"searchDepth":70,"depth":70,"links":897},[898,899,900,901],{"id":28,"depth":70,"text":29},{"id":298,"depth":70,"text":298},{"id":874,"depth":70,"text":874},{"id":885,"depth":70,"text":885},"在使用Vue构建组件化应用时，每个组件的data属性都是以函数形式返回的，这主要是在组件化实现的时候，每个实例可以维护一份被返回对象的独立的拷贝，而不是共享同一个对象的引用。","md",{},true,"\u002Fvue\u002Fdata为何以函数形式返回",{"title":5,"description":902},"Vue\u002Fdata为何以函数形式返回","ZY8xat0gGg00rPbmJE4Csqt-fM7qiqveSeXCaertVak",1791042466994]