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