[{"data":1,"prerenderedAt":987},["ShallowReactive",2],{"page-\u002Fvue\u002Fvue中dollarrefs的理解":3},{"id":4,"title":5,"body":6,"description":980,"extension":981,"meta":982,"navigation":397,"path":983,"seo":984,"stem":985,"__hash__":986},"content\u002FVue\u002FVue中$refs的理解.md","Vue中$refs的理解",{"type":7,"value":8,"toc":975},"minimark",[9,13,29,33,55,536,570,951,954,962,965,971],[10,11,5],"h1",{"id":12},"vue中refs的理解",[14,15,16,20,21,24,25,28],"p",{},[17,18,19],"code",{},"$refs","是一个对象，持有注册过",[17,22,23],{},"ref attribute","的所有",[17,26,27],{},"DOM","元素和组件实例。",[30,31,32],"h2",{"id":32},"描述",[14,34,35,38,39,41,42,44,45,47,48,51,52,54],{},[17,36,37],{},"ref","被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的",[17,40,19],{},"对象上，如果在普通的",[17,43,27],{},"元素上使用，引用指向的就是",[17,46,27],{},"元素，如果用在子组件上，引用就指向组件实例，另外当",[17,49,50],{},"v-for","用于元素或组件的时候，引用信息将是包含",[17,53,27],{},"节点或组件实例的数组。",[56,57,62],"pre",{"className":58,"code":59,"language":60,"meta":61,"style":61},"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 ref=\"node\">Node\u003C\u002Fdiv>\n        \u003Clayout-div ref=\"layout\">\u003C\u002Flayout-div>\n        \u003Cdiv v-for=\"i in 3\" :key=\"i\" ref=\"nodearr\">{{i}}\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    Vue.component(\"layout-div\", {\n      data: function(){\n          return {\n            count: 0\n          }\n      },\n      template: `\u003Cdiv>\n                    \u003Cdiv>{{count}}\u003C\u002Fdiv>\n                \u003C\u002Fdiv>`\n    })\n\n    var vm = new Vue({\n        el: '#app',\n        mounted: function(){\n            console.log(this.$refs.node); \u002F\u002F \u003Cdiv>Node\u003C\u002Fdiv> \u002F\u002F DOM元素\n            console.log(this.$refs.layout); \u002F\u002F VueComponent {_uid: 1, ...} \u002F\u002F 组件实例\n            console.log(this.$refs.nodearr); \u002F\u002F (3) [div, div, div] \u002F\u002F DOM元素数组\n        }\n    })\n\u003C\u002Fscript>\n\u003C\u002Fhtml>\n","html","",[17,63,64,84,94,104,120,130,140,160,183,205,242,252,261,283,300,318,334,343,353,359,365,374,380,386,392,399,419,431,443,467,487,507,513,518,527],{"__ignoreMap":61},[65,66,69,73,77,81],"span",{"class":67,"line":68},"line",1,[65,70,72],{"class":71},"sVt8B","\u003C!",[65,74,76],{"class":75},"s9eBZ","DOCTYPE",[65,78,80],{"class":79},"sScJk"," html",[65,82,83],{"class":71},">\n",[65,85,87,90,92],{"class":67,"line":86},2,[65,88,89],{"class":71},"\u003C",[65,91,60],{"class":75},[65,93,83],{"class":71},[65,95,97,99,102],{"class":67,"line":96},3,[65,98,89],{"class":71},[65,100,101],{"class":75},"head",[65,103,83],{"class":71},[65,105,107,110,113,116,118],{"class":67,"line":106},4,[65,108,109],{"class":71},"    \u003C",[65,111,112],{"class":75},"title",[65,114,115],{"class":71},">Vue\u003C\u002F",[65,117,112],{"class":75},[65,119,83],{"class":71},[65,121,123,126,128],{"class":67,"line":122},5,[65,124,125],{"class":71},"\u003C\u002F",[65,127,101],{"class":75},[65,129,83],{"class":71},[65,131,133,135,138],{"class":67,"line":132},6,[65,134,89],{"class":71},[65,136,137],{"class":75},"body",[65,139,83],{"class":71},[65,141,143,145,148,151,154,158],{"class":67,"line":142},7,[65,144,109],{"class":71},[65,146,147],{"class":75},"div",[65,149,150],{"class":79}," id",[65,152,153],{"class":71},"=",[65,155,157],{"class":156},"sZZnC","\"app\"",[65,159,83],{"class":71},[65,161,163,166,168,171,173,176,179,181],{"class":67,"line":162},8,[65,164,165],{"class":71},"        \u003C",[65,167,147],{"class":75},[65,169,170],{"class":79}," ref",[65,172,153],{"class":71},[65,174,175],{"class":156},"\"node\"",[65,177,178],{"class":71},">Node\u003C\u002F",[65,180,147],{"class":75},[65,182,83],{"class":71},[65,184,186,188,191,193,195,198,201,203],{"class":67,"line":185},9,[65,187,165],{"class":71},[65,189,190],{"class":75},"layout-div",[65,192,170],{"class":79},[65,194,153],{"class":71},[65,196,197],{"class":156},"\"layout\"",[65,199,200],{"class":71},">\u003C\u002F",[65,202,190],{"class":75},[65,204,83],{"class":71},[65,206,208,210,212,215,217,220,223,225,228,230,232,235,238,240],{"class":67,"line":207},10,[65,209,165],{"class":71},[65,211,147],{"class":75},[65,213,214],{"class":79}," v-for",[65,216,153],{"class":71},[65,218,219],{"class":156},"\"i in 3\"",[65,221,222],{"class":79}," :key",[65,224,153],{"class":71},[65,226,227],{"class":156},"\"i\"",[65,229,170],{"class":79},[65,231,153],{"class":71},[65,233,234],{"class":156},"\"nodearr\"",[65,236,237],{"class":71},">{{i}}\u003C\u002F",[65,239,147],{"class":75},[65,241,83],{"class":71},[65,243,245,248,250],{"class":67,"line":244},11,[65,246,247],{"class":71},"    \u003C\u002F",[65,249,147],{"class":75},[65,251,83],{"class":71},[65,253,255,257,259],{"class":67,"line":254},12,[65,256,125],{"class":71},[65,258,137],{"class":75},[65,260,83],{"class":71},[65,262,264,266,269,272,274,277,279,281],{"class":67,"line":263},13,[65,265,89],{"class":71},[65,267,268],{"class":75},"script",[65,270,271],{"class":79}," src",[65,273,153],{"class":71},[65,275,276],{"class":156},"\"https:\u002F\u002Fcdn.bootcss.com\u002Fvue\u002F2.4.2\u002Fvue.js\"",[65,278,200],{"class":71},[65,280,268],{"class":75},[65,282,83],{"class":71},[65,284,286,288,290,293,295,298],{"class":67,"line":285},14,[65,287,89],{"class":71},[65,289,268],{"class":75},[65,291,292],{"class":79}," type",[65,294,153],{"class":71},[65,296,297],{"class":156},"\"text\u002Fjavascript\"",[65,299,83],{"class":71},[65,301,303,306,309,312,315],{"class":67,"line":302},15,[65,304,305],{"class":71},"    Vue.",[65,307,308],{"class":79},"component",[65,310,311],{"class":71},"(",[65,313,314],{"class":156},"\"layout-div\"",[65,316,317],{"class":71},", {\n",[65,319,321,324,327,331],{"class":67,"line":320},16,[65,322,323],{"class":79},"      data",[65,325,326],{"class":71},": ",[65,328,330],{"class":329},"szBVR","function",[65,332,333],{"class":71},"(){\n",[65,335,337,340],{"class":67,"line":336},17,[65,338,339],{"class":329},"          return",[65,341,342],{"class":71}," {\n",[65,344,346,349],{"class":67,"line":345},18,[65,347,348],{"class":71},"            count: ",[65,350,352],{"class":351},"sj4cs","0\n",[65,354,356],{"class":67,"line":355},19,[65,357,358],{"class":71},"          }\n",[65,360,362],{"class":67,"line":361},20,[65,363,364],{"class":71},"      },\n",[65,366,368,371],{"class":67,"line":367},21,[65,369,370],{"class":71},"      template: ",[65,372,373],{"class":156},"`\u003Cdiv>\n",[65,375,377],{"class":67,"line":376},22,[65,378,379],{"class":156},"                    \u003Cdiv>{{count}}\u003C\u002Fdiv>\n",[65,381,383],{"class":67,"line":382},23,[65,384,385],{"class":156},"                \u003C\u002Fdiv>`\n",[65,387,389],{"class":67,"line":388},24,[65,390,391],{"class":71},"    })\n",[65,393,395],{"class":67,"line":394},25,[65,396,398],{"emptyLinePlaceholder":397},true,"\n",[65,400,402,405,408,410,413,416],{"class":67,"line":401},26,[65,403,404],{"class":329},"    var",[65,406,407],{"class":71}," vm ",[65,409,153],{"class":329},[65,411,412],{"class":329}," new",[65,414,415],{"class":79}," Vue",[65,417,418],{"class":71},"({\n",[65,420,422,425,428],{"class":67,"line":421},27,[65,423,424],{"class":71},"        el: ",[65,426,427],{"class":156},"'#app'",[65,429,430],{"class":71},",\n",[65,432,434,437,439,441],{"class":67,"line":433},28,[65,435,436],{"class":79},"        mounted",[65,438,326],{"class":71},[65,440,330],{"class":329},[65,442,333],{"class":71},[65,444,446,449,452,454,457,460,464],{"class":67,"line":445},29,[65,447,448],{"class":71},"            console.",[65,450,451],{"class":79},"log",[65,453,311],{"class":71},[65,455,456],{"class":351},"this",[65,458,459],{"class":71},".$refs.node); ",[65,461,463],{"class":462},"sJ8bj","\u002F\u002F \u003Cdiv>Node\u003C\u002Fdiv>",[65,465,466],{"class":462}," \u002F\u002F DOM元素\n",[65,468,470,472,474,476,478,481,484],{"class":67,"line":469},30,[65,471,448],{"class":71},[65,473,451],{"class":79},[65,475,311],{"class":71},[65,477,456],{"class":351},[65,479,480],{"class":71},".$refs.layout); ",[65,482,483],{"class":462},"\u002F\u002F VueComponent {_uid: 1, ...}",[65,485,486],{"class":462}," \u002F\u002F 组件实例\n",[65,488,490,492,494,496,498,501,504],{"class":67,"line":489},31,[65,491,448],{"class":71},[65,493,451],{"class":79},[65,495,311],{"class":71},[65,497,456],{"class":351},[65,499,500],{"class":71},".$refs.nodearr); ",[65,502,503],{"class":462},"\u002F\u002F (3) [div, div, div]",[65,505,506],{"class":462}," \u002F\u002F DOM元素数组\n",[65,508,510],{"class":67,"line":509},32,[65,511,512],{"class":71},"        }\n",[65,514,516],{"class":67,"line":515},33,[65,517,391],{"class":71},[65,519,521,523,525],{"class":67,"line":520},34,[65,522,125],{"class":71},[65,524,268],{"class":75},[65,526,83],{"class":71},[65,528,530,532,534],{"class":67,"line":529},35,[65,531,125],{"class":71},[65,533,60],{"class":75},[65,535,83],{"class":71},[14,537,538,539,541,542,544,545,547,548,551,552,555,556,558,559,562,563,566,567,569],{},"因为",[17,540,37],{},"本身是作为渲染结果被创建的，在初始渲染的时候是不能访问的，因为其还不存在，而且",[17,543,19],{},"也不是响应式的，因此不应该试图用它在模板中做数据绑定，在初始化访问",[17,546,37],{},"时，应该在其生命周期的",[17,549,550],{},"mounted","方法中调用，在数据更新之后，应该在",[17,553,554],{},"$nextTick","方法中传递回调操作来获取元素或实例，此外一般不推荐直接操作",[17,557,27],{},"元素，尽量使用数据绑定让",[17,560,561],{},"MVVM","的",[17,564,565],{},"ViewModel","去操作",[17,568,27],{},"。",[56,571,573],{"className":58,"code":572,"language":60,"meta":61,"style":61},"\u003C!DOCTYPE html>\n\u003Chtml>\n\u003Chead>\n    \u003Ctitle>Vue\u003C\u002Ftitle>\n\u003C\u002Fhead>\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\n    var vm = new Vue({\n        el: '#app',\n        data: function(){\n            return {\n                msg: 0\n            }\n        },\n        template:  `\u003Cdiv>\n                       \u003Cdiv ref=\"node\">{{msg}}\u003C\u002Fdiv>\n                       \u003Cbutton @click=\"updateMsg\">button\u003C\u002Fbutton>\n                    \u003C\u002Fdiv>`,\n        beforeMount: function(){\n            console.log(this.$refs.node); \u002F\u002F undefined\n        },\n        mounted: function(){\n            console.log(this.$refs.node); \u002F\u002F \u003Cdiv>0\u003C\u002Fdiv>\n        },\n        methods: {\n            updateMsg: function(){\n                this.msg = 1;\n                console.log(this.$refs.node.innerHTML); \u002F\u002F 0\n                this.$nextTick(() => {\n                    console.log(this.$refs.node.innerHTML); \u002F\u002F 1\n                })\n            }\n        }\n    })\n\u003C\u002Fscript>\n\u003C\u002Fhtml>\n",[17,574,575,585,593,601,613,621,629,647,655,673,687,691,705,713,724,731,738,743,748,755,760,765,772,783,798,802,812,827,831,836,847,863,880,897,913,918,923,928,933,942],{"__ignoreMap":61},[65,576,577,579,581,583],{"class":67,"line":68},[65,578,72],{"class":71},[65,580,76],{"class":75},[65,582,80],{"class":79},[65,584,83],{"class":71},[65,586,587,589,591],{"class":67,"line":86},[65,588,89],{"class":71},[65,590,60],{"class":75},[65,592,83],{"class":71},[65,594,595,597,599],{"class":67,"line":96},[65,596,89],{"class":71},[65,598,101],{"class":75},[65,600,83],{"class":71},[65,602,603,605,607,609,611],{"class":67,"line":106},[65,604,109],{"class":71},[65,606,112],{"class":75},[65,608,115],{"class":71},[65,610,112],{"class":75},[65,612,83],{"class":71},[65,614,615,617,619],{"class":67,"line":122},[65,616,125],{"class":71},[65,618,101],{"class":75},[65,620,83],{"class":71},[65,622,623,625,627],{"class":67,"line":132},[65,624,89],{"class":71},[65,626,137],{"class":75},[65,628,83],{"class":71},[65,630,631,633,635,637,639,641,643,645],{"class":67,"line":142},[65,632,109],{"class":71},[65,634,147],{"class":75},[65,636,150],{"class":79},[65,638,153],{"class":71},[65,640,157],{"class":156},[65,642,200],{"class":71},[65,644,147],{"class":75},[65,646,83],{"class":71},[65,648,649,651,653],{"class":67,"line":162},[65,650,125],{"class":71},[65,652,137],{"class":75},[65,654,83],{"class":71},[65,656,657,659,661,663,665,667,669,671],{"class":67,"line":185},[65,658,89],{"class":71},[65,660,268],{"class":75},[65,662,271],{"class":79},[65,664,153],{"class":71},[65,666,276],{"class":156},[65,668,200],{"class":71},[65,670,268],{"class":75},[65,672,83],{"class":71},[65,674,675,677,679,681,683,685],{"class":67,"line":207},[65,676,89],{"class":71},[65,678,268],{"class":75},[65,680,292],{"class":79},[65,682,153],{"class":71},[65,684,297],{"class":156},[65,686,83],{"class":71},[65,688,689],{"class":67,"line":244},[65,690,398],{"emptyLinePlaceholder":397},[65,692,693,695,697,699,701,703],{"class":67,"line":254},[65,694,404],{"class":329},[65,696,407],{"class":71},[65,698,153],{"class":329},[65,700,412],{"class":329},[65,702,415],{"class":79},[65,704,418],{"class":71},[65,706,707,709,711],{"class":67,"line":263},[65,708,424],{"class":71},[65,710,427],{"class":156},[65,712,430],{"class":71},[65,714,715,718,720,722],{"class":67,"line":285},[65,716,717],{"class":79},"        data",[65,719,326],{"class":71},[65,721,330],{"class":329},[65,723,333],{"class":71},[65,725,726,729],{"class":67,"line":302},[65,727,728],{"class":329},"            return",[65,730,342],{"class":71},[65,732,733,736],{"class":67,"line":320},[65,734,735],{"class":71},"                msg: ",[65,737,352],{"class":351},[65,739,740],{"class":67,"line":336},[65,741,742],{"class":71},"            }\n",[65,744,745],{"class":67,"line":345},[65,746,747],{"class":71},"        },\n",[65,749,750,753],{"class":67,"line":355},[65,751,752],{"class":71},"        template:  ",[65,754,373],{"class":156},[65,756,757],{"class":67,"line":361},[65,758,759],{"class":156},"                       \u003Cdiv ref=\"node\">{{msg}}\u003C\u002Fdiv>\n",[65,761,762],{"class":67,"line":367},[65,763,764],{"class":156},"                       \u003Cbutton @click=\"updateMsg\">button\u003C\u002Fbutton>\n",[65,766,767,770],{"class":67,"line":376},[65,768,769],{"class":156},"                    \u003C\u002Fdiv>`",[65,771,430],{"class":71},[65,773,774,777,779,781],{"class":67,"line":382},[65,775,776],{"class":79},"        beforeMount",[65,778,326],{"class":71},[65,780,330],{"class":329},[65,782,333],{"class":71},[65,784,785,787,789,791,793,795],{"class":67,"line":388},[65,786,448],{"class":71},[65,788,451],{"class":79},[65,790,311],{"class":71},[65,792,456],{"class":351},[65,794,459],{"class":71},[65,796,797],{"class":462},"\u002F\u002F undefined\n",[65,799,800],{"class":67,"line":394},[65,801,747],{"class":71},[65,803,804,806,808,810],{"class":67,"line":401},[65,805,436],{"class":79},[65,807,326],{"class":71},[65,809,330],{"class":329},[65,811,333],{"class":71},[65,813,814,816,818,820,822,824],{"class":67,"line":421},[65,815,448],{"class":71},[65,817,451],{"class":79},[65,819,311],{"class":71},[65,821,456],{"class":351},[65,823,459],{"class":71},[65,825,826],{"class":462},"\u002F\u002F \u003Cdiv>0\u003C\u002Fdiv>\n",[65,828,829],{"class":67,"line":433},[65,830,747],{"class":71},[65,832,833],{"class":67,"line":445},[65,834,835],{"class":71},"        methods: {\n",[65,837,838,841,843,845],{"class":67,"line":469},[65,839,840],{"class":79},"            updateMsg",[65,842,326],{"class":71},[65,844,330],{"class":329},[65,846,333],{"class":71},[65,848,849,852,855,857,860],{"class":67,"line":489},[65,850,851],{"class":351},"                this",[65,853,854],{"class":71},".msg ",[65,856,153],{"class":329},[65,858,859],{"class":351}," 1",[65,861,862],{"class":71},";\n",[65,864,865,868,870,872,874,877],{"class":67,"line":509},[65,866,867],{"class":71},"                console.",[65,869,451],{"class":79},[65,871,311],{"class":71},[65,873,456],{"class":351},[65,875,876],{"class":71},".$refs.node.innerHTML); ",[65,878,879],{"class":462},"\u002F\u002F 0\n",[65,881,882,884,887,889,892,895],{"class":67,"line":515},[65,883,851],{"class":351},[65,885,886],{"class":71},".",[65,888,554],{"class":79},[65,890,891],{"class":71},"(() ",[65,893,894],{"class":329},"=>",[65,896,342],{"class":71},[65,898,899,902,904,906,908,910],{"class":67,"line":520},[65,900,901],{"class":71},"                    console.",[65,903,451],{"class":79},[65,905,311],{"class":71},[65,907,456],{"class":351},[65,909,876],{"class":71},[65,911,912],{"class":462},"\u002F\u002F 1\n",[65,914,915],{"class":67,"line":529},[65,916,917],{"class":71},"                })\n",[65,919,921],{"class":67,"line":920},36,[65,922,742],{"class":71},[65,924,926],{"class":67,"line":925},37,[65,927,512],{"class":71},[65,929,931],{"class":67,"line":930},38,[65,932,391],{"class":71},[65,934,936,938,940],{"class":67,"line":935},39,[65,937,125],{"class":71},[65,939,268],{"class":75},[65,941,83],{"class":71},[65,943,945,947,949],{"class":67,"line":944},40,[65,946,125],{"class":71},[65,948,60],{"class":75},[65,950,83],{"class":71},[30,952,953],{"id":953},"每日一题",[56,955,960],{"className":956,"code":958,"language":959},[957],"language-text","https:\u002F\u002Fgithub.com\u002FWindrunnerMax\u002FEveryDay\n","text",[17,961,958],{"__ignoreMap":61},[30,963,964],{"id":964},"参考",[56,966,969],{"className":967,"code":968,"language":959},[957],"https:\u002F\u002Fcn.vuejs.org\u002Fv2\u002Fapi\u002F#ref\nhttps:\u002F\u002Fzhuanlan.zhihu.com\u002Fp\u002F50638655\nhttps:\u002F\u002Fjuejin.im\u002Fpost\u002F5da58c54e51d4524e207fb92\n",[17,970,968],{"__ignoreMap":61},[972,973,974],"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":61,"searchDepth":86,"depth":86,"links":976},[977,978,979],{"id":32,"depth":86,"text":32},{"id":953,"depth":86,"text":953},{"id":964,"depth":86,"text":964},"$refs是一个对象，持有注册过ref attribute的所有DOM元素和组件实例。","md",{},"\u002Fvue\u002Fvue中dollarrefs的理解",{"title":5,"description":980},"Vue\u002FVue中$refs的理解","4H6FlGonn9E62oekR7YliOSC9cFUHZApmByJ29GqLhM",1791042469545]