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