[{"data":1,"prerenderedAt":3586},["ShallowReactive",2],{"page-\u002Fvue\u002Fv-model数据绑定分析":3},{"id":4,"title":5,"body":6,"description":3579,"extension":3580,"meta":3581,"navigation":1574,"path":3582,"seo":3583,"stem":3584,"__hash__":3585},"content\u002FVue\u002Fv-model数据绑定分析.md","v-model数据绑定分析",{"type":7,"value":8,"toc":3573},"minimark",[9,12,43,47,66,341,354,404,413,613,619,648,856,879,1189,1192,1204,1226,1410,1431,1709,1750,2230,2239,2812,2846,3549,3552,3560,3563,3569],[10,11,5],"h1",{"id":5},[13,14,15,19,20,23,24,27,28,31,32,35,36,39,40,42],"p",{},[16,17,18],"code",{},"v-model","是",[16,21,22],{},"Vue","提供的指令，其主要作用是可以实现在表单",[16,25,26],{},"\u003Cinput>","、",[16,29,30],{},"\u003Ctextarea>","及",[16,33,34],{},"\u003Cselect>","等元素以及组件上创建双向数据绑定，其本质上就是一种语法糖，既可以直接定义在原生表单元素，也可以支持自定义组件。在组件的实现中，可以配置子组件接收的",[16,37,38],{},"prop","名称，以及派发的事件名称实现组件内的",[16,41,18],{},"双向绑定。",[44,45,46],"h2",{"id":46},"描述",[13,48,49,50,52,53,27,55,31,57,59,60,62,63,65],{},"可以用",[16,51,18],{},"指令在表单",[16,54,26],{},[16,56,30],{},[16,58,34],{},"元素上创建双向数据绑定，其会根据控件类型自动选取正确的方法来更新元素，以",[16,61,26],{},"作为示例使用",[16,64,18],{},"。",[67,68,73],"pre",{"className":69,"code":70,"language":71,"meta":72,"style":72},"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\">\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: \"\"\n        },\n        template: `\n            \u003Cdiv>\n                \u003Cdiv>Message is: {{ msg }}\u003C\u002Fdiv>\n                \u003Cinput v-model=\"msg\">\n            \u003C\u002Fdiv>\n        `\n    })\n\u003C\u002Fscript>\n\u003C\u002Fhtml>\n","html","",[16,74,75,95,105,115,131,141,151,176,185,207,224,245,257,263,272,278,287,293,299,305,311,317,323,332],{"__ignoreMap":72},[76,77,80,84,88,92],"span",{"class":78,"line":79},"line",1,[76,81,83],{"class":82},"sVt8B","\u003C!",[76,85,87],{"class":86},"s9eBZ","DOCTYPE",[76,89,91],{"class":90},"sScJk"," html",[76,93,94],{"class":82},">\n",[76,96,98,101,103],{"class":78,"line":97},2,[76,99,100],{"class":82},"\u003C",[76,102,71],{"class":86},[76,104,94],{"class":82},[76,106,108,110,113],{"class":78,"line":107},3,[76,109,100],{"class":82},[76,111,112],{"class":86},"head",[76,114,94],{"class":82},[76,116,118,121,124,127,129],{"class":78,"line":117},4,[76,119,120],{"class":82},"    \u003C",[76,122,123],{"class":86},"title",[76,125,126],{"class":82},">Vue\u003C\u002F",[76,128,123],{"class":86},[76,130,94],{"class":82},[76,132,134,137,139],{"class":78,"line":133},5,[76,135,136],{"class":82},"\u003C\u002F",[76,138,112],{"class":86},[76,140,94],{"class":82},[76,142,144,146,149],{"class":78,"line":143},6,[76,145,100],{"class":82},[76,147,148],{"class":86},"body",[76,150,94],{"class":82},[76,152,154,156,159,162,165,169,172,174],{"class":78,"line":153},7,[76,155,120],{"class":82},[76,157,158],{"class":86},"div",[76,160,161],{"class":90}," id",[76,163,164],{"class":82},"=",[76,166,168],{"class":167},"sZZnC","\"app\"",[76,170,171],{"class":82},">\u003C\u002F",[76,173,158],{"class":86},[76,175,94],{"class":82},[76,177,179,181,183],{"class":78,"line":178},8,[76,180,136],{"class":82},[76,182,148],{"class":86},[76,184,94],{"class":82},[76,186,188,190,193,196,198,201,203,205],{"class":78,"line":187},9,[76,189,100],{"class":82},[76,191,192],{"class":86},"script",[76,194,195],{"class":90}," src",[76,197,164],{"class":82},[76,199,200],{"class":167},"\"https:\u002F\u002Fcdn.bootcss.com\u002Fvue\u002F2.4.2\u002Fvue.js\"",[76,202,171],{"class":82},[76,204,192],{"class":86},[76,206,94],{"class":82},[76,208,210,212,214,217,219,222],{"class":78,"line":209},10,[76,211,100],{"class":82},[76,213,192],{"class":86},[76,215,216],{"class":90}," type",[76,218,164],{"class":82},[76,220,221],{"class":167},"\"text\u002Fjavascript\"",[76,223,94],{"class":82},[76,225,227,231,234,236,239,242],{"class":78,"line":226},11,[76,228,230],{"class":229},"szBVR","    var",[76,232,233],{"class":82}," vm ",[76,235,164],{"class":229},[76,237,238],{"class":229}," new",[76,240,241],{"class":90}," Vue",[76,243,244],{"class":82},"({\n",[76,246,248,251,254],{"class":78,"line":247},12,[76,249,250],{"class":82},"        el: ",[76,252,253],{"class":167},"\"#app\"",[76,255,256],{"class":82},",\n",[76,258,260],{"class":78,"line":259},13,[76,261,262],{"class":82},"        data: {\n",[76,264,266,269],{"class":78,"line":265},14,[76,267,268],{"class":82},"            msg: ",[76,270,271],{"class":167},"\"\"\n",[76,273,275],{"class":78,"line":274},15,[76,276,277],{"class":82},"        },\n",[76,279,281,284],{"class":78,"line":280},16,[76,282,283],{"class":82},"        template: ",[76,285,286],{"class":167},"`\n",[76,288,290],{"class":78,"line":289},17,[76,291,292],{"class":167},"            \u003Cdiv>\n",[76,294,296],{"class":78,"line":295},18,[76,297,298],{"class":167},"                \u003Cdiv>Message is: {{ msg }}\u003C\u002Fdiv>\n",[76,300,302],{"class":78,"line":301},19,[76,303,304],{"class":167},"                \u003Cinput v-model=\"msg\">\n",[76,306,308],{"class":78,"line":307},20,[76,309,310],{"class":167},"            \u003C\u002Fdiv>\n",[76,312,314],{"class":78,"line":313},21,[76,315,316],{"class":167},"        `\n",[76,318,320],{"class":78,"line":319},22,[76,321,322],{"class":82},"    })\n",[76,324,326,328,330],{"class":78,"line":325},23,[76,327,136],{"class":82},[76,329,192],{"class":86},[76,331,94],{"class":82},[76,333,335,337,339],{"class":78,"line":334},24,[76,336,136],{"class":82},[76,338,71],{"class":86},[76,340,94],{"class":82},[13,342,343,344,346,347,349,350,353],{},"当不使用",[16,345,18],{},"语法糖时，可以自行实现一个双向绑定，实际上",[16,348,18],{},"在内部为不同的输入元素使用不同的",[16,351,352],{},"property","并抛出不同的事件：",[355,356,357,374,388],"ul",{},[358,359,360,363,364,367,368,363,371,373],"li",{},[16,361,362],{},"input","和",[16,365,366],{},"textarea","元素使用",[16,369,370],{},"value property",[16,372,362],{},"事件。",[358,375,376,363,379,367,382,363,385,373],{},[16,377,378],{},"checkbox",[16,380,381],{},"radio",[16,383,384],{},"checked property",[16,386,387],{},"change",[358,389,390,393,394,397,398,400,401,403],{},[16,391,392],{},"select","元素将",[16,395,396],{},"value","作为",[16,399,38],{},"并将",[16,402,387],{},"作为事件。",[13,405,406,407,409,410,412],{},"同样以",[16,408,26],{},"作为示例而不使用",[16,411,18],{},"实现双向绑定。",[67,414,416],{"className":69,"code":415,"language":71,"meta":72,"style":72},"\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    var vm = new Vue({\n        el: \"#app\",\n        data: {\n            msg: \"\"\n        },\n        template: `\n            \u003Cdiv>\n                \u003Cdiv>Message is: {{ msg }}\u003C\u002Fdiv>\n                \u003Cinput :value=\"msg\" @input=\"msg = $event.target.value\">\n            \u003C\u002Fdiv>\n        `\n    })\n\u003C\u002Fscript>\n\u003C\u002Fhtml>\n",[16,417,418,428,436,444,456,464,472,490,498,516,530,544,552,556,562,566,572,576,580,585,589,593,597,605],{"__ignoreMap":72},[76,419,420,422,424,426],{"class":78,"line":79},[76,421,83],{"class":82},[76,423,87],{"class":86},[76,425,91],{"class":90},[76,427,94],{"class":82},[76,429,430,432,434],{"class":78,"line":97},[76,431,100],{"class":82},[76,433,71],{"class":86},[76,435,94],{"class":82},[76,437,438,440,442],{"class":78,"line":107},[76,439,100],{"class":82},[76,441,112],{"class":86},[76,443,94],{"class":82},[76,445,446,448,450,452,454],{"class":78,"line":117},[76,447,120],{"class":82},[76,449,123],{"class":86},[76,451,126],{"class":82},[76,453,123],{"class":86},[76,455,94],{"class":82},[76,457,458,460,462],{"class":78,"line":133},[76,459,136],{"class":82},[76,461,112],{"class":86},[76,463,94],{"class":82},[76,465,466,468,470],{"class":78,"line":143},[76,467,100],{"class":82},[76,469,148],{"class":86},[76,471,94],{"class":82},[76,473,474,476,478,480,482,484,486,488],{"class":78,"line":153},[76,475,120],{"class":82},[76,477,158],{"class":86},[76,479,161],{"class":90},[76,481,164],{"class":82},[76,483,168],{"class":167},[76,485,171],{"class":82},[76,487,158],{"class":86},[76,489,94],{"class":82},[76,491,492,494,496],{"class":78,"line":178},[76,493,136],{"class":82},[76,495,148],{"class":86},[76,497,94],{"class":82},[76,499,500,502,504,506,508,510,512,514],{"class":78,"line":187},[76,501,100],{"class":82},[76,503,192],{"class":86},[76,505,195],{"class":90},[76,507,164],{"class":82},[76,509,200],{"class":167},[76,511,171],{"class":82},[76,513,192],{"class":86},[76,515,94],{"class":82},[76,517,518,520,522,524,526,528],{"class":78,"line":209},[76,519,100],{"class":82},[76,521,192],{"class":86},[76,523,216],{"class":90},[76,525,164],{"class":82},[76,527,221],{"class":167},[76,529,94],{"class":82},[76,531,532,534,536,538,540,542],{"class":78,"line":226},[76,533,230],{"class":229},[76,535,233],{"class":82},[76,537,164],{"class":229},[76,539,238],{"class":229},[76,541,241],{"class":90},[76,543,244],{"class":82},[76,545,546,548,550],{"class":78,"line":247},[76,547,250],{"class":82},[76,549,253],{"class":167},[76,551,256],{"class":82},[76,553,554],{"class":78,"line":259},[76,555,262],{"class":82},[76,557,558,560],{"class":78,"line":265},[76,559,268],{"class":82},[76,561,271],{"class":167},[76,563,564],{"class":78,"line":274},[76,565,277],{"class":82},[76,567,568,570],{"class":78,"line":280},[76,569,283],{"class":82},[76,571,286],{"class":167},[76,573,574],{"class":78,"line":289},[76,575,292],{"class":167},[76,577,578],{"class":78,"line":295},[76,579,298],{"class":167},[76,581,582],{"class":78,"line":301},[76,583,584],{"class":167},"                \u003Cinput :value=\"msg\" @input=\"msg = $event.target.value\">\n",[76,586,587],{"class":78,"line":307},[76,588,310],{"class":167},[76,590,591],{"class":78,"line":313},[76,592,316],{"class":167},[76,594,595],{"class":78,"line":319},[76,596,322],{"class":82},[76,598,599,601,603],{"class":78,"line":325},[76,600,136],{"class":82},[76,602,192],{"class":86},[76,604,94],{"class":82},[76,606,607,609,611],{"class":78,"line":334},[76,608,136],{"class":82},[76,610,71],{"class":86},[76,612,94],{"class":82},[13,614,615,616,618],{},"对于",[16,617,18],{},"还有修饰符用以控制用户输入：",[355,620,621,627,638],{},[358,622,623,626],{},[16,624,625],{},".trim",": 输入首尾空格过滤。",[358,628,629,632,633,635,636,373],{},[16,630,631],{},".lazy",": 取代",[16,634,362],{},"事件而监听",[16,637,387],{},[358,639,640,643,644,647],{},[16,641,642],{},".number",": 输入字符串转为有效的数字，如果这个值无法被",[16,645,646],{},"parseFloat()","解析，则会返回原始的值。",[67,649,651],{"className":69,"code":650,"language":71,"meta":72,"style":72},"\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    var vm = new Vue({\n        el: \"#app\",\n        data: {\n            msg: 0\n        },\n        template: `\n            \u003Cdiv>\n                \u003Cdiv>Message is: {{ msg }}\u003C\u002Fdiv>\n                \u003Cdiv>Type is: {{ typeof(msg) }}\u003C\u002Fdiv>\n                \u003Cinput v-model.number=\"msg\" type=\"number\">\n            \u003C\u002Fdiv>\n        `\n    })\n\u003C\u002Fscript>\n\u003C\u002Fhtml>\n",[16,652,653,663,671,679,691,699,707,725,733,751,765,779,787,791,799,803,809,813,817,822,827,831,835,839,847],{"__ignoreMap":72},[76,654,655,657,659,661],{"class":78,"line":79},[76,656,83],{"class":82},[76,658,87],{"class":86},[76,660,91],{"class":90},[76,662,94],{"class":82},[76,664,665,667,669],{"class":78,"line":97},[76,666,100],{"class":82},[76,668,71],{"class":86},[76,670,94],{"class":82},[76,672,673,675,677],{"class":78,"line":107},[76,674,100],{"class":82},[76,676,112],{"class":86},[76,678,94],{"class":82},[76,680,681,683,685,687,689],{"class":78,"line":117},[76,682,120],{"class":82},[76,684,123],{"class":86},[76,686,126],{"class":82},[76,688,123],{"class":86},[76,690,94],{"class":82},[76,692,693,695,697],{"class":78,"line":133},[76,694,136],{"class":82},[76,696,112],{"class":86},[76,698,94],{"class":82},[76,700,701,703,705],{"class":78,"line":143},[76,702,100],{"class":82},[76,704,148],{"class":86},[76,706,94],{"class":82},[76,708,709,711,713,715,717,719,721,723],{"class":78,"line":153},[76,710,120],{"class":82},[76,712,158],{"class":86},[76,714,161],{"class":90},[76,716,164],{"class":82},[76,718,168],{"class":167},[76,720,171],{"class":82},[76,722,158],{"class":86},[76,724,94],{"class":82},[76,726,727,729,731],{"class":78,"line":178},[76,728,136],{"class":82},[76,730,148],{"class":86},[76,732,94],{"class":82},[76,734,735,737,739,741,743,745,747,749],{"class":78,"line":187},[76,736,100],{"class":82},[76,738,192],{"class":86},[76,740,195],{"class":90},[76,742,164],{"class":82},[76,744,200],{"class":167},[76,746,171],{"class":82},[76,748,192],{"class":86},[76,750,94],{"class":82},[76,752,753,755,757,759,761,763],{"class":78,"line":209},[76,754,100],{"class":82},[76,756,192],{"class":86},[76,758,216],{"class":90},[76,760,164],{"class":82},[76,762,221],{"class":167},[76,764,94],{"class":82},[76,766,767,769,771,773,775,777],{"class":78,"line":226},[76,768,230],{"class":229},[76,770,233],{"class":82},[76,772,164],{"class":229},[76,774,238],{"class":229},[76,776,241],{"class":90},[76,778,244],{"class":82},[76,780,781,783,785],{"class":78,"line":247},[76,782,250],{"class":82},[76,784,253],{"class":167},[76,786,256],{"class":82},[76,788,789],{"class":78,"line":259},[76,790,262],{"class":82},[76,792,793,795],{"class":78,"line":265},[76,794,268],{"class":82},[76,796,798],{"class":797},"sj4cs","0\n",[76,800,801],{"class":78,"line":274},[76,802,277],{"class":82},[76,804,805,807],{"class":78,"line":280},[76,806,283],{"class":82},[76,808,286],{"class":167},[76,810,811],{"class":78,"line":289},[76,812,292],{"class":167},[76,814,815],{"class":78,"line":295},[76,816,298],{"class":167},[76,818,819],{"class":78,"line":301},[76,820,821],{"class":167},"                \u003Cdiv>Type is: {{ typeof(msg) }}\u003C\u002Fdiv>\n",[76,823,824],{"class":78,"line":307},[76,825,826],{"class":167},"                \u003Cinput v-model.number=\"msg\" type=\"number\">\n",[76,828,829],{"class":78,"line":313},[76,830,310],{"class":167},[76,832,833],{"class":78,"line":319},[76,834,316],{"class":167},[76,836,837],{"class":78,"line":325},[76,838,322],{"class":82},[76,840,841,843,845],{"class":78,"line":334},[76,842,136],{"class":82},[76,844,192],{"class":86},[76,846,94],{"class":82},[76,848,850,852,854],{"class":78,"line":849},25,[76,851,136],{"class":82},[76,853,71],{"class":86},[76,855,94],{"class":82},[13,857,858,859,861,862,864,865,867,868,870,871,874,875,878],{},"当使用自定义组件时，在组件上的",[16,860,18],{},"默认会利用名为",[16,863,396],{},"的",[16,866,38],{},"和名为",[16,869,362],{},"的事件，但是像单选框、复选框等类型的输入控件可能会将",[16,872,873],{},"value attribute","用于不同的目的，此时可以使用",[16,876,877],{},"model","选项可以用来避免这样的冲突。",[67,880,882],{"className":69,"code":881,"language":71,"meta":72,"style":72},"\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    Vue.component(\"u-input\", {\n        model: {\n            prop: \"message\",\n            event: \"input\"\n        },\n        props: {\n            message: { \n                type: String\n            },\n        },\n        template: `\n            \u003Cdiv>\n                \u003Cinput :value=\"message\" @input=\"$emit('input', $event.target.value)\">\n            \u003C\u002Fdiv>\n        `\n    })\n    var vm = new Vue({\n        el: \"#app\",\n        data: {\n            msg: \"\"\n        },\n        template: `\n            \u003Cdiv>\n                \u003Cdiv>Message is: {{ msg }}\u003C\u002Fdiv>\n                \u003Cu-input v-model=\"msg\">\u003C\u002Fu-input>\n            \u003C\u002Fdiv>\n        `\n    })\n\u003C\u002Fscript>\n\u003C\u002Fhtml>\n",[16,883,884,894,902,910,922,930,938,956,964,982,996,1013,1018,1028,1036,1040,1045,1050,1055,1060,1064,1070,1074,1079,1083,1087,1092,1107,1116,1121,1128,1133,1140,1145,1150,1156,1161,1166,1171,1180],{"__ignoreMap":72},[76,885,886,888,890,892],{"class":78,"line":79},[76,887,83],{"class":82},[76,889,87],{"class":86},[76,891,91],{"class":90},[76,893,94],{"class":82},[76,895,896,898,900],{"class":78,"line":97},[76,897,100],{"class":82},[76,899,71],{"class":86},[76,901,94],{"class":82},[76,903,904,906,908],{"class":78,"line":107},[76,905,100],{"class":82},[76,907,112],{"class":86},[76,909,94],{"class":82},[76,911,912,914,916,918,920],{"class":78,"line":117},[76,913,120],{"class":82},[76,915,123],{"class":86},[76,917,126],{"class":82},[76,919,123],{"class":86},[76,921,94],{"class":82},[76,923,924,926,928],{"class":78,"line":133},[76,925,136],{"class":82},[76,927,112],{"class":86},[76,929,94],{"class":82},[76,931,932,934,936],{"class":78,"line":143},[76,933,100],{"class":82},[76,935,148],{"class":86},[76,937,94],{"class":82},[76,939,940,942,944,946,948,950,952,954],{"class":78,"line":153},[76,941,120],{"class":82},[76,943,158],{"class":86},[76,945,161],{"class":90},[76,947,164],{"class":82},[76,949,168],{"class":167},[76,951,171],{"class":82},[76,953,158],{"class":86},[76,955,94],{"class":82},[76,957,958,960,962],{"class":78,"line":178},[76,959,136],{"class":82},[76,961,148],{"class":86},[76,963,94],{"class":82},[76,965,966,968,970,972,974,976,978,980],{"class":78,"line":187},[76,967,100],{"class":82},[76,969,192],{"class":86},[76,971,195],{"class":90},[76,973,164],{"class":82},[76,975,200],{"class":167},[76,977,171],{"class":82},[76,979,192],{"class":86},[76,981,94],{"class":82},[76,983,984,986,988,990,992,994],{"class":78,"line":209},[76,985,100],{"class":82},[76,987,192],{"class":86},[76,989,216],{"class":90},[76,991,164],{"class":82},[76,993,221],{"class":167},[76,995,94],{"class":82},[76,997,998,1001,1004,1007,1010],{"class":78,"line":226},[76,999,1000],{"class":82},"    Vue.",[76,1002,1003],{"class":90},"component",[76,1005,1006],{"class":82},"(",[76,1008,1009],{"class":167},"\"u-input\"",[76,1011,1012],{"class":82},", {\n",[76,1014,1015],{"class":78,"line":247},[76,1016,1017],{"class":82},"        model: {\n",[76,1019,1020,1023,1026],{"class":78,"line":259},[76,1021,1022],{"class":82},"            prop: ",[76,1024,1025],{"class":167},"\"message\"",[76,1027,256],{"class":82},[76,1029,1030,1033],{"class":78,"line":265},[76,1031,1032],{"class":82},"            event: ",[76,1034,1035],{"class":167},"\"input\"\n",[76,1037,1038],{"class":78,"line":274},[76,1039,277],{"class":82},[76,1041,1042],{"class":78,"line":280},[76,1043,1044],{"class":82},"        props: {\n",[76,1046,1047],{"class":78,"line":289},[76,1048,1049],{"class":82},"            message: { \n",[76,1051,1052],{"class":78,"line":295},[76,1053,1054],{"class":82},"                type: String\n",[76,1056,1057],{"class":78,"line":301},[76,1058,1059],{"class":82},"            },\n",[76,1061,1062],{"class":78,"line":307},[76,1063,277],{"class":82},[76,1065,1066,1068],{"class":78,"line":313},[76,1067,283],{"class":82},[76,1069,286],{"class":167},[76,1071,1072],{"class":78,"line":319},[76,1073,292],{"class":167},[76,1075,1076],{"class":78,"line":325},[76,1077,1078],{"class":167},"                \u003Cinput :value=\"message\" @input=\"$emit('input', $event.target.value)\">\n",[76,1080,1081],{"class":78,"line":334},[76,1082,310],{"class":167},[76,1084,1085],{"class":78,"line":849},[76,1086,316],{"class":167},[76,1088,1090],{"class":78,"line":1089},26,[76,1091,322],{"class":82},[76,1093,1095,1097,1099,1101,1103,1105],{"class":78,"line":1094},27,[76,1096,230],{"class":229},[76,1098,233],{"class":82},[76,1100,164],{"class":229},[76,1102,238],{"class":229},[76,1104,241],{"class":90},[76,1106,244],{"class":82},[76,1108,1110,1112,1114],{"class":78,"line":1109},28,[76,1111,250],{"class":82},[76,1113,253],{"class":167},[76,1115,256],{"class":82},[76,1117,1119],{"class":78,"line":1118},29,[76,1120,262],{"class":82},[76,1122,1124,1126],{"class":78,"line":1123},30,[76,1125,268],{"class":82},[76,1127,271],{"class":167},[76,1129,1131],{"class":78,"line":1130},31,[76,1132,277],{"class":82},[76,1134,1136,1138],{"class":78,"line":1135},32,[76,1137,283],{"class":82},[76,1139,286],{"class":167},[76,1141,1143],{"class":78,"line":1142},33,[76,1144,292],{"class":167},[76,1146,1148],{"class":78,"line":1147},34,[76,1149,298],{"class":167},[76,1151,1153],{"class":78,"line":1152},35,[76,1154,1155],{"class":167},"                \u003Cu-input v-model=\"msg\">\u003C\u002Fu-input>\n",[76,1157,1159],{"class":78,"line":1158},36,[76,1160,310],{"class":167},[76,1162,1164],{"class":78,"line":1163},37,[76,1165,316],{"class":167},[76,1167,1169],{"class":78,"line":1168},38,[76,1170,322],{"class":82},[76,1172,1174,1176,1178],{"class":78,"line":1173},39,[76,1175,136],{"class":82},[76,1177,192],{"class":86},[76,1179,94],{"class":82},[76,1181,1183,1185,1187],{"class":78,"line":1182},40,[76,1184,136],{"class":82},[76,1186,71],{"class":86},[76,1188,94],{"class":82},[44,1190,1191],{"id":1191},"分析",[13,1193,1194,1196,1197,1200,1201,65],{},[16,1195,22],{},"源码的实现比较复杂，会处理各种兼容问题与异常以及各种条件分支，文章分析比较核心的代码部分，精简过后的版本，重要部分做出注释，",[16,1198,1199],{},"commit id","为",[16,1202,1203],{},"ef56410",[13,1205,1206,1208,1209,1211,1212,1214,1215,1218,1219,1221,1222,1225],{},[16,1207,18],{},"属于",[16,1210,22],{},"的指令，所以从编译阶段开始分析，在解析到指令之前，",[16,1213,22],{},"的解析阶段大致流程：解析模版字符串生成",[16,1216,1217],{},"AST","、优化语法树",[16,1220,1217],{},"、生成",[16,1223,1224],{},"render","字符串。",[67,1227,1231],{"className":1228,"code":1229,"language":1230,"meta":72,"style":72},"language-javascript shiki shiki-themes github-light github-dark","\u002F\u002F dev\u002Fsrc\u002Fcompiler\u002Findex.js line 11\nexport const createCompiler = createCompilerCreator(function baseCompile (\n  template: string,\n  options: CompilerOptions\n): CompiledResult {\n  const ast = parse(template.trim(), options) \u002F\u002F 生成AST\n  if (options.optimize !== false) {\n    optimize(ast, options) \u002F\u002F 优化AST\n  }\n  const code = generate(ast, options) \u002F\u002F 生成代码 即render字符串\n  return {\n    ast,\n    render: code.render,\n    staticRenderFns: code.staticRenderFns\n  }\n})\n","javascript",[16,1232,1233,1239,1267,1281,1291,1304,1329,1346,1357,1362,1379,1386,1391,1396,1401,1405],{"__ignoreMap":72},[76,1234,1235],{"class":78,"line":79},[76,1236,1238],{"class":1237},"sJ8bj","\u002F\u002F dev\u002Fsrc\u002Fcompiler\u002Findex.js line 11\n",[76,1240,1241,1244,1247,1250,1253,1256,1258,1261,1264],{"class":78,"line":97},[76,1242,1243],{"class":229},"export",[76,1245,1246],{"class":229}," const",[76,1248,1249],{"class":797}," createCompiler",[76,1251,1252],{"class":229}," =",[76,1254,1255],{"class":90}," createCompilerCreator",[76,1257,1006],{"class":82},[76,1259,1260],{"class":229},"function",[76,1262,1263],{"class":90}," baseCompile",[76,1265,1266],{"class":82}," (\n",[76,1268,1269,1273,1276,1279],{"class":78,"line":107},[76,1270,1272],{"class":1271},"s4XuR","  template",[76,1274,1275],{"class":229},":",[76,1277,1278],{"class":797}," string",[76,1280,256],{"class":82},[76,1282,1283,1286,1288],{"class":78,"line":117},[76,1284,1285],{"class":1271},"  options",[76,1287,1275],{"class":229},[76,1289,1290],{"class":90}," CompilerOptions\n",[76,1292,1293,1296,1298,1301],{"class":78,"line":133},[76,1294,1295],{"class":82},")",[76,1297,1275],{"class":229},[76,1299,1300],{"class":90}," CompiledResult",[76,1302,1303],{"class":82}," {\n",[76,1305,1306,1309,1312,1314,1317,1320,1323,1326],{"class":78,"line":143},[76,1307,1308],{"class":229},"  const",[76,1310,1311],{"class":797}," ast",[76,1313,1252],{"class":229},[76,1315,1316],{"class":90}," parse",[76,1318,1319],{"class":82},"(template.",[76,1321,1322],{"class":90},"trim",[76,1324,1325],{"class":82},"(), options) ",[76,1327,1328],{"class":1237},"\u002F\u002F 生成AST\n",[76,1330,1331,1334,1337,1340,1343],{"class":78,"line":153},[76,1332,1333],{"class":229},"  if",[76,1335,1336],{"class":82}," (options.optimize ",[76,1338,1339],{"class":229},"!==",[76,1341,1342],{"class":797}," false",[76,1344,1345],{"class":82},") {\n",[76,1347,1348,1351,1354],{"class":78,"line":178},[76,1349,1350],{"class":90},"    optimize",[76,1352,1353],{"class":82},"(ast, options) ",[76,1355,1356],{"class":1237},"\u002F\u002F 优化AST\n",[76,1358,1359],{"class":78,"line":187},[76,1360,1361],{"class":82},"  }\n",[76,1363,1364,1366,1369,1371,1374,1376],{"class":78,"line":209},[76,1365,1308],{"class":229},[76,1367,1368],{"class":797}," code",[76,1370,1252],{"class":229},[76,1372,1373],{"class":90}," generate",[76,1375,1353],{"class":82},[76,1377,1378],{"class":1237},"\u002F\u002F 生成代码 即render字符串\n",[76,1380,1381,1384],{"class":78,"line":226},[76,1382,1383],{"class":229},"  return",[76,1385,1303],{"class":82},[76,1387,1388],{"class":78,"line":247},[76,1389,1390],{"class":82},"    ast,\n",[76,1392,1393],{"class":78,"line":259},[76,1394,1395],{"class":82},"    render: code.render,\n",[76,1397,1398],{"class":78,"line":265},[76,1399,1400],{"class":82},"    staticRenderFns: code.staticRenderFns\n",[76,1402,1403],{"class":78,"line":274},[76,1404,1361],{"class":82},[76,1406,1407],{"class":78,"line":280},[76,1408,1409],{"class":82},"})\n",[13,1411,1412,1413,1415,1416,1419,1420,1422,1423,1426,1427,1430],{},"对指令的处理就在生成",[16,1414,1224],{},"字符串的过程，也就是",[16,1417,1418],{},"generate","函数的处理过程，在",[16,1421,1418],{},"中调用",[16,1424,1425],{},"genElement -> genData -> genDirectives","，文章主要从",[16,1428,1429],{},"genDirectives","函数进行分析。",[67,1432,1434],{"className":1228,"code":1433,"language":1230,"meta":72,"style":72},"\u002F\u002F dev\u002Fsrc\u002Fcompiler\u002Fcodegen\u002Findex.js line 43\nexport function generate (\n  ast: ASTElement | void,\n  options: CompilerOptions\n): CodegenResult {\n  const state = new CodegenState(options)\n  const code = ast ? genElement(ast, state) : '_c(\"div\")'\n  return {\n    render: `with(this){return ${code}}`, \u002F\u002F render字符串\n    staticRenderFns: state.staticRenderFns\n  }\n}\n\n\u002F\u002F dev\u002Fsrc\u002Fcompiler\u002Fcodegen\u002Findex.js line 55\nexport function genElement (el: ASTElement, state: CodegenState): string {\n  \u002F\u002F ...\n  data = genData(el, state)\n  \u002F\u002F ...\n}\n\n\u002F\u002F dev\u002Fsrc\u002Fcompiler\u002Fcodegen\u002Findex.js line 219\nexport function genData (el: ASTElement, state: CodegenState): string {\n  \u002F\u002F ...\n  const dirs = genDirectives(el, state)\n  \u002F\u002F ...\n}\n",[16,1435,1436,1441,1452,1470,1478,1489,1506,1531,1537,1556,1561,1565,1570,1576,1581,1616,1621,1634,1638,1642,1646,1651,1683,1687,1701,1705],{"__ignoreMap":72},[76,1437,1438],{"class":78,"line":79},[76,1439,1440],{"class":1237},"\u002F\u002F dev\u002Fsrc\u002Fcompiler\u002Fcodegen\u002Findex.js line 43\n",[76,1442,1443,1445,1448,1450],{"class":78,"line":97},[76,1444,1243],{"class":229},[76,1446,1447],{"class":229}," function",[76,1449,1373],{"class":90},[76,1451,1266],{"class":82},[76,1453,1454,1457,1459,1462,1465,1468],{"class":78,"line":107},[76,1455,1456],{"class":1271},"  ast",[76,1458,1275],{"class":229},[76,1460,1461],{"class":90}," ASTElement",[76,1463,1464],{"class":229}," |",[76,1466,1467],{"class":797}," void",[76,1469,256],{"class":82},[76,1471,1472,1474,1476],{"class":78,"line":117},[76,1473,1285],{"class":1271},[76,1475,1275],{"class":229},[76,1477,1290],{"class":90},[76,1479,1480,1482,1484,1487],{"class":78,"line":133},[76,1481,1295],{"class":82},[76,1483,1275],{"class":229},[76,1485,1486],{"class":90}," CodegenResult",[76,1488,1303],{"class":82},[76,1490,1491,1493,1496,1498,1500,1503],{"class":78,"line":143},[76,1492,1308],{"class":229},[76,1494,1495],{"class":797}," state",[76,1497,1252],{"class":229},[76,1499,238],{"class":229},[76,1501,1502],{"class":90}," CodegenState",[76,1504,1505],{"class":82},"(options)\n",[76,1507,1508,1510,1512,1514,1517,1520,1523,1526,1528],{"class":78,"line":153},[76,1509,1308],{"class":229},[76,1511,1368],{"class":797},[76,1513,1252],{"class":229},[76,1515,1516],{"class":82}," ast ",[76,1518,1519],{"class":229},"?",[76,1521,1522],{"class":90}," genElement",[76,1524,1525],{"class":82},"(ast, state) ",[76,1527,1275],{"class":229},[76,1529,1530],{"class":167}," '_c(\"div\")'\n",[76,1532,1533,1535],{"class":78,"line":178},[76,1534,1383],{"class":229},[76,1536,1303],{"class":82},[76,1538,1539,1542,1545,1547,1550,1553],{"class":78,"line":187},[76,1540,1541],{"class":82},"    render: ",[76,1543,1544],{"class":167},"`with(this){return ${",[76,1546,16],{"class":82},[76,1548,1549],{"class":167},"}}`",[76,1551,1552],{"class":82},", ",[76,1554,1555],{"class":1237},"\u002F\u002F render字符串\n",[76,1557,1558],{"class":78,"line":209},[76,1559,1560],{"class":82},"    staticRenderFns: state.staticRenderFns\n",[76,1562,1563],{"class":78,"line":226},[76,1564,1361],{"class":82},[76,1566,1567],{"class":78,"line":247},[76,1568,1569],{"class":82},"}\n",[76,1571,1572],{"class":78,"line":259},[76,1573,1575],{"emptyLinePlaceholder":1574},true,"\n",[76,1577,1578],{"class":78,"line":265},[76,1579,1580],{"class":1237},"\u002F\u002F dev\u002Fsrc\u002Fcompiler\u002Fcodegen\u002Findex.js line 55\n",[76,1582,1583,1585,1587,1589,1592,1595,1597,1599,1601,1604,1606,1608,1610,1612,1614],{"class":78,"line":274},[76,1584,1243],{"class":229},[76,1586,1447],{"class":229},[76,1588,1522],{"class":90},[76,1590,1591],{"class":82}," (",[76,1593,1594],{"class":1271},"el",[76,1596,1275],{"class":229},[76,1598,1461],{"class":90},[76,1600,1552],{"class":82},[76,1602,1603],{"class":1271},"state",[76,1605,1275],{"class":229},[76,1607,1502],{"class":90},[76,1609,1295],{"class":82},[76,1611,1275],{"class":229},[76,1613,1278],{"class":797},[76,1615,1303],{"class":82},[76,1617,1618],{"class":78,"line":280},[76,1619,1620],{"class":1237},"  \u002F\u002F ...\n",[76,1622,1623,1626,1628,1631],{"class":78,"line":289},[76,1624,1625],{"class":82},"  data ",[76,1627,164],{"class":229},[76,1629,1630],{"class":90}," genData",[76,1632,1633],{"class":82},"(el, state)\n",[76,1635,1636],{"class":78,"line":295},[76,1637,1620],{"class":1237},[76,1639,1640],{"class":78,"line":301},[76,1641,1569],{"class":82},[76,1643,1644],{"class":78,"line":307},[76,1645,1575],{"emptyLinePlaceholder":1574},[76,1647,1648],{"class":78,"line":313},[76,1649,1650],{"class":1237},"\u002F\u002F dev\u002Fsrc\u002Fcompiler\u002Fcodegen\u002Findex.js line 219\n",[76,1652,1653,1655,1657,1659,1661,1663,1665,1667,1669,1671,1673,1675,1677,1679,1681],{"class":78,"line":319},[76,1654,1243],{"class":229},[76,1656,1447],{"class":229},[76,1658,1630],{"class":90},[76,1660,1591],{"class":82},[76,1662,1594],{"class":1271},[76,1664,1275],{"class":229},[76,1666,1461],{"class":90},[76,1668,1552],{"class":82},[76,1670,1603],{"class":1271},[76,1672,1275],{"class":229},[76,1674,1502],{"class":90},[76,1676,1295],{"class":82},[76,1678,1275],{"class":229},[76,1680,1278],{"class":797},[76,1682,1303],{"class":82},[76,1684,1685],{"class":78,"line":325},[76,1686,1620],{"class":1237},[76,1688,1689,1691,1694,1696,1699],{"class":78,"line":334},[76,1690,1308],{"class":229},[76,1692,1693],{"class":797}," dirs",[76,1695,1252],{"class":229},[76,1697,1698],{"class":90}," genDirectives",[76,1700,1633],{"class":82},[76,1702,1703],{"class":78,"line":849},[76,1704,1620],{"class":1237},[76,1706,1707],{"class":78,"line":1089},[76,1708,1569],{"class":82},[13,1710,1711,1712,1714,1715,1718,1719,1721,1722,1725,1726,1729,1730,1732,1733,1735,1736,1739,1740,1742,1743,1745,1746,1749],{},"在生成",[16,1713,1217],{},"阶段，也就是",[16,1716,1717],{},"parse","阶段，",[16,1720,18],{},"被当做普通的指令解析到",[16,1723,1724],{},"el.directives","中，",[16,1727,1728],{},"genDrirectives","方法就是遍历",[16,1731,1724],{},"，然后获取每一个指令对应的方法，对于",[16,1734,18],{},"而言，在此处获取的是",[16,1737,1738],{},"{name: \"model\", rawName: \"v-model\" ...}","，通过",[16,1741,1603],{},"找到",[16,1744,877],{},"指令对应的方法",[16,1747,1748],{},"model()","并执行该方法。",[67,1751,1753],{"className":1228,"code":1752,"language":1230,"meta":72,"style":72},"\u002F\u002F dev\u002Fsrc\u002Fcompiler\u002Fcodegen\u002Findex.js line 309\nfunction genDirectives (el: ASTElement, state: CodegenState): string | void {\n  const dirs = el.directives \u002F\u002F 获取指令\n  if (!dirs) return\n  let res = 'directives:['\n  let hasRuntime = false\n  let i, l, dir, needRuntime\n  for (i = 0, l = dirs.length; i \u003C l; i++) { \u002F\u002F 遍历指令\n    dir = dirs[i]\n    needRuntime = true\n    const gen: DirectiveFunction = state.directives[dir.name] \u002F\u002F 对于v-model来说 const gen = state.directives[\"model\"];\n    if (gen) {\n      \u002F\u002F compile-time directive that manipulates AST.\n      \u002F\u002F returns true if it also needs a runtime counterpart.\n      needRuntime = !!gen(el, dir, state.warn)\n    }\n    if (needRuntime) {\n      hasRuntime = true\n      res += `{name:\"${dir.name}\",rawName:\"${dir.rawName}\"${\n        dir.value ? `,value:(${dir.value}),expression:${JSON.stringify(dir.value)}` : ''\n      }${\n        dir.arg ? `,arg:${dir.isDynamicArg ? dir.arg : `\"${dir.arg}\"`}` : ''\n      }${\n        dir.modifiers ? `,modifiers:${JSON.stringify(dir.modifiers)}` : ''\n      }},`\n    }\n  }\n  if (hasRuntime) {\n    return res.slice(0, -1) + ']'\n  }\n}\n",[16,1754,1755,1760,1794,1808,1823,1836,1848,1855,1896,1906,1916,1937,1945,1950,1955,1971,1976,1983,1992,2025,2076,2081,2129,2133,2169,2174,2178,2182,2189,2222,2226],{"__ignoreMap":72},[76,1756,1757],{"class":78,"line":79},[76,1758,1759],{"class":1237},"\u002F\u002F dev\u002Fsrc\u002Fcompiler\u002Fcodegen\u002Findex.js line 309\n",[76,1761,1762,1764,1766,1768,1770,1772,1774,1776,1778,1780,1782,1784,1786,1788,1790,1792],{"class":78,"line":97},[76,1763,1260],{"class":229},[76,1765,1698],{"class":90},[76,1767,1591],{"class":82},[76,1769,1594],{"class":1271},[76,1771,1275],{"class":229},[76,1773,1461],{"class":90},[76,1775,1552],{"class":82},[76,1777,1603],{"class":1271},[76,1779,1275],{"class":229},[76,1781,1502],{"class":90},[76,1783,1295],{"class":82},[76,1785,1275],{"class":229},[76,1787,1278],{"class":797},[76,1789,1464],{"class":229},[76,1791,1467],{"class":797},[76,1793,1303],{"class":82},[76,1795,1796,1798,1800,1802,1805],{"class":78,"line":107},[76,1797,1308],{"class":229},[76,1799,1693],{"class":797},[76,1801,1252],{"class":229},[76,1803,1804],{"class":82}," el.directives ",[76,1806,1807],{"class":1237},"\u002F\u002F 获取指令\n",[76,1809,1810,1812,1814,1817,1820],{"class":78,"line":117},[76,1811,1333],{"class":229},[76,1813,1591],{"class":82},[76,1815,1816],{"class":229},"!",[76,1818,1819],{"class":82},"dirs) ",[76,1821,1822],{"class":229},"return\n",[76,1824,1825,1828,1831,1833],{"class":78,"line":133},[76,1826,1827],{"class":229},"  let",[76,1829,1830],{"class":82}," res ",[76,1832,164],{"class":229},[76,1834,1835],{"class":167}," 'directives:['\n",[76,1837,1838,1840,1843,1845],{"class":78,"line":143},[76,1839,1827],{"class":229},[76,1841,1842],{"class":82}," hasRuntime ",[76,1844,164],{"class":229},[76,1846,1847],{"class":797}," false\n",[76,1849,1850,1852],{"class":78,"line":153},[76,1851,1827],{"class":229},[76,1853,1854],{"class":82}," i, l, dir, needRuntime\n",[76,1856,1857,1860,1863,1865,1868,1871,1873,1876,1879,1882,1884,1887,1890,1893],{"class":78,"line":178},[76,1858,1859],{"class":229},"  for",[76,1861,1862],{"class":82}," (i ",[76,1864,164],{"class":229},[76,1866,1867],{"class":797}," 0",[76,1869,1870],{"class":82},", l ",[76,1872,164],{"class":229},[76,1874,1875],{"class":82}," dirs.",[76,1877,1878],{"class":797},"length",[76,1880,1881],{"class":82},"; i ",[76,1883,100],{"class":229},[76,1885,1886],{"class":82}," l; i",[76,1888,1889],{"class":229},"++",[76,1891,1892],{"class":82},") { ",[76,1894,1895],{"class":1237},"\u002F\u002F 遍历指令\n",[76,1897,1898,1901,1903],{"class":78,"line":187},[76,1899,1900],{"class":82},"    dir ",[76,1902,164],{"class":229},[76,1904,1905],{"class":82}," dirs[i]\n",[76,1907,1908,1911,1913],{"class":78,"line":209},[76,1909,1910],{"class":82},"    needRuntime ",[76,1912,164],{"class":229},[76,1914,1915],{"class":797}," true\n",[76,1917,1918,1921,1924,1926,1929,1931,1934],{"class":78,"line":226},[76,1919,1920],{"class":229},"    const",[76,1922,1923],{"class":797}," gen",[76,1925,1275],{"class":229},[76,1927,1928],{"class":90}," DirectiveFunction",[76,1930,1252],{"class":229},[76,1932,1933],{"class":82}," state.directives[dir.name] ",[76,1935,1936],{"class":1237},"\u002F\u002F 对于v-model来说 const gen = state.directives[\"model\"];\n",[76,1938,1939,1942],{"class":78,"line":247},[76,1940,1941],{"class":229},"    if",[76,1943,1944],{"class":82}," (gen) {\n",[76,1946,1947],{"class":78,"line":259},[76,1948,1949],{"class":1237},"      \u002F\u002F compile-time directive that manipulates AST.\n",[76,1951,1952],{"class":78,"line":265},[76,1953,1954],{"class":1237},"      \u002F\u002F returns true if it also needs a runtime counterpart.\n",[76,1956,1957,1960,1962,1965,1968],{"class":78,"line":274},[76,1958,1959],{"class":82},"      needRuntime ",[76,1961,164],{"class":229},[76,1963,1964],{"class":229}," !!",[76,1966,1967],{"class":90},"gen",[76,1969,1970],{"class":82},"(el, dir, state.warn)\n",[76,1972,1973],{"class":78,"line":280},[76,1974,1975],{"class":82},"    }\n",[76,1977,1978,1980],{"class":78,"line":289},[76,1979,1941],{"class":229},[76,1981,1982],{"class":82}," (needRuntime) {\n",[76,1984,1985,1988,1990],{"class":78,"line":295},[76,1986,1987],{"class":82},"      hasRuntime ",[76,1989,164],{"class":229},[76,1991,1915],{"class":797},[76,1993,1994,1997,2000,2003,2006,2009,2012,2015,2017,2019,2022],{"class":78,"line":301},[76,1995,1996],{"class":82},"      res ",[76,1998,1999],{"class":229},"+=",[76,2001,2002],{"class":167}," `{name:\"${",[76,2004,2005],{"class":82},"dir",[76,2007,2008],{"class":167},".",[76,2010,2011],{"class":82},"name",[76,2013,2014],{"class":167},"}\",rawName:\"${",[76,2016,2005],{"class":82},[76,2018,2008],{"class":167},[76,2020,2021],{"class":82},"rawName",[76,2023,2024],{"class":167},"}\"${\n",[76,2026,2027,2030,2032,2034,2037,2040,2042,2044,2046,2049,2052,2054,2057,2059,2061,2063,2065,2067,2070,2073],{"class":78,"line":307},[76,2028,2029],{"class":82},"        dir",[76,2031,2008],{"class":167},[76,2033,396],{"class":82},[76,2035,2036],{"class":229}," ?",[76,2038,2039],{"class":167}," `,value:(${",[76,2041,2005],{"class":82},[76,2043,2008],{"class":167},[76,2045,396],{"class":82},[76,2047,2048],{"class":167},"}),expression:${",[76,2050,2051],{"class":797},"JSON",[76,2053,2008],{"class":167},[76,2055,2056],{"class":90},"stringify",[76,2058,1006],{"class":167},[76,2060,2005],{"class":82},[76,2062,2008],{"class":167},[76,2064,396],{"class":82},[76,2066,1295],{"class":167},[76,2068,2069],{"class":167},"}`",[76,2071,2072],{"class":229}," :",[76,2074,2075],{"class":167}," ''\n",[76,2077,2078],{"class":78,"line":313},[76,2079,2080],{"class":167},"      }${\n",[76,2082,2083,2085,2087,2090,2092,2095,2097,2099,2102,2104,2107,2109,2111,2113,2116,2118,2120,2122,2125,2127],{"class":78,"line":319},[76,2084,2029],{"class":82},[76,2086,2008],{"class":167},[76,2088,2089],{"class":82},"arg",[76,2091,2036],{"class":229},[76,2093,2094],{"class":167}," `,arg:${",[76,2096,2005],{"class":82},[76,2098,2008],{"class":167},[76,2100,2101],{"class":82},"isDynamicArg",[76,2103,2036],{"class":229},[76,2105,2106],{"class":82}," dir",[76,2108,2008],{"class":167},[76,2110,2089],{"class":82},[76,2112,2072],{"class":229},[76,2114,2115],{"class":167}," `\"${",[76,2117,2005],{"class":82},[76,2119,2008],{"class":167},[76,2121,2089],{"class":82},[76,2123,2124],{"class":167},"}\"`}`",[76,2126,2072],{"class":229},[76,2128,2075],{"class":167},[76,2130,2131],{"class":78,"line":325},[76,2132,2080],{"class":167},[76,2134,2135,2137,2139,2142,2144,2147,2149,2151,2153,2155,2157,2159,2161,2163,2165,2167],{"class":78,"line":334},[76,2136,2029],{"class":82},[76,2138,2008],{"class":167},[76,2140,2141],{"class":82},"modifiers",[76,2143,2036],{"class":229},[76,2145,2146],{"class":167}," `,modifiers:${",[76,2148,2051],{"class":797},[76,2150,2008],{"class":167},[76,2152,2056],{"class":90},[76,2154,1006],{"class":167},[76,2156,2005],{"class":82},[76,2158,2008],{"class":167},[76,2160,2141],{"class":82},[76,2162,1295],{"class":167},[76,2164,2069],{"class":167},[76,2166,2072],{"class":229},[76,2168,2075],{"class":167},[76,2170,2171],{"class":78,"line":849},[76,2172,2173],{"class":167},"      }},`\n",[76,2175,2176],{"class":78,"line":1089},[76,2177,1975],{"class":82},[76,2179,2180],{"class":78,"line":1094},[76,2181,1361],{"class":82},[76,2183,2184,2186],{"class":78,"line":1109},[76,2185,1333],{"class":229},[76,2187,2188],{"class":82}," (hasRuntime) {\n",[76,2190,2191,2194,2197,2200,2202,2205,2207,2210,2213,2216,2219],{"class":78,"line":1118},[76,2192,2193],{"class":229},"    return",[76,2195,2196],{"class":82}," res.",[76,2198,2199],{"class":90},"slice",[76,2201,1006],{"class":82},[76,2203,2204],{"class":797},"0",[76,2206,1552],{"class":82},[76,2208,2209],{"class":229},"-",[76,2211,2212],{"class":797},"1",[76,2214,2215],{"class":82},") ",[76,2217,2218],{"class":229},"+",[76,2220,2221],{"class":167}," ']'\n",[76,2223,2224],{"class":78,"line":1123},[76,2225,1361],{"class":82},[76,2227,2228],{"class":78,"line":1130},[76,2229,1569],{"class":82},[13,2231,2232,2234,2235,2238],{},[16,2233,877],{},"方法主要是根据传入的参数对",[16,2236,2237],{},"tag","的类型进行判断，调用不同的处理逻辑。",[67,2240,2242],{"className":1228,"code":2241,"language":1230,"meta":72,"style":72},"\u002F\u002F dev\u002Fsrc\u002Fplatforms\u002Fweb\u002Fcompiler\u002Fdirectives\u002Fmodel.js line 14\nexport default function model (\n  el: ASTElement,\n  dir: ASTDirective,\n  _warn: Function\n): ?boolean {\n  warn = _warn\n  const value = dir.value\n  const modifiers = dir.modifiers\n  const tag = el.tag\n  const type = el.attrsMap.type\n\n  if (process.env.NODE_ENV !== 'production') {\n    \u002F\u002F inputs with type=\"file\" are read only and setting the input's\n    \u002F\u002F value will throw an error.\n    if (tag === 'input' && type === 'file') {\n      warn(\n        `\u003C${el.tag} v-model=\"${value}\" type=\"file\">:\\n` +\n        `File inputs are read only. Use a v-on:change listener instead.`,\n        el.rawAttrsMap['v-model']\n      )\n    }\n  }\n    \n  \u002F\u002F 分支处理\n  if (el.component) {\n    genComponentModel(el, value, modifiers)\n    \u002F\u002F component v-model doesn't need extra runtime\n    return false\n  } else if (tag === 'select') {\n    genSelect(el, value, modifiers)\n  } else if (tag === 'input' && type === 'checkbox') {\n    genCheckboxModel(el, value, modifiers)\n  } else if (tag === 'input' && type === 'radio') {\n    genRadioModel(el, value, modifiers)\n  } else if (tag === 'input' || tag === 'textarea') {\n    genDefaultModel(el, value, modifiers)\n  } else if (!config.isReservedTag(tag)) {\n    genComponentModel(el, value, modifiers)\n    \u002F\u002F component v-model doesn't need extra runtime\n    return false\n  } else if (process.env.NODE_ENV !== 'production') {\n    warn(\n      `\u003C${el.tag} v-model=\"${value}\">: ` +\n      `v-model is not supported on this element type. ` +\n      'If you are working with contenteditable, it\\'s recommended to ' +\n      'wrap a library dedicated for that purpose inside a custom component.',\n      el.rawAttrsMap['v-model']\n    )\n  }\n\n  \u002F\u002F ensure runtime directive metadata\n  return true\n}\n",[16,2243,2244,2249,2263,2274,2286,2296,2309,2319,2331,2343,2355,2366,2370,2388,2393,2398,2424,2432,2460,2467,2478,2483,2487,2491,2496,2501,2508,2516,2521,2527,2547,2554,2579,2586,2611,2618,2645,2652,2673,2679,2683,2690,2709,2717,2738,2746,2760,2768,2778,2784,2789,2794,2800,2807],{"__ignoreMap":72},[76,2245,2246],{"class":78,"line":79},[76,2247,2248],{"class":1237},"\u002F\u002F dev\u002Fsrc\u002Fplatforms\u002Fweb\u002Fcompiler\u002Fdirectives\u002Fmodel.js line 14\n",[76,2250,2251,2253,2256,2258,2261],{"class":78,"line":97},[76,2252,1243],{"class":229},[76,2254,2255],{"class":229}," default",[76,2257,1447],{"class":229},[76,2259,2260],{"class":90}," model",[76,2262,1266],{"class":82},[76,2264,2265,2268,2270,2272],{"class":78,"line":107},[76,2266,2267],{"class":1271},"  el",[76,2269,1275],{"class":229},[76,2271,1461],{"class":90},[76,2273,256],{"class":82},[76,2275,2276,2279,2281,2284],{"class":78,"line":117},[76,2277,2278],{"class":1271},"  dir",[76,2280,1275],{"class":229},[76,2282,2283],{"class":90}," ASTDirective",[76,2285,256],{"class":82},[76,2287,2288,2291,2293],{"class":78,"line":133},[76,2289,2290],{"class":90},"  _warn",[76,2292,1275],{"class":229},[76,2294,2295],{"class":90}," Function\n",[76,2297,2298,2300,2302,2304,2307],{"class":78,"line":143},[76,2299,1295],{"class":82},[76,2301,1275],{"class":229},[76,2303,2036],{"class":229},[76,2305,2306],{"class":797},"boolean",[76,2308,1303],{"class":82},[76,2310,2311,2314,2316],{"class":78,"line":153},[76,2312,2313],{"class":82},"  warn ",[76,2315,164],{"class":229},[76,2317,2318],{"class":82}," _warn\n",[76,2320,2321,2323,2326,2328],{"class":78,"line":178},[76,2322,1308],{"class":229},[76,2324,2325],{"class":797}," value",[76,2327,1252],{"class":229},[76,2329,2330],{"class":82}," dir.value\n",[76,2332,2333,2335,2338,2340],{"class":78,"line":187},[76,2334,1308],{"class":229},[76,2336,2337],{"class":797}," modifiers",[76,2339,1252],{"class":229},[76,2341,2342],{"class":82}," dir.modifiers\n",[76,2344,2345,2347,2350,2352],{"class":78,"line":209},[76,2346,1308],{"class":229},[76,2348,2349],{"class":797}," tag",[76,2351,1252],{"class":229},[76,2353,2354],{"class":82}," el.tag\n",[76,2356,2357,2359,2361,2363],{"class":78,"line":226},[76,2358,1308],{"class":229},[76,2360,216],{"class":797},[76,2362,1252],{"class":229},[76,2364,2365],{"class":82}," el.attrsMap.type\n",[76,2367,2368],{"class":78,"line":247},[76,2369,1575],{"emptyLinePlaceholder":1574},[76,2371,2372,2374,2377,2380,2383,2386],{"class":78,"line":259},[76,2373,1333],{"class":229},[76,2375,2376],{"class":82}," (process.env.",[76,2378,2379],{"class":797},"NODE_ENV",[76,2381,2382],{"class":229}," !==",[76,2384,2385],{"class":167}," 'production'",[76,2387,1345],{"class":82},[76,2389,2390],{"class":78,"line":265},[76,2391,2392],{"class":1237},"    \u002F\u002F inputs with type=\"file\" are read only and setting the input's\n",[76,2394,2395],{"class":78,"line":274},[76,2396,2397],{"class":1237},"    \u002F\u002F value will throw an error.\n",[76,2399,2400,2402,2405,2408,2411,2414,2417,2419,2422],{"class":78,"line":280},[76,2401,1941],{"class":229},[76,2403,2404],{"class":82}," (tag ",[76,2406,2407],{"class":229},"===",[76,2409,2410],{"class":167}," 'input'",[76,2412,2413],{"class":229}," &&",[76,2415,2416],{"class":82}," type ",[76,2418,2407],{"class":229},[76,2420,2421],{"class":167}," 'file'",[76,2423,1345],{"class":82},[76,2425,2426,2429],{"class":78,"line":289},[76,2427,2428],{"class":90},"      warn",[76,2430,2431],{"class":82},"(\n",[76,2433,2434,2437,2439,2441,2443,2446,2448,2451,2454,2457],{"class":78,"line":295},[76,2435,2436],{"class":167},"        `\u003C${",[76,2438,1594],{"class":82},[76,2440,2008],{"class":167},[76,2442,2237],{"class":82},[76,2444,2445],{"class":167},"} v-model=\"${",[76,2447,396],{"class":82},[76,2449,2450],{"class":167},"}\" type=\"file\">:",[76,2452,2453],{"class":797},"\\n",[76,2455,2456],{"class":167},"`",[76,2458,2459],{"class":229}," +\n",[76,2461,2462,2465],{"class":78,"line":301},[76,2463,2464],{"class":167},"        `File inputs are read only. Use a v-on:change listener instead.`",[76,2466,256],{"class":82},[76,2468,2469,2472,2475],{"class":78,"line":307},[76,2470,2471],{"class":82},"        el.rawAttrsMap[",[76,2473,2474],{"class":167},"'v-model'",[76,2476,2477],{"class":82},"]\n",[76,2479,2480],{"class":78,"line":313},[76,2481,2482],{"class":82},"      )\n",[76,2484,2485],{"class":78,"line":319},[76,2486,1975],{"class":82},[76,2488,2489],{"class":78,"line":325},[76,2490,1361],{"class":82},[76,2492,2493],{"class":78,"line":334},[76,2494,2495],{"class":82},"    \n",[76,2497,2498],{"class":78,"line":849},[76,2499,2500],{"class":1237},"  \u002F\u002F 分支处理\n",[76,2502,2503,2505],{"class":78,"line":1089},[76,2504,1333],{"class":229},[76,2506,2507],{"class":82}," (el.component) {\n",[76,2509,2510,2513],{"class":78,"line":1094},[76,2511,2512],{"class":90},"    genComponentModel",[76,2514,2515],{"class":82},"(el, value, modifiers)\n",[76,2517,2518],{"class":78,"line":1109},[76,2519,2520],{"class":1237},"    \u002F\u002F component v-model doesn't need extra runtime\n",[76,2522,2523,2525],{"class":78,"line":1118},[76,2524,2193],{"class":229},[76,2526,1847],{"class":797},[76,2528,2529,2532,2535,2538,2540,2542,2545],{"class":78,"line":1123},[76,2530,2531],{"class":82},"  } ",[76,2533,2534],{"class":229},"else",[76,2536,2537],{"class":229}," if",[76,2539,2404],{"class":82},[76,2541,2407],{"class":229},[76,2543,2544],{"class":167}," 'select'",[76,2546,1345],{"class":82},[76,2548,2549,2552],{"class":78,"line":1130},[76,2550,2551],{"class":90},"    genSelect",[76,2553,2515],{"class":82},[76,2555,2556,2558,2560,2562,2564,2566,2568,2570,2572,2574,2577],{"class":78,"line":1135},[76,2557,2531],{"class":82},[76,2559,2534],{"class":229},[76,2561,2537],{"class":229},[76,2563,2404],{"class":82},[76,2565,2407],{"class":229},[76,2567,2410],{"class":167},[76,2569,2413],{"class":229},[76,2571,2416],{"class":82},[76,2573,2407],{"class":229},[76,2575,2576],{"class":167}," 'checkbox'",[76,2578,1345],{"class":82},[76,2580,2581,2584],{"class":78,"line":1142},[76,2582,2583],{"class":90},"    genCheckboxModel",[76,2585,2515],{"class":82},[76,2587,2588,2590,2592,2594,2596,2598,2600,2602,2604,2606,2609],{"class":78,"line":1147},[76,2589,2531],{"class":82},[76,2591,2534],{"class":229},[76,2593,2537],{"class":229},[76,2595,2404],{"class":82},[76,2597,2407],{"class":229},[76,2599,2410],{"class":167},[76,2601,2413],{"class":229},[76,2603,2416],{"class":82},[76,2605,2407],{"class":229},[76,2607,2608],{"class":167}," 'radio'",[76,2610,1345],{"class":82},[76,2612,2613,2616],{"class":78,"line":1152},[76,2614,2615],{"class":90},"    genRadioModel",[76,2617,2515],{"class":82},[76,2619,2620,2622,2624,2626,2628,2630,2632,2635,2638,2640,2643],{"class":78,"line":1158},[76,2621,2531],{"class":82},[76,2623,2534],{"class":229},[76,2625,2537],{"class":229},[76,2627,2404],{"class":82},[76,2629,2407],{"class":229},[76,2631,2410],{"class":167},[76,2633,2634],{"class":229}," ||",[76,2636,2637],{"class":82}," tag ",[76,2639,2407],{"class":229},[76,2641,2642],{"class":167}," 'textarea'",[76,2644,1345],{"class":82},[76,2646,2647,2650],{"class":78,"line":1163},[76,2648,2649],{"class":90},"    genDefaultModel",[76,2651,2515],{"class":82},[76,2653,2654,2656,2658,2660,2662,2664,2667,2670],{"class":78,"line":1168},[76,2655,2531],{"class":82},[76,2657,2534],{"class":229},[76,2659,2537],{"class":229},[76,2661,1591],{"class":82},[76,2663,1816],{"class":229},[76,2665,2666],{"class":82},"config.",[76,2668,2669],{"class":90},"isReservedTag",[76,2671,2672],{"class":82},"(tag)) {\n",[76,2674,2675,2677],{"class":78,"line":1173},[76,2676,2512],{"class":90},[76,2678,2515],{"class":82},[76,2680,2681],{"class":78,"line":1182},[76,2682,2520],{"class":1237},[76,2684,2686,2688],{"class":78,"line":2685},41,[76,2687,2193],{"class":229},[76,2689,1847],{"class":797},[76,2691,2693,2695,2697,2699,2701,2703,2705,2707],{"class":78,"line":2692},42,[76,2694,2531],{"class":82},[76,2696,2534],{"class":229},[76,2698,2537],{"class":229},[76,2700,2376],{"class":82},[76,2702,2379],{"class":797},[76,2704,2382],{"class":229},[76,2706,2385],{"class":167},[76,2708,1345],{"class":82},[76,2710,2712,2715],{"class":78,"line":2711},43,[76,2713,2714],{"class":90},"    warn",[76,2716,2431],{"class":82},[76,2718,2720,2723,2725,2727,2729,2731,2733,2736],{"class":78,"line":2719},44,[76,2721,2722],{"class":167},"      `\u003C${",[76,2724,1594],{"class":82},[76,2726,2008],{"class":167},[76,2728,2237],{"class":82},[76,2730,2445],{"class":167},[76,2732,396],{"class":82},[76,2734,2735],{"class":167},"}\">: `",[76,2737,2459],{"class":229},[76,2739,2741,2744],{"class":78,"line":2740},45,[76,2742,2743],{"class":167},"      `v-model is not supported on this element type. `",[76,2745,2459],{"class":229},[76,2747,2749,2752,2755,2758],{"class":78,"line":2748},46,[76,2750,2751],{"class":167},"      'If you are working with contenteditable, it",[76,2753,2754],{"class":797},"\\'",[76,2756,2757],{"class":167},"s recommended to '",[76,2759,2459],{"class":229},[76,2761,2763,2766],{"class":78,"line":2762},47,[76,2764,2765],{"class":167},"      'wrap a library dedicated for that purpose inside a custom component.'",[76,2767,256],{"class":82},[76,2769,2771,2774,2776],{"class":78,"line":2770},48,[76,2772,2773],{"class":82},"      el.rawAttrsMap[",[76,2775,2474],{"class":167},[76,2777,2477],{"class":82},[76,2779,2781],{"class":78,"line":2780},49,[76,2782,2783],{"class":82},"    )\n",[76,2785,2787],{"class":78,"line":2786},50,[76,2788,1361],{"class":82},[76,2790,2792],{"class":78,"line":2791},51,[76,2793,1575],{"emptyLinePlaceholder":1574},[76,2795,2797],{"class":78,"line":2796},52,[76,2798,2799],{"class":1237},"  \u002F\u002F ensure runtime directive metadata\n",[76,2801,2803,2805],{"class":78,"line":2802},53,[76,2804,1383],{"class":229},[76,2806,1915],{"class":797},[76,2808,2810],{"class":78,"line":2809},54,[76,2811,1569],{"class":82},[13,2813,2814,2817,2818,2820,2821,363,2824,2827,2828,2830,2831,1200,2833,2835,2836,1200,2838,2841,2842,2845],{},[16,2815,2816],{},"genDefaultModel","函数先处理了",[16,2819,2141],{},"修饰符，其不同主要影响的是",[16,2822,2823],{},"event",[16,2825,2826],{},"valueExpression","的值，对于",[16,2829,26],{},"标签",[16,2832,2823],{},[16,2834,362],{},"，",[16,2837,2826],{},[16,2839,2840],{},"$event.target.value","，然后去执行",[16,2843,2844],{},"genAssignmentCode","去生成代码，以及添加属性值与事件处理。",[67,2847,2849],{"className":1228,"code":2848,"language":1230,"meta":72,"style":72},"\u002F\u002F dev\u002Fsrc\u002Fplatforms\u002Fweb\u002Fcompiler\u002Fdirectives\u002Fmodel.js line 127\nfunction genDefaultModel (\n  el: ASTElement,\n  value: string,\n  modifiers: ?ASTModifiers\n): ?boolean {\n  const type = el.attrsMap.type\n\n  \u002F\u002F warn if v-bind:value conflicts with v-model\n  \u002F\u002F except for inputs with v-bind:type\n  \u002F\u002F value与v-model冲突则发出警告\n  if (process.env.NODE_ENV !== 'production') {\n    const value = el.attrsMap['v-bind:value'] || el.attrsMap[':value']\n    const typeBinding = el.attrsMap['v-bind:type'] || el.attrsMap[':type']\n    if (value && !typeBinding) {\n      const binding = el.attrsMap['v-bind:value'] ? 'v-bind:value' : ':value'\n      warn(\n        `${binding}=\"${value}\" conflicts with v-model on the same element ` +\n        'because the latter already expands to a value binding internally',\n        el.rawAttrsMap[binding]\n      )\n    }\n  }\n\n  \u002F\u002F 修饰符处理\n  const { lazy, number, trim } = modifiers || {}\n  const needCompositionGuard = !lazy && type !== 'range'\n  const event = lazy\n    ? 'change'\n    : type === 'range'\n      ? RANGE_TOKEN\n      : 'input'\n\n  let valueExpression = '$event.target.value'\n  if (trim) {\n    valueExpression = `$event.target.value.trim()`\n  }\n  if (number) {\n    valueExpression = `_n(${valueExpression})`\n  }\n\n  let code = genAssignmentCode(value, valueExpression)\n  if (needCompositionGuard) {\n    code = `if($event.target.composing)return;${code}`\n  }\n\n  addProp(el, 'value', `(${value})`)\n  addHandler(el, event, code, null, true)\n  if (trim || number) {\n    addHandler(el, 'blur', '$forceUpdate()')\n  }\n}\n\n\u002F\u002F dev\u002Fsrc\u002Fcompiler\u002Fdirectives\u002Fmodel.js line 36\nexport function genAssignmentCode (\n  value: string,\n  assignment: string\n): string {\n  const res = parseModel(value)\n  if (res.key === null) {\n    return `${value}=${assignment}`\n  } else {\n    return `$set(${res.exp}, ${res.key}, ${assignment})`\n  }\n}\n",[16,2850,2851,2856,2865,2875,2886,2898,2910,2920,2924,2929,2934,2939,2953,2980,3005,3021,3047,3053,3071,3078,3083,3087,3091,3095,3099,3104,3136,3159,3171,3179,3190,3198,3206,3210,3222,3229,3239,3243,3250,3264,3268,3272,3287,3294,3309,3313,3317,3341,3359,3371,3388,3392,3396,3400,3405,3416,3427,3438,3449,3465,3480,3498,3507,3539,3544],{"__ignoreMap":72},[76,2852,2853],{"class":78,"line":79},[76,2854,2855],{"class":1237},"\u002F\u002F dev\u002Fsrc\u002Fplatforms\u002Fweb\u002Fcompiler\u002Fdirectives\u002Fmodel.js line 127\n",[76,2857,2858,2860,2863],{"class":78,"line":97},[76,2859,1260],{"class":229},[76,2861,2862],{"class":90}," genDefaultModel",[76,2864,1266],{"class":82},[76,2866,2867,2869,2871,2873],{"class":78,"line":107},[76,2868,2267],{"class":1271},[76,2870,1275],{"class":229},[76,2872,1461],{"class":90},[76,2874,256],{"class":82},[76,2876,2877,2880,2882,2884],{"class":78,"line":117},[76,2878,2879],{"class":1271},"  value",[76,2881,1275],{"class":229},[76,2883,1278],{"class":797},[76,2885,256],{"class":82},[76,2887,2888,2891,2893,2895],{"class":78,"line":133},[76,2889,2890],{"class":1271},"  modifiers",[76,2892,1275],{"class":229},[76,2894,2036],{"class":229},[76,2896,2897],{"class":90},"ASTModifiers\n",[76,2899,2900,2902,2904,2906,2908],{"class":78,"line":143},[76,2901,1295],{"class":82},[76,2903,1275],{"class":229},[76,2905,2036],{"class":229},[76,2907,2306],{"class":797},[76,2909,1303],{"class":82},[76,2911,2912,2914,2916,2918],{"class":78,"line":153},[76,2913,1308],{"class":229},[76,2915,216],{"class":797},[76,2917,1252],{"class":229},[76,2919,2365],{"class":82},[76,2921,2922],{"class":78,"line":178},[76,2923,1575],{"emptyLinePlaceholder":1574},[76,2925,2926],{"class":78,"line":187},[76,2927,2928],{"class":1237},"  \u002F\u002F warn if v-bind:value conflicts with v-model\n",[76,2930,2931],{"class":78,"line":209},[76,2932,2933],{"class":1237},"  \u002F\u002F except for inputs with v-bind:type\n",[76,2935,2936],{"class":78,"line":226},[76,2937,2938],{"class":1237},"  \u002F\u002F value与v-model冲突则发出警告\n",[76,2940,2941,2943,2945,2947,2949,2951],{"class":78,"line":247},[76,2942,1333],{"class":229},[76,2944,2376],{"class":82},[76,2946,2379],{"class":797},[76,2948,2382],{"class":229},[76,2950,2385],{"class":167},[76,2952,1345],{"class":82},[76,2954,2955,2957,2959,2961,2964,2967,2970,2973,2975,2978],{"class":78,"line":259},[76,2956,1920],{"class":229},[76,2958,2325],{"class":797},[76,2960,1252],{"class":229},[76,2962,2963],{"class":82}," el.attrsMap[",[76,2965,2966],{"class":167},"'v-bind:value'",[76,2968,2969],{"class":82},"] ",[76,2971,2972],{"class":229},"||",[76,2974,2963],{"class":82},[76,2976,2977],{"class":167},"':value'",[76,2979,2477],{"class":82},[76,2981,2982,2984,2987,2989,2991,2994,2996,2998,3000,3003],{"class":78,"line":265},[76,2983,1920],{"class":229},[76,2985,2986],{"class":797}," typeBinding",[76,2988,1252],{"class":229},[76,2990,2963],{"class":82},[76,2992,2993],{"class":167},"'v-bind:type'",[76,2995,2969],{"class":82},[76,2997,2972],{"class":229},[76,2999,2963],{"class":82},[76,3001,3002],{"class":167},"':type'",[76,3004,2477],{"class":82},[76,3006,3007,3009,3012,3015,3018],{"class":78,"line":274},[76,3008,1941],{"class":229},[76,3010,3011],{"class":82}," (value ",[76,3013,3014],{"class":229},"&&",[76,3016,3017],{"class":229}," !",[76,3019,3020],{"class":82},"typeBinding) {\n",[76,3022,3023,3026,3029,3031,3033,3035,3037,3039,3042,3044],{"class":78,"line":280},[76,3024,3025],{"class":229},"      const",[76,3027,3028],{"class":797}," binding",[76,3030,1252],{"class":229},[76,3032,2963],{"class":82},[76,3034,2966],{"class":167},[76,3036,2969],{"class":82},[76,3038,1519],{"class":229},[76,3040,3041],{"class":167}," 'v-bind:value'",[76,3043,2072],{"class":229},[76,3045,3046],{"class":167}," ':value'\n",[76,3048,3049,3051],{"class":78,"line":289},[76,3050,2428],{"class":90},[76,3052,2431],{"class":82},[76,3054,3055,3058,3061,3064,3066,3069],{"class":78,"line":295},[76,3056,3057],{"class":167},"        `${",[76,3059,3060],{"class":82},"binding",[76,3062,3063],{"class":167},"}=\"${",[76,3065,396],{"class":82},[76,3067,3068],{"class":167},"}\" conflicts with v-model on the same element `",[76,3070,2459],{"class":229},[76,3072,3073,3076],{"class":78,"line":301},[76,3074,3075],{"class":167},"        'because the latter already expands to a value binding internally'",[76,3077,256],{"class":82},[76,3079,3080],{"class":78,"line":307},[76,3081,3082],{"class":82},"        el.rawAttrsMap[binding]\n",[76,3084,3085],{"class":78,"line":313},[76,3086,2482],{"class":82},[76,3088,3089],{"class":78,"line":319},[76,3090,1975],{"class":82},[76,3092,3093],{"class":78,"line":325},[76,3094,1361],{"class":82},[76,3096,3097],{"class":78,"line":334},[76,3098,1575],{"emptyLinePlaceholder":1574},[76,3100,3101],{"class":78,"line":849},[76,3102,3103],{"class":1237},"  \u002F\u002F 修饰符处理\n",[76,3105,3106,3108,3111,3114,3116,3119,3121,3123,3126,3128,3131,3133],{"class":78,"line":1089},[76,3107,1308],{"class":229},[76,3109,3110],{"class":82}," { ",[76,3112,3113],{"class":797},"lazy",[76,3115,1552],{"class":82},[76,3117,3118],{"class":797},"number",[76,3120,1552],{"class":82},[76,3122,1322],{"class":797},[76,3124,3125],{"class":82}," } ",[76,3127,164],{"class":229},[76,3129,3130],{"class":82}," modifiers ",[76,3132,2972],{"class":229},[76,3134,3135],{"class":82}," {}\n",[76,3137,3138,3140,3143,3145,3147,3150,3152,3154,3156],{"class":78,"line":1094},[76,3139,1308],{"class":229},[76,3141,3142],{"class":797}," needCompositionGuard",[76,3144,1252],{"class":229},[76,3146,3017],{"class":229},[76,3148,3149],{"class":82},"lazy ",[76,3151,3014],{"class":229},[76,3153,2416],{"class":82},[76,3155,1339],{"class":229},[76,3157,3158],{"class":167}," 'range'\n",[76,3160,3161,3163,3166,3168],{"class":78,"line":1109},[76,3162,1308],{"class":229},[76,3164,3165],{"class":797}," event",[76,3167,1252],{"class":229},[76,3169,3170],{"class":82}," lazy\n",[76,3172,3173,3176],{"class":78,"line":1118},[76,3174,3175],{"class":229},"    ?",[76,3177,3178],{"class":167}," 'change'\n",[76,3180,3181,3184,3186,3188],{"class":78,"line":1123},[76,3182,3183],{"class":229},"    :",[76,3185,2416],{"class":82},[76,3187,2407],{"class":229},[76,3189,3158],{"class":167},[76,3191,3192,3195],{"class":78,"line":1130},[76,3193,3194],{"class":229},"      ?",[76,3196,3197],{"class":797}," RANGE_TOKEN\n",[76,3199,3200,3203],{"class":78,"line":1135},[76,3201,3202],{"class":229},"      :",[76,3204,3205],{"class":167}," 'input'\n",[76,3207,3208],{"class":78,"line":1142},[76,3209,1575],{"emptyLinePlaceholder":1574},[76,3211,3212,3214,3217,3219],{"class":78,"line":1147},[76,3213,1827],{"class":229},[76,3215,3216],{"class":82}," valueExpression ",[76,3218,164],{"class":229},[76,3220,3221],{"class":167}," '$event.target.value'\n",[76,3223,3224,3226],{"class":78,"line":1152},[76,3225,1333],{"class":229},[76,3227,3228],{"class":82}," (trim) {\n",[76,3230,3231,3234,3236],{"class":78,"line":1158},[76,3232,3233],{"class":82},"    valueExpression ",[76,3235,164],{"class":229},[76,3237,3238],{"class":167}," `$event.target.value.trim()`\n",[76,3240,3241],{"class":78,"line":1163},[76,3242,1361],{"class":82},[76,3244,3245,3247],{"class":78,"line":1168},[76,3246,1333],{"class":229},[76,3248,3249],{"class":82}," (number) {\n",[76,3251,3252,3254,3256,3259,3261],{"class":78,"line":1173},[76,3253,3233],{"class":82},[76,3255,164],{"class":229},[76,3257,3258],{"class":167}," `_n(${",[76,3260,2826],{"class":82},[76,3262,3263],{"class":167},"})`\n",[76,3265,3266],{"class":78,"line":1182},[76,3267,1361],{"class":82},[76,3269,3270],{"class":78,"line":2685},[76,3271,1575],{"emptyLinePlaceholder":1574},[76,3273,3274,3276,3279,3281,3284],{"class":78,"line":2692},[76,3275,1827],{"class":229},[76,3277,3278],{"class":82}," code ",[76,3280,164],{"class":229},[76,3282,3283],{"class":90}," genAssignmentCode",[76,3285,3286],{"class":82},"(value, valueExpression)\n",[76,3288,3289,3291],{"class":78,"line":2711},[76,3290,1333],{"class":229},[76,3292,3293],{"class":82}," (needCompositionGuard) {\n",[76,3295,3296,3299,3301,3304,3306],{"class":78,"line":2719},[76,3297,3298],{"class":82},"    code ",[76,3300,164],{"class":229},[76,3302,3303],{"class":167}," `if($event.target.composing)return;${",[76,3305,16],{"class":82},[76,3307,3308],{"class":167},"}`\n",[76,3310,3311],{"class":78,"line":2740},[76,3312,1361],{"class":82},[76,3314,3315],{"class":78,"line":2748},[76,3316,1575],{"emptyLinePlaceholder":1574},[76,3318,3319,3322,3325,3328,3330,3333,3335,3338],{"class":78,"line":2762},[76,3320,3321],{"class":90},"  addProp",[76,3323,3324],{"class":82},"(el, ",[76,3326,3327],{"class":167},"'value'",[76,3329,1552],{"class":82},[76,3331,3332],{"class":167},"`(${",[76,3334,396],{"class":82},[76,3336,3337],{"class":167},"})`",[76,3339,3340],{"class":82},")\n",[76,3342,3343,3346,3349,3352,3354,3357],{"class":78,"line":2770},[76,3344,3345],{"class":90},"  addHandler",[76,3347,3348],{"class":82},"(el, event, code, ",[76,3350,3351],{"class":797},"null",[76,3353,1552],{"class":82},[76,3355,3356],{"class":797},"true",[76,3358,3340],{"class":82},[76,3360,3361,3363,3366,3368],{"class":78,"line":2780},[76,3362,1333],{"class":229},[76,3364,3365],{"class":82}," (trim ",[76,3367,2972],{"class":229},[76,3369,3370],{"class":82}," number) {\n",[76,3372,3373,3376,3378,3381,3383,3386],{"class":78,"line":2786},[76,3374,3375],{"class":90},"    addHandler",[76,3377,3324],{"class":82},[76,3379,3380],{"class":167},"'blur'",[76,3382,1552],{"class":82},[76,3384,3385],{"class":167},"'$forceUpdate()'",[76,3387,3340],{"class":82},[76,3389,3390],{"class":78,"line":2791},[76,3391,1361],{"class":82},[76,3393,3394],{"class":78,"line":2796},[76,3395,1569],{"class":82},[76,3397,3398],{"class":78,"line":2802},[76,3399,1575],{"emptyLinePlaceholder":1574},[76,3401,3402],{"class":78,"line":2809},[76,3403,3404],{"class":1237},"\u002F\u002F dev\u002Fsrc\u002Fcompiler\u002Fdirectives\u002Fmodel.js line 36\n",[76,3406,3408,3410,3412,3414],{"class":78,"line":3407},55,[76,3409,1243],{"class":229},[76,3411,1447],{"class":229},[76,3413,3283],{"class":90},[76,3415,1266],{"class":82},[76,3417,3419,3421,3423,3425],{"class":78,"line":3418},56,[76,3420,2879],{"class":1271},[76,3422,1275],{"class":229},[76,3424,1278],{"class":797},[76,3426,256],{"class":82},[76,3428,3430,3433,3435],{"class":78,"line":3429},57,[76,3431,3432],{"class":1271},"  assignment",[76,3434,1275],{"class":229},[76,3436,3437],{"class":797}," string\n",[76,3439,3441,3443,3445,3447],{"class":78,"line":3440},58,[76,3442,1295],{"class":82},[76,3444,1275],{"class":229},[76,3446,1278],{"class":797},[76,3448,1303],{"class":82},[76,3450,3452,3454,3457,3459,3462],{"class":78,"line":3451},59,[76,3453,1308],{"class":229},[76,3455,3456],{"class":797}," res",[76,3458,1252],{"class":229},[76,3460,3461],{"class":90}," parseModel",[76,3463,3464],{"class":82},"(value)\n",[76,3466,3468,3470,3473,3475,3478],{"class":78,"line":3467},60,[76,3469,1333],{"class":229},[76,3471,3472],{"class":82}," (res.key ",[76,3474,2407],{"class":229},[76,3476,3477],{"class":797}," null",[76,3479,1345],{"class":82},[76,3481,3483,3485,3488,3490,3493,3496],{"class":78,"line":3482},61,[76,3484,2193],{"class":229},[76,3486,3487],{"class":167}," `${",[76,3489,396],{"class":82},[76,3491,3492],{"class":167},"}=${",[76,3494,3495],{"class":82},"assignment",[76,3497,3308],{"class":167},[76,3499,3501,3503,3505],{"class":78,"line":3500},62,[76,3502,2531],{"class":82},[76,3504,2534],{"class":229},[76,3506,1303],{"class":82},[76,3508,3510,3512,3515,3518,3520,3523,3526,3528,3530,3533,3535,3537],{"class":78,"line":3509},63,[76,3511,2193],{"class":229},[76,3513,3514],{"class":167}," `$set(${",[76,3516,3517],{"class":82},"res",[76,3519,2008],{"class":167},[76,3521,3522],{"class":82},"exp",[76,3524,3525],{"class":167},"}, ${",[76,3527,3517],{"class":82},[76,3529,2008],{"class":167},[76,3531,3532],{"class":82},"key",[76,3534,3525],{"class":167},[76,3536,3495],{"class":82},[76,3538,3263],{"class":167},[76,3540,3542],{"class":78,"line":3541},64,[76,3543,1361],{"class":82},[76,3545,3547],{"class":78,"line":3546},65,[76,3548,1569],{"class":82},[44,3550,3551],{"id":3551},"每日一题",[67,3553,3558],{"className":3554,"code":3556,"language":3557},[3555],"language-text","https:\u002F\u002Fgithub.com\u002FWindrunnerMax\u002FEveryDay\n","text",[16,3559,3556],{"__ignoreMap":72},[44,3561,3562],{"id":3562},"参考",[67,3564,3567],{"className":3565,"code":3566,"language":3557},[3555],"https:\u002F\u002Fcn.vuejs.org\u002Fv2\u002Fapi\u002F#v-model\nhttps:\u002F\u002Fwww.jianshu.com\u002Fp\u002F19bb4912c62a\nhttps:\u002F\u002Fwww.jianshu.com\u002Fp\u002F0d089f770ab2\nhttps:\u002F\u002Fcn.vuejs.org\u002Fv2\u002Fguide\u002Fforms.html\nhttps:\u002F\u002Fjuejin.im\u002Fpost\u002F6844903784963899400\nhttps:\u002F\u002Fjuejin.im\u002Fpost\u002F6844903999414485005\nhttps:\u002F\u002Fsegmentfault.com\u002Fa\u002F1190000021516035\nhttps:\u002F\u002Fsegmentfault.com\u002Fa\u002F1190000015848976\nhttps:\u002F\u002Fgithub.com\u002Fhaizlin\u002Ffe-interview\u002Fissues\u002F560\nhttps:\u002F\u002Fustbhuangyi.github.io\u002Fvue-analysis\u002Fv2\u002Fextend\u002Fv-model.html\n",[16,3568,3566],{"__ignoreMap":72},[3570,3571,3572],"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}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":72,"searchDepth":97,"depth":97,"links":3574},[3575,3576,3577,3578],{"id":46,"depth":97,"text":46},{"id":1191,"depth":97,"text":1191},{"id":3551,"depth":97,"text":3551},{"id":3562,"depth":97,"text":3562},"v-model是Vue提供的指令，其主要作用是可以实现在表单\u003Cinput>、\u003Ctextarea>及\u003Cselect>等元素以及组件上创建双向数据绑定，其本质上就是一种语法糖，既可以直接定义在原生表单元素，也可以支持自定义组件。在组件的实现中，可以配置子组件接收的prop名称，以及派发的事件名称实现组件内的v-model双向绑定。","md",{},"\u002Fvue\u002Fv-model数据绑定分析",{"title":5,"description":3579},"Vue\u002Fv-model数据绑定分析","BKeEi688mBYuUZ3QfbylJkhw6DOEsTR2eXkf8UO49C4",1791042468083]