代码拉取完成，页面将自动刷新
var arr = [{"audit_flag": 0, "corp_tag": ["58"], "date": "Fri, 19 Jun 2020 16:20:44 GMT", "favorite_num": 22, "qid": 731, "qtype": "short_answer", "short_answer": {"analysis": "**\u533a\u522b**\n\ncomputed\u5c5e\u6027\u662fvue\u7684\u8ba1\u7b97\u5c5e\u6027\uff0c\u662f\u6570\u636e\u5c42\u5230\u89c6\u56fe\u5c42\u7684\u6570\u636e\u8f6c\u5316\u6620\u5c04\uff1b\n\n\u8ba1\u7b97\u5c5e\u6027\u662f\u57fa\u4e8e\u4ed6\u4eec\u7684\u4f9d\u8d56\u8fdb\u884c\u7f13\u5b58\u7684\uff0c\u53ea\u6709\u5728\u76f8\u5173\u4f9d\u8d56\u53d1\u751f\u6539\u53d8\u65f6\uff0c\u4ed6\u4eec\u624d\u4f1a\u91cd\u65b0\u6c42\u503c\uff0c\u4e5f\u5c31\u662f\u8bf4\uff0c\u53ea\u8981\u4ed6\u7684\u4f9d\u8d56\u6ca1\u6709\u53d1\u751f\u53d8\u5316\uff0c\u90a3\u4e48\u6bcf\u6b21\u8bbf\u95ee\u7684\u65f6\u5019\u8ba1\u7b97\u5c5e\u6027\u90fd\u4f1a\u7acb\u5373\u8fd4\u56de\u4e4b\u524d\u7684\u8ba1\u7b97\u7ed3\u679c\uff0c\u4e0d\u518d\u6267\u884c\u51fd\u6570\uff1b\n\n- computed\u662f\u54cd\u5e94\u5f0f\u7684\uff0cmethods\u5e76\u975e\u54cd\u5e94\u5f0f\u3002\n- \u8c03\u7528\u65b9\u5f0f\u4e0d\u4e00\u6837\uff0ccomputed\u5b9a\u4e49\u7684\u6210\u5458\u50cf\u5c5e\u6027\u4e00\u6837\u8bbf\u95ee\uff0cmethods\u5b9a\u4e49\u7684\u6210\u5458\u5fc5\u987b\u4ee5\u51fd\u6570\u5f62\u5f0f\u8c03\u7528\u3002\n- computed\u662f\u5e26\u7f13\u5b58\u7684\uff0c\u53ea\u6709\u4f9d\u8d56\u6570\u636e\u53d1\u751f\u6539\u53d8\uff0c\u624d\u4f1a\u91cd\u65b0\u8fdb\u884c\u8ba1\u7b97\uff0c\u800cmethods\u91cc\u7684\u51fd\u6570\u5728\u6bcf\u6b21\u8c03\u7528\u65f6\u90fd\u8981\u6267\u884c\u3002\n- computed\u4e2d\u7684\u6210\u5458\u53ef\u4ee5\u53ea\u5b9a\u4e49\u4e00\u4e2a\u51fd\u6570\u4f5c\u4e3a\u53ea\u8bfb\u5c5e\u6027\uff0c\u4e5f\u53ef\u4ee5\u5b9a\u4e49get/set\u53d8\u6210\u53ef\u8bfb\u5199\u5c5e\u6027\uff0c\u8fd9\u70b9\u662fmethods\u4e2d\u7684\u6210\u5458\u505a\u4e0d\u5230\u7684\n- computed\u4e0d\u652f\u6301\u5f02\u6b65\uff0c\u5f53computed\u5185\u6709\u5f02\u6b65\u64cd\u4f5c\u65f6\u65e0\u6548\uff0c\u65e0\u6cd5\u76d1\u542c\u6570\u636e\u7684\u53d8\u5316\n\n> \u5982\u679c\u58f0\u660e\u7684\u8ba1\u7b97\u5c5e\u6027\u8ba1\u7b97\u91cf\u975e\u5e38\u5927\u7684\u65f6\u5019\uff0c\u800c\u4e14\u8bbf\u95ee\u91cf\u6b21\u6570\u975e\u5e38\u591a\uff0c\u6539\u53d8\u7684\u65f6\u673a\u5374\u5f88\u5c0f\uff0c\u90a3\u5c31\u9700\u8981\u7528\u5230computed\uff1b\u7f13\u5b58\u4f1a\u8ba9\u6211\u4eec\u51cf\u5c11\u5f88\u591a\u8ba1\u7b97\u91cf\n\n\n", "answer": "", "biz_type": 1, "qid": 731, "subject": "", "title": "\u8ba1\u7b97\u5c5e\u6027\u548c\u666e\u901a\u5c5e\u6027\u7684\u533a\u522b"}, "tech_tag": ["Vue"], "uid": 0, "uname": ""}, {"audit_flag": 0, "corp_tag": ["\u7231\u8303\u513f"], "date": "Fri, 19 Jun 2020 16:20:44 GMT", "favorite_num": 45, "qid": 703, "qtype": "short_answer", "short_answer": {"analysis": "#### 1.\u539f\u751f\u65b9\u5f0f\u5b9e\u73b0\n\n- **html**\n\n```html\n<body>\n <button id=\"expire1\">\u8fc7\u671f\u8bbe\u7f6e(\u66b4\u529b\u6cd5)</button>\n <button id=\"expire2\">\u8fc7\u671f\u8bbe\u7f6e(innerHTMl)</button>\n <ul id=\"wrap\"></ul>\n</body>\n```\n\n- **JavaScript**\n\n```js\n//\u751f\u6210\u5927\u91cfdom \nlet start = new Date().getTime()\nlet $ul = document.getElementById(\"wrap\");\n\nlet el = document.createDocumentFragment()\nlet allKeys = []\nfor(var i = 0; i < 1000; i++){\n let li = document.createElement('li');\n li.dataset.key = i //key\n li.innerHTML = i\n el.appendChild(li)\n allKeys.push(i)\n}\n$ul.appendChild(el)\n\n\n// \u751f\u6210\u8fc7\u671f\u9879 \u6a21\u62df\u670d\u52a1\u7aef\u751f\u6210\u7684\u6570\u636e\nfunction getExpireKeys(){\n let keys = []\n while(keys.length < 100){\n let randomKey = Math.floor(Math.random() * 1000)\n if(keys.indexOf(randomKey) === -1){\n keys.push(randomKey)\n }else{\n continue\n }\n }\n return keys\n}\n\n// \u66b4\u529b\u9879 \u9010\u9879\u904d\u5386\ndocument.getElementById('expire1').onclick = function(){\n let expireKeys = getExpireKeys()\n let children = $ul.children;\n let start = Date.now()\n for (let i = 0; i < expireKeys.length; i++) {\n const element = document.querySelector(`[data-key=\"${expireKeys[i]}\"]`);\n element.innerHTML = element.innerHTML + '\u5df2\u8fc7\u671f'\n }\n}\n\n//\u6a21\u677f\u5b57\u7b26\u4e32 innerHtml\u66ff\u6362\ndocument.getElementById('expire2').onclick = function(){\n let expireKeys = getExpireKeys()\n const item = []\n for (let i = 0; i < allKeys.length; i++) {\n item.push( `<li>${allKeys[i]} ${expireKeys.indexOf(allKeys[i]) !== -1 ? '\u5df2\u8fc7\u671f' : ''}</li>`)\n }\n $ul.innerHTML = item.join('')\n}\n```\n\n#### 2.Vue\u65b9\u5f0f\u5904\u7406\n\n```js\n// template\n<button @click=setExpire>\u8fc7\u671f</button>\n<ul>\n <li v-for=\"item in allKeys\" :key=\"item.value\">\n {{item.value}}\n {{item.expire ? '\u5df2\u8fc7\u671f' : ''}}\n </li>\n</ul>\n\n// script\n<script>\nexport default {\n data() {\n return {\n allKeys: [], //\u6240\u6709\u9879\n expireKeys: [] //\u8fc7\u671f\u9879\n }\n },\n created(){\n for(var i = 0; i < 1000; i++){\n this.allKeys.push({\n value: i,\n expire: false\n })\n }\n },\n methods: {\n setExpire(){\n let keys = this.getExpireKeys()\n for (let i = 0; i < this.allKeys.length; i++) {\n if(keys.indexOf(this.allKeys[i].value) !== -1){\n this.allKeys[i].expire = true\n }\n }\n },\n // \u751f\u6210\u8fc7\u671f\u9879 \u6a21\u62df\u670d\u52a1\u7aef\u751f\u6210\u7684\u6570\u636e\n getExpireKeys(){\n let keys = []\n while(keys.length < 100){\n let randomKey = Math.floor(Math.random() * 1000)\n if(keys.indexOf(randomKey) === -1){\n keys.push(randomKey)\n }else{\n continue\n }\n }\n return keys\n }\n },\n}\n</script>\n```\n", "answer": "", "biz_type": 1, "qid": 703, "subject": "```js\n/* \n a)\u5728\u4e0d\u4f7f\u7528vue\u3001react\u7684\u524d\u63d0\u4e0b\u5199\u4ee3\u7801\u89e3\u51b3\u4e00\u4e0b\u95ee\u9898\n \u4e00\u4e2aList\u9875\u9762\u4e0a\uff0c\u542b\u67091000\u4e2a\u6761\u76ee\u7684\u5f85\u529e\u5217\u8868\uff0c\u73b0\u5176\u4e2d100\u9879\u5728\u540c\u4e00\u65f6\u95f4\u8fbe\u5230\u4e86\u8fc7\u671f\u65f6\u95f4\uff0c\u9700\u8981\u5728\u5bf9\u5e94\u9879\u7684text-node\u91cc\u6dfb\u52a0\u201c\u5df2\u8fc7\u671f\u201d\u6587\u5b57\u3002\u9700\u8981\u5c3d\u53ef\u80fd\u51cf\u5c11dom\u91cd\u7ed8\u6b21\u6570\u4ee5\u63d0\u5347\u6027\u80fd\u3002\n b)\u5c1d\u8bd5\u4f7f\u7528vue\u6216react\u89e3\u51b3\u4e0a\u8ff0\u95ee\u9898\n*/\n```\n", "title": "\u6309\u8981\u6c42\u5b8c\u6210\u9898\u76ee"}, "tech_tag": ["JavaScript", "Vue", "React", "\u7f16\u7a0b\u9898"], "uid": 0, "uname": ""}, {"audit_flag": 0, "corp_tag": ["\u9ad8\u601d\u6559\u80b2", "\u5b89\u5c45\u5ba2"], "date": "Fri, 19 Jun 2020 16:20:44 GMT", "favorite_num": 41, "qid": 726, "qtype": "short_answer", "short_answer": {"analysis": "#### 1.\u539f\u7406\n\n\n\nView\u7684\u53d8\u5316\u80fd\u5b9e\u65f6\u8ba9Model\u53d1\u751f\u53d8\u5316\uff0c\u800cModel\u7684\u53d8\u5316\u4e5f\u80fd\u5b9e\u65f6\u66f4\u65b0\u5230View\u3002\n\nVue\u91c7\u7528\u6570\u636e\u52ab\u6301&\u53d1\u5e03-\u8ba2\u9605\u6a21\u5f0f\u7684\u65b9\u5f0f\uff0c\u901a\u8fc7ES5\u63d0\u4f9b\u7684 Object.defineProperty() \u65b9\u6cd5\u6765\u52ab\u6301\uff08\u76d1\u63a7\uff09\u5404\u5c5e\u6027\u7684 getter \u3001setter \uff0c\u5e76\u5728\u6570\u636e\uff08\u5bf9\u8c61\uff09\u53d1\u751f\u53d8\u52a8\u65f6\u901a\u77e5\u8ba2\u9605\u8005\uff0c\u89e6\u53d1\u76f8\u5e94\u7684\u76d1\u542c\u56de\u8c03\u3002\u5e76\u4e14\uff0c\u7531\u4e8e\u662f\u5728\u4e0d\u540c\u7684\u6570\u636e\u4e0a\u89e6\u53d1\u540c\u6b65\uff0c\u53ef\u4ee5\u7cbe\u786e\u7684\u5c06\u53d8\u66f4\u53d1\u9001\u7ed9\u7ed1\u5b9a\u7684\u89c6\u56fe\uff0c\u800c\u4e0d\u662f\u5bf9\u6240\u6709\u7684\u6570\u636e\u90fd\u6267\u884c\u4e00\u6b21\u68c0\u6d4b\u3002\u8981\u5b9e\u73b0Vue\u4e2d\u7684\u53cc\u5411\u6570\u636e\u7ed1\u5b9a\uff0c\u5927\u81f4\u53ef\u4ee5\u5212\u5206\u4e09\u4e2a\u6a21\u5757\uff1aObserver\u3001Compile\u3001Watcher\uff0c\u5982\u56fe\uff1a\n\n\n\n- **Observer \u6570\u636e\u76d1\u542c\u5668**,\u8d1f\u8d23\u5bf9\u6570\u636e\u5bf9\u8c61\u7684\u6240\u6709\u5c5e\u6027\u8fdb\u884c\u76d1\u542c\uff08\u6570\u636e\u52ab\u6301\uff09\uff0c\u76d1\u542c\u5230\u6570\u636e\u53d1\u751f\u53d8\u5316\u540e\u901a\u77e5\u8ba2\u9605\u8005\u3002\n- **Compiler \u6307\u4ee4\u89e3\u6790\u5668**\uff0c\u626b\u63cf\u6a21\u677f\uff0c\u5e76\u5bf9\u6307\u4ee4\u8fdb\u884c\u89e3\u6790\uff0c\u7136\u540e\u7ed1\u5b9a\u6307\u5b9a\u4e8b\u4ef6\u3002\n- **Watcher \u8ba2\u9605\u8005**\uff0c\u5173\u8054Observer\u548cCompile\uff0c\u80fd\u591f\u8ba2\u9605\u5e76\u6536\u5230\u5c5e\u6027\u53d8\u52a8\u7684\u901a\u77e5\uff0c\u6267\u884c\u6307\u4ee4\u7ed1\u5b9a\u7684\u76f8\u5e94\u64cd\u4f5c\uff0c\u66f4\u65b0\u89c6\u56fe\u3002Update()\u662f\u5b83\u81ea\u8eab\u7684\u4e00\u4e2a\u65b9\u6cd5\uff0c\u7528\u4e8e\u6267\u884cCompile\u4e2d\u7ed1\u5b9a\u7684\u56de\u8c03\uff0c\u66f4\u65b0\u89c6\u56fe\u3002\n\n\u6a21\u677f\u6e32\u67d3\u89e3\u6790\u65f6watcher\u4f1a\u5bf9\u5e94\u7ed1\u5b9a\u6307\u4ee4(\u4e00\u5bf9\u4e00)\u3002\n\n\u6b64\u65f6\u4f1a\u901a\u8fc7\u8c03\u7528\u8ba2\u9605\u8005watcher\u521d\u59cb\u5316(watcher\u4e2dget()\u65b9\u6cd5)\u53bb\u89e6\u53d1\u5bf9\u5e94\u5c5e\u6027\u5728\u53d1\u5e03\u8005observer\u91cc (object.defineProperty)\u7684getter,observer\u4f1a\u5224\u65ad\u662f\u4e0d\u662f\u901a\u8fc7watcher\u521d\u59cb\u5316\u8c03\u7528\u7684\uff08Dep.target,\u5b9e\u4f8b\u5316\u4e4b\u540e\u4f1a\u6e05\u7a7a\uff09\uff0c\u53ea\u6709\u662f\u624d\u4f1a\u901a\u8fc7dep\u7c7b \u4f9d\u8d56\u6536\u96c6\u3002\n\nobserver\u901a\u8fc7depend\u901a\u77e5Dep\u7c7b\u6536\u96c6(addDep\u65b9\u6cd5\uff0c\u5728watcher\u7c7b\u4e2d\uff0c\u4f1a\u4f20\u5165\u5f53\u524dDep\u5b9e\u4f8b\u8c03\u7528\u81ea\u8eab)\u5f53\u524d\u8be5\u8ba2\u9605\u8005(watcher)\u4e2d\u7684\u89e6\u53d1\u66f4\u65b0\u7684 \u65b9\u6cd5\uff0c\u540c\u65f6\u7b2c\u4e00\u6b21\u521d\u59cb\u5316watcher.update()\u521d\u59cb\u5316\u89c6\u56fe\u3002\u6b64\u540e\u6bcf\u6b21\u7684\u6570\u636e\u66f4\u65b0\u90fd\u4f1a\u901a\u8fc7observer\u4e2d\u7684setter\u53bb\u89e6\u53d1dep\u7c7b\u4e2d\u7684\u56de\u8c03update\u6267\u884c\u6536\u96c6\u4f9d\u8d56 \u7684\u6240\u6709\u65b9\u6cd5\u66f4\u65b0\u8ba2\u9605\u8005\u4e2d\u7684\u72b6\u6001\u540c\u65f6\u66f4\u65b0\u89c6\u56fe\u3002\n\nobserver\u5728\u5904\u7406\u5bf9\u8c61\u548c\u6570\u7ec4\u7684\u65f6\u5019\uff0c\u5982\u679c\u662f\u6570\u7ec4\uff0c\u5e76\u4e14\u8c03\u7528\u7684\u65b9\u6cd5\u4f1a\u6539\u53d8\u6570\u7ec4\u957f\u5ea6\uff0c\u5219\u4f1a\u91cd\u65b0\u589e\u52a0\u7d22\u5f15\u4e4b\u540e\u66f4 \u65b0\u6570\u7ec4\uff0c\u8fdb\u884c\u91cd\u65b0\u76d1\u542c\u3002(\u56e0\u4e3a\u8c03\u7528\u6570\u7ec4\u539f\u751fAPi\u53ef\u80fd\u591a\u6b21\u89e6\u53d1getter setter \u4e14\u7d22\u5f15\u4e0d\u4f1a\u53d8)\uff0c\u5982\u679c\u662f\u5bf9\u8c61\u5219\u901a\u8fc7\u5bf9\u8c61\u7684getter\u83b7\u53d6\u503c\u548csetter\u66f4\u65b0\u503c.\n\n\n#### 2.\u7248\u672c\u6bd4\u8f83\n\nvue\u662f\u57fa\u4e8e\u4f9d\u8d56\u6536\u96c6\u7684\u53cc\u5411\u7ed1\u5b9a\uff1b\n\n3.0\u4e4b\u524d\u7684\u7248\u672c\u4f7f\u7528 Object.defineProperty\uff0c3.0\u65b0\u7248\u4f7f\u7528 Proxy\n\n**1\uff09\u57fa\u4e8e \u6570\u636e\u52ab\u6301/\u4f9d\u8d56\u6536\u96c6 \u7684\u53cc\u5411\u7ed1\u5b9a\u7684\u4f18\u70b9**\n\n- \u4e0d\u9700\u8981\u663e\u793a\u7684\u8c03\u7528\uff0cVue \u5229\u7528\u6570\u636e\u52ab\u6301+\u53d1\u5e03\u8ba2\u9605\uff0c\u53ef\u4ee5\u76f4\u63a5\u901a\u77e5\u53d8\u5316\u5e76\u4e14\u9a71\u52a8\u89c6\u56fe\n- \u76f4\u63a5\u5f97\u5230\u7cbe\u786e\u7684\u53d8\u5316\u6570\u636e\uff0c\u52ab\u6301\u4e86\u5c5e\u6027setter\uff0c\u5f53\u5c5e\u6027\u503c\u6539\u53d8\u6211\u4eec\u53ef\u4ee5\u7cbe\u786e\u7684\u83b7\u53d6\u53d8\u5316\u7684\u5185\u5bb9 newVal\uff0c\u4e0d\u9700\u8981\u989d\u5916\u7684 diff \u64cd\u4f5c\n\n**2\uff09object.defineProperty\u7684\u7f3a\u70b9**\n\n- \u4e0d\u80fd\u76d1\u542c\u6570\u7ec4\uff1b\u56e0\u4e3a\u6570\u7ec4\u6ca1\u6709getter\u548csetter\uff0c\u56e0\u4e3a\u6570\u7ec4\u957f\u5ea6\u4e0d\u786e\u5b9a\uff0c\u5982\u679c\u592a\u957f\u6027\u80fd\u8d1f\u62c5\u592a\u5927\u3002\n- \u53ea\u80fd\u76d1\u542c\u5c5e\u6027\uff0c\u800c\u4e0d\u662f\u6574\u4e2a\u5bf9\u8c61\uff1b\u9700\u8981\u904d\u5386\u5c5e\u6027\uff1b\n- \u53ea\u80fd\u76d1\u542c\u5c5e\u6027\u53d8\u5316\uff0c\u4e0d\u80fd\u76d1\u542c\u5c5e\u6027\u7684\u5220\u51cf\uff1b\n\n**3\uff09proxy\u597d\u5904**\n\n- \u53ef\u4ee5\u76d1\u542c\u6570\u7ec4\uff1b\n- \u76d1\u542c\u6574\u4e2a\u5bf9\u8c61\u4e0d\u662f\u5c5e\u6027\uff1b\n- 13\u79cd\u62e6\u622a\u65b9\u6cd5\uff0c\u5f3a\u5927\u5f88\u591a\uff1b\n- \u8fd4\u56de\u65b0\u5bf9\u8c61\u800c\u4e0d\u662f\u76f4\u63a5\u4fee\u6539\u539f\u5bf9\u8c61\uff0c\u66f4\u7b26\u5408immutable\uff1b\n\n**4\uff09proxy\u7f3a\u70b9**\n\n- \u517c\u5bb9\u6027\u4e0d\u597d\uff0c\u4e14\u65e0\u6cd5\u7528polyfill\u78e8\u5e73\uff1b\n\n", "answer": "", "biz_type": 1, "qid": 726, "subject": "", "title": "Vue \u53cc\u5411\u7ed1\u5b9a\u539f\u7406"}, "tech_tag": ["Vue"], "uid": 0, "uname": ""}, {"audit_flag": 0, "corp_tag": ["58"], "date": "Fri, 19 Jun 2020 16:20:44 GMT", "favorite_num": 13, "qid": 732, "qtype": "short_answer", "short_answer": {"analysis": "### \u81ea\u5b9a\u4e49\u6307\u4ee4\n\n\u5728 Vue2.0 \u4e2d\uff0c\u4ee3\u7801\u590d\u7528\u548c\u62bd\u8c61\u7684\u4e3b\u8981\u5f62\u5f0f\u662f\u7ec4\u4ef6\u3002\u7136\u800c\uff0c\u6709\u7684\u60c5\u51b5\u4e0b\uff0c\u4f60\u4ecd\u7136\u9700\u8981\u5bf9\u666e\u901a DOM \u5143\u7d20\u8fdb\u884c\u5e95\u5c42\u64cd\u4f5c\uff0c\u8fd9\u65f6\u5019\u5c31\u4f1a\u7528\u5230\u81ea\u5b9a\u4e49\u6307\u4ee4\u3002\n\n\u4e00\u822c\u9700\u8981\u5bf9DOM\u5143\u7d20\u8fdb\u884c\u5e95\u5c42\u64cd\u4f5c\u65f6\u4f7f\u7528\uff0c\u5c3d\u91cf\u53ea\u7528\u6765\u64cd\u4f5cDOM\u5c55\u793a\uff0c\u4e0d\u4fee\u6539\u5185\u90e8\u7684\u503c\u3002\u5f53\u4f7f\u7528\u81ea\u5b9a\u4e49\u6307\u4ee4\u76f4\u63a5\u4fee\u6539value\u503c\u65f6\u7ed1\u5b9av-model\u7684\u503c\u4e5f\u4e0d\u4f1a\u540c\u6b65\u66f4\u65b0\uff1b\u5982\u5fc5\u987b\u4fee\u6539\u53ef\u4ee5\u5728\u81ea\u5b9a\u4e49\u6307\u4ee4\u4e2d\u4f7f\u7528keydown\u4e8b\u4ef6\uff0c\u5728vue\u7ec4\u4ef6\u4e2d\u4f7f\u7528change\u4e8b\u4ef6\uff0c\u56de\u8c03\u4e2d\u4fee\u6539vue\u6570\u636e\uff1b\n\n\n**1.\u81ea\u5b9a\u4e49\u6307\u4ee4\u57fa\u672c\u5185\u5bb9**\n\n- \u5168\u5c40\u5b9a\u4e49\uff1aVue.directive(\"focus\",{})\n- \u5c40\u90e8\u5b9a\u4e49\uff1adirectives:{focus:{}}\n- \u94a9\u5b50\u51fd\u6570\uff1a\u6307\u4ee4\u5b9a\u4e49\u5bf9\u8c61\u63d0\u4f9b\u94a9\u5b50\u51fd\u6570\n - `bind`\uff1a\u53ea\u8c03\u7528\u4e00\u6b21\uff0c\u6307\u4ee4\u7b2c\u4e00\u6b21\u7ed1\u5b9a\u5230\u5143\u7d20\u65f6\u8c03\u7528\u3002\u5728\u8fd9\u91cc\u53ef\u4ee5\u8fdb\u884c\u4e00\u6b21\u6027\u7684\u521d\u59cb\u5316\u8bbe\u7f6e\u3002\n - `inserted`\uff1a\u88ab\u7ed1\u5b9a\u5143\u7d20\u63d2\u5165\u7236\u8282\u70b9\u65f6\u8c03\u7528\uff08\u4ec5\u4fdd\u8bc1\u7236\u8282\u70b9\u5b58\u5728\uff0c\u4f46\u4e0d\u4e00\u5b9a\u5df2\u88ab\u63d2\u5165\u6587\u6863\u4e2d\uff09\u3002\n - `update`\uff1a\u6240\u5728\u7ec4\u4ef6\u7684VNode\u66f4\u65b0\u65f6\u8c03\u7528\uff0c**\u4f46\u662f\u53ef\u80fd\u53d1\u751f\u5728\u5176\u5b50VNode\u66f4\u65b0\u4e4b\u524d\u8c03\u7528**\u3002\u6307\u4ee4\u7684\u503c\u53ef\u80fd\u53d1\u751f\u4e86\u6539\u53d8\uff0c\u4e5f\u53ef\u80fd\u6ca1\u6709\u3002\u4f46\u662f\u4f60\u53ef\u4ee5\u901a\u8fc7\u6bd4\u8f83\u66f4\u65b0\u524d\u540e\u7684\u503c\u6765\u5ffd\u7565\u4e0d\u5fc5\u8981\u7684\u6a21\u677f\u66f4\u65b0\u3002\n - `componentUpdate`\uff1a\u6307\u4ee4\u6240\u5728\u7ec4\u4ef6\u7684VNode\u53ca\u5176\u5b50VNode\u5168\u90e8\u66f4\u65b0\u540e\u8c03\u7528\u3002\n - `unbind`\uff1a\u53ea\u8c03\u7528\u4e00\u6b21\uff0c\u6307\u4ee4\u4e0e\u5143\u7d20\u89e3\u7ed1\u65f6\u8c03\u7528\u3002\n- \u94a9\u5b50\u51fd\u6570\u53c2\u6570\n - el\uff1a\u7ed1\u5b9a\u5143\u7d20\n - bing\uff1a\u6307\u4ee4\u6838\u5fc3\u5bf9\u8c61\uff0c\u63cf\u8ff0\u6307\u4ee4\u5168\u90e8\u4fe1\u606f\u5c5e\u6027\n - name\n - value\n - oldValue\n - expression\n - arg\n - modifers\n - vnode\uff1a\u865a\u62df\u8282\u70b9\n - oldVnode\uff1a\u4e0a\u4e00\u4e2a\u865a\u62df\u8282\u70b9\uff08\u66f4\u65b0\u94a9\u5b50\u51fd\u6570\u4e2d\u624d\u6709\u7528\uff09\n\n**2.\u4f7f\u7528\u573a\u666f**\n\n- \u666e\u901aDOM\u5143\u7d20\u8fdb\u884c**\u5e95\u5c42\u64cd\u4f5c**\u7684\u65f6\u5019\uff0c\u53ef\u4ee5\u4f7f\u7528\u81ea\u5b9a\u4e49\u6307\u4ee4\n- \u81ea\u5b9a\u4e49\u6307\u4ee4\u662f\u7528\u6765\u64cd\u4f5cDOM\u7684\u3002\u5c3d\u7ba1Vue\u63a8\u5d07\u6570\u636e\u9a71\u52a8\u89c6\u56fe\u7684\u7406\u5ff5\uff0c\u4f46\u5e76\u975e\u6240\u6709\u60c5\u51b5\u90fd\u9002\u5408\u6570\u636e\u9a71\u52a8\u3002\u81ea\u5b9a\u4e49\u6307\u4ee4\u5c31\u662f\u4e00\u79cd\u6709\u6548\u7684\u8865\u5145\u548c\u6269\u5c55\uff0c\u4e0d\u4ec5\u53ef\u7528\u4e8e\u5b9a\u4e49\u4efb\u4f55\u7684DOM\u64cd\u4f5c\uff0c\u5e76\u4e14\u662f\u53ef\u590d\u7528\u7684\u3002\n\n**3.\u4f7f\u7528\u6848\u4f8b**\n\n\u521d\u7ea7\u5e94\u7528\uff1a\n\n- \u9f20\u6807\u805a\u7126\n- \u4e0b\u62c9\u83dc\u5355\n- \u76f8\u5bf9\u65f6\u95f4\u8f6c\u6362\n- \u6eda\u52a8\u52a8\u753b\n\n\u9ad8\u7ea7\u5e94\u7528\uff1a\n\n- \u81ea\u5b9a\u4e49\u6307\u4ee4\u5b9e\u73b0\u56fe\u7247\u61d2\u52a0\u8f7d\n- \u81ea\u5b9a\u4e49\u6307\u4ee4\u96c6\u6210\u7b2c\u4e09\u65b9\u63d2\u4ef6\n\n", "answer": "", "biz_type": 1, "qid": 732, "subject": "", "title": "\u63cf\u8ff0\u4e0b\u81ea\u5b9a\u4e49\u6307\u4ee4(\u4f60\u662f\u600e\u4e48\u7528\u81ea\u5b9a\u4e49\u6307\u4ee4\u7684)"}, "tech_tag": ["Vue"], "uid": 0, "uname": ""}, {"audit_flag": 0, "corp_tag": ["\u9ad8\u601d\u6559\u80b2"], "date": "Fri, 19 Jun 2020 16:20:44 GMT", "favorite_num": 21, "qid": 724, "qtype": "short_answer", "short_answer": {"analysis": "### \u533a\u522b\n\n#### 1.\u6700\u91cd\u8981\u7684\u533a\u522b\n\n- vuex\u5b58\u50a8\u5728\u5185\u5b58\n- localstorage\u5219\u4ee5\u6587\u4ef6\u7684\u65b9\u5f0f\u5b58\u50a8\u5728\u672c\u5730\uff0clocalstorage\u53ea\u80fd\u5b58\u50a8\n\n> localstorage\u53ea\u80fd\u5b58\u50a8\u5b57\u7b26\u4e32\u7c7b\u578b\u7684\u6570\u636e\uff0c\u5b58\u50a8\u5bf9\u8c61\u9700\u8981JSON\u7684stringify\u548cparse\u65b9\u6cd5\u8fdb\u884c\u5904\u7406\u3002\n> \u8bfb\u53d6\u5185\u5b58\u6bd4\u8bfb\u53d6\u786c\u76d8\u901f\u5ea6\u8981\u5feb\n\n#### 2.\u5e94\u7528\u573a\u666f\n\n- Vuex \u662f\u4e00\u4e2a\u4e13\u4e3a Vue.js \u5e94\u7528\u7a0b\u5e8f\u5f00\u53d1\u7684\u72b6\u6001\u7ba1\u7406\u6a21\u5f0f\u3002\u5b83\u91c7\u7528\u96c6\u4e2d\u5f0f\u5b58\u50a8\u7ba1\u7406\u5e94\u7528\u7684\u6240\u6709\u7ec4\u4ef6\u7684\u72b6\u6001\uff0c \u5e76\u4ee5\u76f8\u5e94\u7684\u89c4\u5219\u4fdd\u8bc1\u72b6\u6001\u4ee5\u4e00\u79cd\u53ef\u9884\u6d4b\u7684\u65b9\u5f0f\u53d1\u751f\u53d8\u5316\u3002vuex\u7528\u4e8e\u7ec4\u4ef6\u4e4b\u95f4\u7684\u4f20\u503c\u3002\n- localstorage\u662f\u672c\u5730\u5b58\u50a8\uff0c\u662f\u5c06\u6570\u636e\u5b58\u50a8\u5230\u6d4f\u89c8\u5668\u7684\u65b9\u6cd5\uff0c\u4e00\u822c\u662f\u5728\u8de8\u9875\u9762\u4f20\u9012\u6570\u636e\u65f6\u4f7f\u7528\u3002\n- vuex\u80fd\u505a\u5230\u6570\u636e\u7684\u54cd\u5e94\u5f0f\uff0clocalstorage\u4e0d\u80fd\n\n#### 3.\u6c38\u4e45\u6027\n\n- \u5237\u65b0\u9875\u9762\u65f6vuex\u5b58\u50a8\u7684\u503c\u4f1a\u4e22\u5931\uff0clocalstorage\u4e0d\u4f1a\u3002\n\n> \u6ce8\uff1a\u5f88\u591a\u540c\u5b66\u89c9\u5f97\u7528localstorage\u53ef\u4ee5\u4ee3\u66ffvuex, \u5bf9\u4e8e\u4e0d\u53d8\u7684\u6570\u636e\u786e\u5b9e\u53ef\u4ee5\uff0c\u4f46\u662f\u5f53\u4e24\u4e2a\u7ec4\u4ef6\u5171\u7528\u4e00\u4e2a\u6570\u636e\u6e90\uff08\u5bf9\u8c61\u6216\u6570\u7ec4\uff09\u65f6\uff0c\u5982\u679c\u5176\u4e2d\u4e00\u4e2a\u7ec4\u4ef6\u6539\u53d8\u4e86\u8be5\u6570\u636e\u6e90\uff0c\u5e0c\u671b\u53e6\u4e00\u4e2a\u7ec4\u4ef6\u54cd\u5e94\u8be5\u53d8\u5316\u65f6\uff0clocalstorage\u65e0\u6cd5\u505a\u5230\uff0c\u539f\u56e0\u5c31\u662f\u533a\u522b1\u3002", "answer": "", "biz_type": 1, "qid": 724, "subject": "", "title": "Vuex \u548c localStorage \u7684\u533a\u522b"}, "tech_tag": ["Vue"], "uid": 0, "uname": ""}, {"audit_flag": 0, "corp_tag": ["58"], "date": "Fri, 19 Jun 2020 16:20:44 GMT", "favorite_num": 16, "qid": 730, "qtype": "short_answer", "short_answer": {"analysis": "### \u4e00\u3001Vue-Router\u5bfc\u822a\u5b88\u536b\n\n\u6709\u7684\u65f6\u5019\uff0c\u6211\u4eec\u9700\u8981\u901a\u8fc7\u8def\u7531\u6765\u8fdb\u884c\u4e00\u4e9b\u64cd\u4f5c\uff0c\u6bd4\u5982\u6700\u5e38\u89c1\u7684\u767b\u5f55\u6743\u9650\u9a8c\u8bc1\uff0c\u5f53\u7528\u6237\u6ee1\u8db3\u6761\u4ef6\u65f6\uff0c\u624d\u8ba9\u5176\u8fdb\u5165\u5bfc\u822a\uff0c\u5426\u5219\u5c31\u53d6\u6d88\u8df3\u8f6c\uff0c\u5e76\u8df3\u5230\u767b\u5f55\u9875\u9762\u8ba9\u5176\u767b\u5f55\u3002\n\n\u4e3a\u6b64\u6211\u4eec\u6709\u5f88\u591a\u79cd\u65b9\u6cd5\u53ef\u4ee5\u690d\u5165\u8def\u7531\u7684\u5bfc\u822a\u8fc7\u7a0b\uff1a\u5168\u5c40\u7684, \u5355\u4e2a\u8def\u7531\u72ec\u4eab\u7684, \u6216\u8005\u7ec4\u4ef6\u7ea7\u7684\n\n#### 1.\u5168\u5c40\u8def\u7531\u94a9\u5b50\n\nvue-router\u5168\u5c40\u6709\u4e09\u4e2a\u8def\u7531\u94a9\u5b50\uff1a\n\n- router.beforeEach \u5168\u5c40\u524d\u7f6e\u5b88\u536b \u8fdb\u5165\u8def\u7531\u4e4b\u524d\n- router.beforeResolve \u5168\u5c40\u89e3\u6790\u5b88\u536b(2.5.0+) \u5728beforeRouteEnter\u8c03\u7528\u4e4b\u540e\u8c03\u7528\n- router.afterEach \u5168\u5c40\u540e\u7f6e\u94a9\u5b50 \u8fdb\u5165\u8def\u7531\u4e4b\u540e\n\n\u5177\u4f53\u4f7f\u7528\uff1a\n\n- beforeEach \uff08\u5224\u65ad\u662f\u5426\u767b\u5f55\u4e86\uff0c\u6ca1\u767b\u5f55\u5c31\u8df3\u8f6c\u5230\u767b\u5f55\u9875\uff09\n\n```js\nrouter.beforeEach((to, from, next) => { \n let ifInfo = Vue.prototype.$common.getSession('userData'); // \u5224\u65ad\u662f\u5426\u767b\u5f55\u7684\u5b58\u50a8\u4fe1\u606f\n if (!ifInfo) { \n // sessionStorage\u91cc\u6ca1\u6709\u50a8\u5b58user\u4fe1\u606f \n if (to.path == '/') { \n //\u5982\u679c\u662f\u767b\u5f55\u9875\u9762\u8def\u5f84\uff0c\u5c31\u76f4\u63a5next() \n next(); \n } else { \n //\u4e0d\u7136\u5c31\u8df3\u8f6c\u5230\u767b\u5f55 \n Message.warning(\"\u8bf7\u91cd\u65b0\u767b\u5f55\uff01\"); \n window.location.href = Vue.prototype.$loginUrl; \n } \n } else { \n return next(); \n }\n})\n```\n\n- afterEach\uff08\u8df3\u8f6c\u4e4b\u540e\u6eda\u52a8\u6761\u8fd4\u56de\u9876\u90e8\uff09\n\n```js\nrouter.afterEach((to, from) => { \n // \u8df3\u8f6c\u4e4b\u540e\u6eda\u52a8\u6761\u56de\u5230\u9876\u90e8 \n window.scrollTo(0,0);\n});\n```\n\n#### 2.\u5355\u4e2a\u8def\u7531\u72ec\u4eab\u94a9\u5b50\n\n**beforeEnter**\n\n\u5982\u679c\u4f60\u4e0d\u60f3\u5168\u5c40\u914d\u7f6e\u5b88\u536b\u7684\u8bdd\uff0c\u4f60\u53ef\u4ee5\u4e3a\u67d0\u4e9b\u8def\u7531\u5355\u72ec\u914d\u7f6e\u5b88\u536b\n\n\u6709\u4e09\u4e2a\u53c2\u6570\uff1ato\u3001from\u3001next\n\n```js\nexport default [ \n { \n path: '/', \n name: 'login', \n component: login, \n beforeEnter: (to, from, next) => { \n console.log('\u5373\u5c06\u8fdb\u5165\u767b\u5f55\u9875\u9762') \n next() \n } \n }\n]\n```\n\n#### 3.\u7ec4\u4ef6\u5185\u94a9\u5b50\n\n**beforeRouteEnter\u3001beforeRouteUpdate\u3001beforeRouteLeave**\n\n\u8fd9\u4e09\u4e2a\u94a9\u5b50\u90fd\u6709\u4e09\u4e2a\u53c2\u6570\uff1ato\u3001from\u3001next\n\n- beforeRouteEnter\uff1a\u8fdb\u5165\u7ec4\u4ef6\u524d\u89e6\u53d1\n- beforeRouteUpdate\uff1a\u5f53\u524d\u5730\u5740\u6539\u53d8\u5e76\u4e14\u6539\u7ec4\u4ef6\u88ab\u590d\u7528\u65f6\u89e6\u53d1\uff0c\u4e3e\u4f8b\u6765\u8bf4\uff0c\u5e26\u6709\u52a8\u6001\u53c2\u6570\u7684\u8def\u5f84foo/:id\uff0c\u5728 /foo/1 \u548c /foo/2 \u4e4b\u95f4\u8df3\u8f6c\u7684\u65f6\u5019\uff0c\u7531\u4e8e\u4f1a\u6e32\u67d3\u540c\u6837\u7684foo\u7ec4\u4ef6\uff0c\u8fd9\u4e2a\u94a9\u5b50\u5728\u8fd9\u79cd\u60c5\u51b5\u4e0b\u5c31\u4f1a\u88ab\u8c03\u7528\n- beforeRouteLeave\uff1a\u79bb\u5f00\u7ec4\u4ef6\u88ab\u8c03\u7528\n\n\u6ce8\u610f\u70b9\uff0cbeforeRouteEnter\u7ec4\u4ef6\u5185\u8fd8\u8bbf\u95ee\u4e0d\u5230this\uff0c\u56e0\u4e3a\u8be5\u5b88\u536b\u6267\u884c\u524d\u7ec4\u4ef6\u5b9e\u4f8b\u8fd8\u6ca1\u6709\u88ab\u521b\u5efa\uff0c\u9700\u8981\u4f20\u4e00\u4e2a\u56de\u8c03\u7ed9next\u6765\u8bbf\u95ee\uff0c\u4f8b\u5982\n\n```js\nbeforeRouteEnter(to, from, next) { \n next(target => { \n if (from.path == '/classProcess') { \n target.isFromProcess = true \n } \n }) \n}\n```\n\nbeforeRouteUpdate\u548cbeforeRouteLeave\u53ef\u4ee5\u8bbf\u95ee\u7ec4\u4ef6\u5b9e\u4f8bthis\n\n\n### \u4e8c\u3001\u5b8c\u6574\u7684\u8def\u7531\u5bfc\u822a\u89e3\u6790\u6d41\u7a0b(\u4e0d\u5305\u62ec\u5176\u4ed6\u751f\u547d\u5468\u671f)\n\n- \u89e6\u53d1\u8fdb\u5165\u5176\u4ed6\u8def\u7531\u3002\n- \u8c03\u7528\u8981\u79bb\u5f00\u8def\u7531\u7684\u7ec4\u4ef6\u5b88\u536bbeforeRouteLeave\n- \u8c03\u7528\u5c40\u524d\u7f6e\u5b88\u536b\uff1abeforeEach\n- \u5728\u91cd\u7528\u7684\u7ec4\u4ef6\u91cc\u8c03\u7528 beforeRouteUpdate\n- \u8c03\u7528\u8def\u7531\u72ec\u4eab\u5b88\u536b beforeEnter\u3002\n- \u89e3\u6790\u5f02\u6b65\u8def\u7531\u7ec4\u4ef6\u3002\n- \u5728\u5c06\u8981\u8fdb\u5165\u7684\u8def\u7531\u7ec4\u4ef6\u4e2d\u8c03\u7528beforeRouteEnter\n- \u8c03\u7528\u5168\u5c40\u89e3\u6790\u5b88\u536b beforeResolve\n- \u5bfc\u822a\u88ab\u786e\u8ba4\u3002\n- \u8c03\u7528\u5168\u5c40\u540e\u7f6e\u94a9\u5b50\u7684 afterEach \u94a9\u5b50\u3002\n- \u89e6\u53d1DOM\u66f4\u65b0(mounted)\u3002\n- \u6267\u884cbeforeRouteEnter \u5b88\u536b\u4e2d\u4f20\u7ed9 next \u7684\u56de\u8c03\u51fd\u6570\n\n### \u4e8c\u3001Vue\u8def\u7531\u94a9\u5b50\u5728\u751f\u547d\u5468\u671f\u51fd\u6570\u7684\u4f53\u73b0\n\n#### 1.\u5b8c\u6574\u7684\u8def\u7531\u5bfc\u822a\u89e3\u6790\u6d41\u7a0b(\u4e0d\u5305\u62ec\u5176\u4ed6\u751f\u547d\u5468\u671f)\n\n- \u89e6\u53d1\u8fdb\u5165\u5176\u4ed6\u8def\u7531\u3002\n- \u8c03\u7528\u8981\u79bb\u5f00\u8def\u7531\u7684\u7ec4\u4ef6\u5b88\u536bbeforeRouteLeave\n- \u8c03\u7528\u5c40\u524d\u7f6e\u5b88\u536b\uff1abeforeEach\n- \u5728\u91cd\u7528\u7684\u7ec4\u4ef6\u91cc\u8c03\u7528 beforeRouteUpdate\n- \u8c03\u7528\u8def\u7531\u72ec\u4eab\u5b88\u536b beforeEnter\u3002\n- \u89e3\u6790\u5f02\u6b65\u8def\u7531\u7ec4\u4ef6\u3002\n- \u5728\u5c06\u8981\u8fdb\u5165\u7684\u8def\u7531\u7ec4\u4ef6\u4e2d\u8c03\u7528beforeRouteEnter\n- \u8c03\u7528\u5168\u5c40\u89e3\u6790\u5b88\u536b beforeResolve\n- \u5bfc\u822a\u88ab\u786e\u8ba4\u3002\n- \u8c03\u7528\u5168\u5c40\u540e\u7f6e\u94a9\u5b50\u7684 afterEach \u94a9\u5b50\u3002\n- \u89e6\u53d1DOM\u66f4\u65b0(mounted)\u3002\n- \u6267\u884cbeforeRouteEnter \u5b88\u536b\u4e2d\u4f20\u7ed9 next \u7684\u56de\u8c03\u51fd\u6570\n\n#### 2.\u89e6\u53d1\u94a9\u5b50\u7684\u5b8c\u6574\u987a\u5e8f\n\n\u8def\u7531\u5bfc\u822a\u3001keep-alive\u3001\u548c\u7ec4\u4ef6\u751f\u547d\u5468\u671f\u94a9\u5b50\u7ed3\u5408\u8d77\u6765\u7684\uff0c\u89e6\u53d1\u987a\u5e8f\uff0c\u5047\u8bbe\u662f\u4ecea\u7ec4\u4ef6\u79bb\u5f00\uff0c\u7b2c\u4e00\u6b21\u8fdb\u5165b\u7ec4\u4ef6\uff1a\n\n- beforeRouteLeave:\u8def\u7531\u7ec4\u4ef6\u7684\u7ec4\u4ef6\u79bb\u5f00\u8def\u7531\u524d\u94a9\u5b50\uff0c\u53ef\u53d6\u6d88\u8def\u7531\u79bb\u5f00\u3002\n- beforeEach: \u8def\u7531\u5168\u5c40\u524d\u7f6e\u5b88\u536b\uff0c\u53ef\u7528\u4e8e\u767b\u5f55\u9a8c\u8bc1\u3001\u5168\u5c40\u8def\u7531loading\u7b49\u3002\n- beforeEnter: \u8def\u7531\u72ec\u4eab\u5b88\u536b\n- beforeRouteEnter: \u8def\u7531\u7ec4\u4ef6\u7684\u7ec4\u4ef6\u8fdb\u5165\u8def\u7531\u524d\u94a9\u5b50\u3002\n- beforeResolve:\u8def\u7531\u5168\u5c40\u89e3\u6790\u5b88\u536b\n- afterEach:\u8def\u7531\u5168\u5c40\u540e\u7f6e\u94a9\u5b50\n- beforeCreate:\u7ec4\u4ef6\u751f\u547d\u5468\u671f\uff0c\u4e0d\u80fd\u8bbf\u95eethis\u3002\n- created:\u7ec4\u4ef6\u751f\u547d\u5468\u671f\uff0c\u53ef\u4ee5\u8bbf\u95eethis\uff0c\u4e0d\u80fd\u8bbf\u95eedom\u3002\n- beforeMount:\u7ec4\u4ef6\u751f\u547d\u5468\u671f\n- deactivated: \u79bb\u5f00\u7f13\u5b58\u7ec4\u4ef6a\uff0c\u6216\u8005\u89e6\u53d1a\u7684beforeDestroy\u548cdestroyed\u7ec4\u4ef6\u9500\u6bc1\u94a9\u5b50\u3002\n- mounted:\u8bbf\u95ee/\u64cd\u4f5cdom\u3002\n- activated:\u8fdb\u5165\u7f13\u5b58\u7ec4\u4ef6\uff0c\u8fdb\u5165a\u7684\u5d4c\u5957\u5b50\u7ec4\u4ef6(\u5982\u679c\u6709\u7684\u8bdd)\u3002\n- \u6267\u884cbeforeRouteEnter\u56de\u8c03\u51fd\u6570next\u3002\n\n\n#### 3.\u5bfc\u822a\u884c\u4e3a\u88ab\u89e6\u53d1\u5230\u5bfc\u822a\u5b8c\u6210\u7684\u6574\u4e2a\u8fc7\u7a0b\n\n- \u5bfc\u822a\u884c\u4e3a\u88ab\u89e6\u53d1\uff0c\u6b64\u65f6\u5bfc\u822a\u672a\u88ab\u786e\u8ba4\u3002\n- \u5728\u5931\u6d3b\u7684\u7ec4\u4ef6\u91cc\u8c03\u7528\u79bb\u5f00\u5b88\u536b beforeRouteLeave\u3002\n- \u8c03\u7528\u5168\u5c40\u7684 beforeEach \u5b88\u536b\u3002\n- \u5728\u91cd\u7528\u7684\u7ec4\u4ef6\u91cc\u8c03\u7528 beforeRouteUpdate \u5b88\u536b (2.2+)\u3002\n- \u5728\u8def\u7531\u914d\u7f6e\u91cc\u8c03\u7528 beforeEnter\u3002\n- \u89e3\u6790\u5f02\u6b65\u8def\u7531\u7ec4\u4ef6\uff08\u5982\u679c\u6709\uff09\u3002\n- \u5728\u88ab\u6fc0\u6d3b\u7684\u7ec4\u4ef6\u91cc\u8c03\u7528 beforeRouteEnter\u3002\n- \u8c03\u7528\u5168\u5c40\u7684 beforeResolve \u5b88\u536b (2.5+)\uff0c\u6807\u793a\u89e3\u6790\u9636\u6bb5\u5b8c\u6210\u3002\n- \u5bfc\u822a\u88ab\u786e\u8ba4\u3002\n- \u8c03\u7528\u5168\u5c40\u7684 afterEach \u94a9\u5b50\u3002\n- \u975e\u91cd\u7528\u7ec4\u4ef6\uff0c\u5f00\u59cb\u7ec4\u4ef6\u5b9e\u4f8b\u7684\u751f\u547d\u5468\u671f\n - beforeCreate&created\n - beforeMount&mounted\n- \u89e6\u53d1 DOM \u66f4\u65b0\u3002\n- \u7528\u521b\u5efa\u597d\u7684\u5b9e\u4f8b\u8c03\u7528 beforeRouteEnter \u5b88\u536b\u4e2d\u4f20\u7ed9 next \u7684\u56de\u8c03\u51fd\u6570\u3002\n- \u5bfc\u822a\u5b8c\u6210\n\n\n", "answer": "", "biz_type": 1, "qid": 730, "subject": "", "title": "\u8bf4\u4e00\u4e0b\u8def\u7531\u94a9\u5b50\u5728 Vue \u751f\u547d\u5468\u671f\u7684\u4f53\u73b0\uff1f"}, "tech_tag": ["Vue"], "uid": 0, "uname": ""}, {"audit_flag": 0, "corp_tag": ["58"], "date": "Fri, 19 Jun 2020 16:20:44 GMT", "favorite_num": 5, "qid": 733, "qtype": "short_answer", "short_answer": {"analysis": "", "answer": "", "biz_type": 1, "qid": 733, "subject": "", "title": "\u8bf4\u4e00\u4e0b Vue \u4e2d\u6240\u6709\u5e26\\$\u7684\u65b9\u6cd5"}, "tech_tag": ["Vue"], "uid": 0, "uname": ""}, {"audit_flag": 0, "corp_tag": ["\u5b89\u5c45\u5ba2"], "date": "Fri, 19 Jun 2020 16:20:44 GMT", "favorite_num": 5, "qid": 740, "qtype": "short_answer", "short_answer": {"analysis": "", "answer": "", "biz_type": 1, "qid": 740, "subject": "", "title": "Vue-router \u9664\u4e86 router-link \u600e\u4e48\u5b9e\u73b0\u8df3\u8f6c"}, "tech_tag": ["Vue"], "uid": 0, "uname": ""}, {"audit_flag": 0, "corp_tag": [], "date": "Fri, 19 Jun 2020 16:20:43 GMT", "favorite_num": 6, "qid": 645, "qtype": "short_answer", "short_answer": {"analysis": "#### \u52a0\u8f7d\u6e32\u67d3\u8fc7\u7a0b\n\n1. \u7236\u7ec4\u4ef6 beforeCreate\n2. \u7236\u7ec4\u4ef6 created\n3. \u7236\u7ec4\u4ef6 beforeMount\n4. \u5b50\u7ec4\u4ef6 beforeCreate\n5. \u5b50\u7ec4\u4ef6 created\n6. \u5b50\u7ec4\u4ef6 beforeMount\n7. \u5b50\u7ec4\u4ef6 mounted\n8. \u7236\u7ec4\u4ef6 mounted\n\n#### \u66f4\u65b0\u8fc7\u7a0b\n\n1. \u7236\u7ec4\u4ef6 beforeUpdate\n2. \u5b50\u7ec4\u4ef6 beforeUpdate\n3. \u5b50\u7ec4\u4ef6 updated\n4. \u7236\u7ec4\u4ef6 updated\n\n#### \u9500\u6bc1\u8fc7\u7a0b\n\n1. \u7236\u7ec4\u4ef6 beforeDestroy\n2. \u5b50\u7ec4\u4ef6 beforeDestroy\n3. \u5b50\u7ec4\u4ef6 destroyed\n4. \u7236\u7ec4\u4ef6 destoryed", "answer": "", "biz_type": 1, "qid": 645, "subject": "", "title": "Vue \u5b50\u7ec4\u4ef6\u548c\u7236\u7ec4\u4ef6\u6267\u884c\u987a\u5e8f"}, "tech_tag": ["Vue"], "uid": 0, "uname": ""}, {"audit_flag": 0, "corp_tag": ["\u4f1a\u5c0f\u4e8c"], "date": "Fri, 19 Jun 2020 16:20:43 GMT", "favorite_num": 6, "qid": 608, "qtype": "short_answer", "short_answer": {"analysis": "### \u5b9e\u73b0\u65b9\u5f0f\n\n#### 1.param\u65b9\u5f0f\n\n- \u914d\u7f6e\u8def\u7531\u683c\u5f0f:/router/:id\n- \u4f20\u9012\u7684\u65b9\u5f0f:\u5728path\u540e\u9762\u8ddf\u4e0a\u5bf9\u5e94\u7684\u503c\n- \u4f20\u9012\u540e\u5f62\u6210\u7684\u8def\u5f84:/router/123\n\n**1\uff09\u8def\u7531\u5b9a\u4e49**\n\n```js\n//\u5728APP.vue\u4e2d\n<router-link :to=\"'/user/'+userId\" replace>\u7528\u6237</router-link> \n \n//\u5728index.js\n{\n\u00a0 \u00a0path: '/user/:userid',\n\u00a0 \u00a0component: User,\n},\n```\n\n**2\uff09\u8def\u7531\u8df3\u8f6c**\n\n```js\n// \u65b9\u6cd51\uff1a\n<router-link :to=\"{ name: 'users', params: { uname: wade }}\">\u6309\u94ae</router-link\n\n// \u65b9\u6cd52\uff1a\nthis.$router.push({name:'users',params:{uname:wade}})\n\n// \u65b9\u6cd53\uff1a\nthis.$router.push('/user/' + wade)\n```\n\n**3\uff09\u53c2\u6570\u83b7\u53d6**\n\n\u901a\u8fc7 `$route.params.userid` \u83b7\u53d6\u4f20\u9012\u7684\u503c\n\n#### 2.query\u65b9\u5f0f\n\n- \u914d\u7f6e\u8def\u7531\u683c\u5f0f:/router,\u4e5f\u5c31\u662f\u666e\u901a\u914d\u7f6e\n- \u4f20\u9012\u7684\u65b9\u5f0f:\u5bf9\u8c61\u4e2d\u4f7f\u7528query\u7684key\u4f5c\u4e3a\u4f20\u9012\u65b9\u5f0f\n- \u4f20\u9012\u540e\u5f62\u6210\u7684\u8def\u5f84:/route?id=123\n\n**1\uff09\u8def\u7531\u5b9a\u4e49**\n\n```html\n//\u65b9\u5f0f1\uff1a\u76f4\u63a5\u5728router-link \u6807\u7b7e\u4e0a\u4ee5\u5bf9\u8c61\u7684\u5f62\u5f0f\n<router-link :to=\"{path:'/profile',query:{name:'why',age:28,height:188}}\">\u6863\u6848</router-link>\n\n// \u65b9\u5f0f2\uff1a\u5199\u6210\u6309\u94ae\u4ee5\u70b9\u51fb\u4e8b\u4ef6\u5f62\u5f0f\n\n<button @click='profileClick'>\u6211\u7684</button> \n\nprofileClick(){\n this.$router.push({\n path: \"/profile\",\n query: {\n name: \"kobi\",\n age: \"28\",\n height: 198\n }\n });\n}\n```\n\n**2\uff09\u8df3\u8f6c\u65b9\u6cd5**\n\n```js\n// \u65b9\u6cd51\uff1a\n<router-link :to=\"{ name: 'users', query: { uname: james }}\">\u6309\u94ae</router-link>\n\n// \u65b9\u6cd52\uff1a\nthis.$router.push({ name: 'users', query:{ uname:james }})\n\n// \u65b9\u6cd53\uff1a\n<router-link :to=\"{ path: '/user', query: { uname:james }}\">\u6309\u94ae</router-link>\n\n// \u65b9\u6cd54\uff1a\nthis.$router.push({ path: '/user', query:{ uname:james }})\n\n// \u65b9\u6cd55\uff1a\nthis.$router.push('/user?uname=' + jsmes)\n```\n\n**3\uff09\u83b7\u53d6\u53c2\u6570**\n\n```js\n\u901a\u8fc7$route.query \u83b7\u53d6\u4f20\u9012\u7684\u503c\n```", "answer": "", "biz_type": 1, "qid": 608, "subject": "", "title": "\u600e\u4e48\u5b9a\u4e49 vue-router \u7684\u52a8\u6001\u8def\u7531\uff1f\u600e\u4e48\u83b7\u53d6\u4f20\u8fc7\u6765\u7684\u52a8\u6001\u53c2\u6570\uff1f"}, "tech_tag": ["Vue"], "uid": 0, "uname": ""}, {"audit_flag": 0, "corp_tag": [], "date": "Fri, 19 Jun 2020 16:20:43 GMT", "favorite_num": 20, "qid": 640, "qtype": "short_answer", "short_answer": {"analysis": "### \u4e00\u3001\u7b54\u6848\u89e3\u6790\n\n**\u4e0d\u4f1a**\n\nVue \u5b9e\u73b0\u54cd\u5e94\u5f0f\u5e76\u4e0d\u662f\u6570\u636e\u53d1\u2f63\u53d8\u5316\u4e4b\u540e DOM \u2f74\u5373\u53d8\u5316\uff0c\u2f7d\u662f\u6309\u2f00\u5b9a\u7684\u7b56\u7565\u8fdb\u2f8f DOM \u7684\u66f4\u65b0\u3002\n\nVue \u5728\u66f4\u65b0 DOM \u65f6\u662f**\u5f02\u6b65\u6267\u884c**\u7684\u3002\u53ea\u8981\u4fa6\u542c\u5230\u6570\u636e\u53d8\u5316\uff0cVue \u5c06\u5f00\u542f\u4e00\u4e2a\u961f\u5217\uff0c\u5e76\u7f13\u51b2\u5728\u540c\u4e00\u4e8b\u4ef6\u5faa\u73af\u4e2d\u53d1\u751f\u7684\u6240\u6709\u6570\u636e\u53d8\u66f4\u3002\n\n\u5982\u679c\u540c\u4e00\u4e2awatcher\u88ab\u591a\u6b21\u89e6\u53d1\uff0c\u53ea\u4f1a\u88ab\u63a8\u5165\u5230\u961f\u5217\u4e2d\u4e00\u6b21\u3002\u8fd9\u79cd\u5728\u7f13\u51b2\u65f6\u53bb\u9664\u91cd\u590d\u6570\u636e\u5bf9\u4e8e\u907f\u514d\u4e0d\u5fc5\u8981\u7684\u8ba1\u7b97\u548c DOM \u64cd\u4f5c\u662f\u975e\u5e38\u91cd\u8981\u7684\u3002\n\n\u7136\u540e\uff0c\u5728\u4e0b\u4e00\u4e2a\u7684\u4e8b\u4ef6\u5faa\u73af\u201ctick\u201d\u4e2d\uff0cVue \u5237\u65b0\u961f\u5217\u5e76\u6267\u884c\u5b9e\u9645 (\u5df2\u53bb\u91cd\u7684) \u5de5\u4f5c\u3002\n\n### \u4e8c\u3001\u5f02\u6b65\u6267\u2f8f\u7684\u8fd0\u2f8f\u673a\u5236\n\n1. \u6240\u6709\u540c\u6b65\u4efb\u52a1\u90fd\u5728\u4e3b\u7ebf\u7a0b\u4e0a\u6267\u2f8f\uff0c\u5f62\u6210\u2f00\u4e2a\u6267\u2f8f\u6808\uff08execution context stack\uff09\u3002\n2. \u4e3b\u7ebf\u7a0b\u4e4b\u5916\uff0c\u8fd8\u5b58\u5728\u2f00\u4e2a\"\u4efb\u52a1\u961f\u5217\"\uff08task queue\uff09\u3002\u53ea\u8981\u5f02\u6b65\u4efb\u52a1\u6709\u4e86\u8fd0\u2f8f\u7ed3\u679c\uff0c\u5c31\u5728\"\u4efb\u52a1\u961f\u5217\"\u4e4b\u4e2d\u653e\u7f6e\u2f00\u4e2a\u4e8b\u4ef6\u3002\n3. \u2f00\u65e6\"\u6267\u2f8f\u6808\"\u4e2d\u7684\u6240\u6709\u540c\u6b65\u4efb\u52a1\u6267\u2f8f\u5b8c\u6bd5\uff0c\u7cfb\u7edf\u5c31\u4f1a\u8bfb\u53d6\"\u4efb\u52a1\u961f\u5217\"\uff0c\u770b\u770b\u2fa5\u2faf\u6709\u54ea\u4e9b\u4e8b\u4ef6\u3002\u90a3\u4e9b\u5bf9\u5e94\u7684\u5f02\u6b65\u4efb\u52a1\uff0c\u4e8e\u662f\u7ed3\u675f\u7b49\u5f85\u72b6 \u6001\uff0c\u8fdb\u2f0a\u6267\u2f8f\u6808\uff0c\u5f00\u59cb\u6267\u2f8f\u3002\n4. \u4e3b\u7ebf\u7a0b\u4e0d\u65ad\u91cd\u590d\u4e0a\u2faf\u7684\u7b2c\u4e09\u6b65\n\n\n\n#### \u4e8b\u4ef6\u5faa\u73af\u8bf4\u660e\n\n\u7b80\u5355\u6765\u8bf4\uff0cVue \u5728\u4fee\u6539\u6570\u636e\u540e\uff0c\u89c6\u56fe\u4e0d\u4f1a\u2f74\u523b\u66f4\u65b0\uff0c\u2f7d\u662f\u7b49\u540c\u2f00\u4e8b\u4ef6\u5faa\u73af\u4e2d\u7684\u6240\u6709\u6570\u636e\u53d8\u5316\u5b8c\u6210\u4e4b\u540e\uff0c\u518d\u7edf\u2f00\u8fdb\u2f8f\u89c6\u56fe\u66f4\u65b0\u3002\n\n```js\n// \u6539\u53d8\u6570\u636e\nvm.message = \"changed\";\n\n// \u60f3\u8981\u7acb\u5373\u4f7f\u7528\u66f4\u65b0\u540e\u7684dom,\u8fd9\u6837\u4e0d\u884c\uff0c\u56e0\u4e3a\u8bbe\u7f6emessage\u540edom\u8fd8\u6ca1\u66f4\u65b0\u3002\nconsole.log(vm.$el.textConteng);// \u5e76\u4e0d\u4f1a\u5f97\u5230changed\n\n// \u8fd9\u6837\u53ef\u4ee5\uff0cnextTck\u91cc\u9762\u7684\u4ee3\u7801\u4f1a\u5728dom\u66f4\u65b0\u540e\u6267\u884c\nVue.nextTick(function(){\n console.log(vm.$el.textConteng); // \u53ef\u4ee5\u5f97\u5230changed\n})\n```\n\n\n\n#### \u4e8b\u4ef6\u5faa\u73af\uff1a\n\n**1\uff09\u7b2c\u2f00\u4e2a tick**\n\n\u56fe\u4f8b\u4e2d\u7b2c\u2f00\u4e2a\u6b65\u9aa4\uff0c\u5373'\u672c\u6b21\u66f4\u65b0\u5faa\u73af'\n\n\u2fb8\u5148\u4fee\u6539\u6570\u636e\uff0c\u8fd9\u662f\u540c\u6b65\u4efb\u52a1\u3002\u540c\u2f00\u4e8b\u4ef6\u5faa\u73af\u7684\u6240\u6709\u7684\u540c\u6b65\u4efb\u52a1\u90fd\u5728\u4e3b\u7ebf\u7a0b\u4e0a\u6267\u2f8f\uff0c\u5f62\u6210\u2f00\u4e2a\u6267\u2f8f\u6808\uff0c\u6b64\u65f6\u8fd8\u672a\u6d89\u53ca DOM \u3002\n\nVue \u5f00\u542f\u2f00\u4e2a\u5f02\u6b65\u961f\u5217\uff0c\u5e76\u7f13\u51b2\u5728\u6b64\u4e8b\u4ef6\u5faa\u73af\u4e2d\u53d1\u2f63\u7684\u6240\u6709\u6570\u636e\u6539\u53d8\u3002\u5982\u679c\u540c\u2f00\u4e2a watcher \u88ab\u591a\u6b21\u89e6\u53d1\uff0c\u53ea\u4f1a\u88ab\u63a8\u2f0a\u5230\u961f\u5217\u4e2d\u2f00\u6b21\u3002\n\n**2\uff09\u7b2c\u4e8c\u4e2atick**\n\n\u56fe\u4f8b\u4e2d\u7b2c\u2f06\u4e2a\u6b65\u9aa4\uff0c\u5373'\u4e0b\u6b21\u66f4\u65b0\u5faa\u73af'\n\n\u540c\u6b65\u4efb\u52a1\u6267\u2f8f\u5b8c\u6bd5\uff0c\u5f00\u59cb\u6267\u2f8f\u5f02\u6b65 watcher \u961f\u5217\u7684\u4efb\u52a1\uff0c\u66f4\u65b0 DOM \u3002Vue \u5728\u5185\u90e8\u5c1d\u8bd5\u5bf9\u5f02\u6b65\u961f\u5217\u4f7f\u2f64\u539f\u2f63\u7684 Promise.then \u548c MessageChannel \u2f45\u6cd5\uff0c\u5982\u679c\u6267\u2f8f\u73af\u5883\u4e0d\u2f40\u6301\uff0c\u4f1a\u91c7\u2f64 setTimeout(fn, 0) \u4ee3\u66ff\u3002\n\n**3\uff09\u7b2c\u4e09\u4e2atick**\n\n\u6b64\u65f6\u5c31\u662f\u2f42\u6863\u6240\u8bf4\u7684\u4e0b\u6b21DOM\u66f4\u65b0\u5faa\u73af\u7ed3\u675f\u4e4b\u540e\n\n\u6b64\u65f6\u901a\u8fc7Vue.nextTick\u83b7\u53d6\u5230\u6539\u53d8\u540e\u7684DOM\u3002\u901a\u8fc7setTimeout(fn,0)\u4e5f\u53ef\u4ee5\u540c\u6837\u83b7\u53d6\u5230\u3002\n\n#### \u603b\u7ed3\n\n\u540c\u6b65\u4ee3\u7801\u6267\u2f8f -> \u67e5\u627e\u5f02\u6b65\u961f\u5217\uff0c\u63a8\u2f0a\u6267\u2f8f\u6808\uff0c\u6267\u2f8fVue.nextTick[\u4e8b\u4ef6\u5faa\u73af1] ->\u67e5\u627e\u5f02\u6b65\u961f\u5217\uff0c\u63a8\u2f0a\u6267\u2f8f\u6808\uff0c\u6267\u2f8fVue.nextTick[\u4e8b\u4ef6\u5faa\u73af2]...\n\n\u603b\u4e4b\uff0c\u5f02\u6b65\u662f\u5355\u72ec\u7684\u2f00\u4e2atick\uff0c\u4e0d\u4f1a\u548c\u540c\u6b65\u5728\u2f00\u4e2a tick \u2fa5\u53d1\u2f63\uff0c\u4e5f\u662f DOM \u4e0d\u4f1a\u2ee2\u4e0a\u6539\u53d8\u7684\u539f\u56e0\u3002\n\n### \u4e09\u3001\u66f4\u65b0\u539f\u7406\u89e3\u8bfb\n\n\n\n1. \u5f53\u6211\u4eec\u628a\u5bf9\u8c61\u4f20\u5165 Vue \u5b9e\u4f8b\u4f5c\u4e3a data \u9009\u9879\uff0cVue \u4f1a\u904d\u5386\u6b64\u5bf9\u8c61\u6240\u6709\u7684 property\uff0c\u5e76\u4f7f\u7528 Object.defineProperty \u628a\u8fd9\u4e9b property \u5168\u90e8\u8f6c\u4e3a getter/setter\u3002\n\n2. \u6bcf\u4e2a\u7ec4\u4ef6\u5b9e\u4f8b\u90fd\u5bf9\u5e94\u4e00\u4e2a watcher \u5b9e\u4f8b\uff0c\u5b83\u4f1a\u5728\u7ec4\u4ef6\u6e32\u67d3\u7684\u8fc7\u7a0b\u4e2d\u628a\u201c\u63a5\u89e6\u201d\u8fc7\u7684\u6570\u636e property \u8bb0\u5f55\u4e3a\u4f9d\u8d56\u3002\n\n3. \u5f53 data \u7684\u67d0\u4e00\u4e2a\u503c\u53d1\u751f\u6539\u53d8\u4e4b\u540e\uff0c\u5c31\u4f1a\u89e6\u53d1\u5b9e\u4f8b setter\uff0c\u540c\u65f6\u901a\u77e5 watcher\uff0c\u4f7f\u5b83\u5173\u8054\u7684\u7ec4\u4ef6\u91cd\u65b0\u6e32\u67d3\u89c6\u56fe\u3002\n\n#### 1.\u7b80\u6613\u539f\u7406\n\n```js\n// \u6570\u636e\u53d8\u5316\u6e32\u67d3\u89c6\u56fe\nfunction renderView() {\n console.log(\"render view\");\n}\n// \u6570\u636e\u52ab\u6301\nfunction defineReactive(target, key, value) {\n observe(value);\n Object.defineProperty(target, key, {\n get() {\n return value;\n },\n set(newVal) {\n if (newVal !== value) {\n observe(newVal);\n value = newVal;\n // \u89e6\u53d1\u89c6\u56fe\u66f4\u65b0\n renderView();\n }\n },\n });\n}\nfunction observe(target) {\n // \u4e0d\u662f\u5bf9\u8c61\u76f4\u63a5\u8fd4\u56de\n if (typeof target !== \"object\" || target === null) {\n return target;\n }\n // \u9012\u5f52\u904d\u5386\u5bf9\u8c61\uff0c\u6570\u636e\u52ab\u6301\n for (let key in target) {\n defineReactive(target, key, target[key]);\n }\n}\nlet data = { name: \"\u5c0f\u738b\" };\nconst reactiveData = observe(data);\ndata.name = \"\u8001\u738b\";\n// render view\n```\n\n#### 2.\u5bf9\u4e8e\u6570\u7ec4\uff0cVue \u662f\u53ef\u4ee5\u5bf9\u6570\u7ec4\u8fdb\u884c\u66f4\u65b0\u7684\n\n\u91cd\u5199\u4e86\u6570\u7ec4\u7684\u65b9\u6cd5\uff0c\u4e0b\u9762\u662f\u7b80\u6613\u7248\uff1a\n\n```js\nconst prototype = Array.prototype;\nconst newProto = Object.create(prototype);\nconst methods = [\n \"push\",\n \"pop\",\n \"shift\",\n \"unshift\",\n \"splice\",\n \"sort\",\n \"reverse\",\n];\nmethods.forEach((method) => {\n newProto[method] = () => {\n newProto[method].call(this, ...args);\n renderView();\n };\n});\n```\n\n#### 3.Object.defineProperty \u5b58\u5728\u7684\u95ee\u9898\n\n1. \u65e0\u6cd5\u5bf9\u539f\u751f\u6570\u7ec4\u8fdb\u884c\u66f4\u65b0\n2. \u5bf9\u8c61\u5d4c\u5957\u662f\uff0c\u9012\u5f52\u6d88\u8017\u90e8\u5206\u6027\u80fd\n3. \u65e0\u6cd5\u5bf9\u65b0\u6dfb\u52a0\u7684\u5c5e\u6027\u8fdb\u884c\u76d1\u542c\n\n#### 4.Proxy\n\n```js\nfunction defineReactive(target) {\n if (typeof target !== \"object\" || target == null) {\n return target;\n }\n const handler = {\n get(target, property, receiver) {\n return Reflect.get(target, property, receiver);\n },\n set(target, property, value) {\n if (val !== target[property]) {\n renderView();\n }\n return Reflect.set(target, property, value);\n },\n };\n return new Proxy(target, handler);\n}\n\n// \u6570\u636e\u54cd\u5e94\u5f0f\u76d1\u542c\nconst reactiveData = defineReactive(data)\n```\n\n**proxy\u89e3\u51b3\u7684\u95ee\u9898**\n\n- Proxy\u652f\u6301\u76d1\u542c\u539f\u751f\u6570\u7ec4\n- Proxy\u7684\u83b7\u53d6\u6570\u636e\uff0c\u53ea\u4f1a\u9012\u5f52\u5230\u9700\u8981\u83b7\u53d6\u7684\u5c42\u7ea7\uff0c\u4e0d\u4f1a\u7ee7\u7eed\u9012\u5f52\n- \u53ef\u5bf9\u65b0\u6dfb\u52a0\u7684\u5c5e\u6027\u76d1\u542c\n\n\n", "answer": "", "biz_type": 1, "qid": 640, "subject": "", "title": "Vue data \u4e2d\u67d0\u4e00\u4e2a\u5c5e\u6027\u7684\u503c\u53d1\u751f\u6539\u53d8\u540e\uff0c\u89c6\u56fe\u4f1a\u7acb\u5373\u540c\u6b65\u6267\u884c\u91cd\u65b0\u6e32\u67d3\u5417\uff1f"}, "tech_tag": ["Vue"], "uid": 0, "uname": ""}, {"audit_flag": 0, "corp_tag": ["58"], "date": "Fri, 19 Jun 2020 16:20:43 GMT", "favorite_num": 10, "qid": 644, "qtype": "short_answer", "short_answer": {"analysis": "### \u4e00\u3001mixin \u548c extends\n\nmixin \u548c extends\u5747\u662f\u7528\u4e8e\u5408\u5e76\u3001\u62d3\u5c55\u7ec4\u4ef6\u7684\uff0c\u4e24\u8005\u5747\u901a\u8fc7 `mergeOptions` \u65b9\u6cd5\u5b9e\u73b0\u5408\u5e76\u3002\n\n`mixins` \u63a5\u6536\u4e00\u4e2a\u6df7\u5165\u5bf9\u8c61\u7684\u6570\u7ec4\uff0c\u5176\u4e2d\u6df7\u5165\u5bf9\u8c61\u53ef\u4ee5\u50cf\u6b63\u5e38\u7684\u5b9e\u4f8b\u5bf9\u8c61\u4e00\u6837\u5305\u542b\u5b9e\u4f8b\u9009\u9879\uff0c\u8fd9\u4e9b\u9009\u9879\u4f1a\u88ab\u5408\u5e76\u5230\u6700\u7ec8\u7684\u9009\u9879\u4e2d\u3002Mixin \u94a9\u5b50\u6309\u7167\u4f20\u5165\u987a\u5e8f\u4f9d\u6b21\u8c03\u7528\uff0c\u5e76\u5728\u8c03\u7528\u7ec4\u4ef6\u81ea\u8eab\u7684\u94a9\u5b50\u4e4b\u524d\u88ab\u8c03\u7528\u3002\n\n`extends` \u4e3b\u8981\u662f\u4e3a\u4e86\u4fbf\u4e8e\u6269\u5c55\u5355\u6587\u4ef6\u7ec4\u4ef6\uff0c\u63a5\u6536\u4e00\u4e2a\u5bf9\u8c61\u6216\u6784\u9020\u51fd\u6570\u3002\n\n\n\n### \u4e8c\u3001mergeOptions \u7684\u6267\u884c\u8fc7\u7a0b\n\n1. \u89c4\u8303\u5316\u9009\u9879\uff08normalizeProps\u3001normalizeInject\u3001normalizeDirectives\uff09\n\n2. \u5bf9\u672a\u5408\u5e76\u7684\u9009\u9879\uff0c\u8fdb\u884c\u5224\u65ad\n\n ```js\n if(!child._base) {\n if(child.extends) {\n parent = mergeOptions(parent, child.extends, vm)\n }\n if(child.mixins) {\n for(let i = 0, l = child.mixins.length; i < l; i++){\n parent = mergeOptions(parent, child.mixins[i], vm)\n }\n }\n }\n ```\n\n3. \u5408\u5e76\u5904\u7406\u3002\u6839\u636e\u4e00\u4e2a\u901a\u7528 Vue \u5b9e\u4f8b\u6240\u5305\u542b\u7684\u9009\u9879\u8fdb\u884c\u5206\u7c7b\u9010\u4e00\u5224\u65ad\u5408\u5e76\uff0c\u5982 props\u3001data\u3001methods\u3001watch\u3001computed\u3001\u751f\u547d\u5468\u671f\u7b49\uff0c\u5c06\u5408\u5e76\u7ed3\u679c\u5b58\u50a8\u5728\u65b0\u5b9a\u4e49\u7684 options \u5bf9\u8c61\u91cc\u3002\n\n4. \u8fd4\u56de\u5408\u5e76\u7ed3\u679c options\u3002\n\n### \u4e09\u3001\u4ee3\u7801\u6f14\u793a\n\n- \u7528\u8d4b\u503c\u7684\u65b9\u5f0f\u5c06 mixins \u5bf9\u8c61\u91cc\u7684\u65b9\u6cd5\u90fd\u6302\u8f7d\u5230\u539f\u5bf9\u8c61\u4e0a\uff0c\u5c31\u5b9e\u73b0\u4e86\u5bf9\u5bf9\u8c61\u7684\u6df7\u5165\u3002\n\n```js\nconst mixin = function(obj, mixins) {\n const newObj = obj;\n newObj.prototype = Object.create(obj.prototype);\n for (let prop in mixins) {\n if (mixins.hasOwnProperty(prop)) {\n newObj.prototype[prop] = mixins[prop];\n }\n }\n return newObj;\n}\nconst BigMixin = {\n fly: () => {\n console.log('I can fly');\n }\n};\nconst Big = function() {\n console.log('new big');\n};\nconst FlyBig = mixin(Big, BigMixin);\nconst flyBig = new FlyBig(); // 'new big'\nflyBig.fly(); // 'I can fly'\n\n\nfunction extends(subClass, superClass) {\n // \u521b\u5efa\u4e00\u4e2a__proto__ \u6307\u5411\u8d85\u7c7b\u7684\u539f\u578b\u7684\u5b9e\u4f8b\n const instance = Object.create(superClass.prototype);\n // \u5c06\u5b9e\u4f8b\u7684\u539f\u578b\u7684\u6784\u9020\u5668\u6307\u5411\u5b50\u7c7b(\u4e3b\u8981\u7528\u4e8e\u7ee7\u627f\u5b50\u7c7b\u7684\u5b9e\u4f8b\u5c5e\u6027)\n instance.constructor = subClass;\n // \u5c06\u5b9e\u4f8b\u8d4b\u503c\u7ed9\u5b50\u7c7b\u7684\u539f\u578b,\u8fd9\u91cc\u4e3b\u8981\u662f\u4e3a\u4e86\u83b7\u53d6\u5230\u7236\u7c7b\u7684\u539f\u578b;\n subClass.prototype = instance;\n}\n```\n\n\n", "answer": "", "biz_type": 1, "qid": 644, "subject": "", "title": "\u7b80\u8ff0 mixin\u3001extends \u7684\u8986\u76d6\u903b\u8f91"}, "tech_tag": ["Vue"], "uid": 0, "uname": ""}, {"audit_flag": 0, "corp_tag": [], "date": "Fri, 19 Jun 2020 16:20:43 GMT", "favorite_num": 5, "qid": 588, "qtype": "short_answer", "short_answer": {"analysis": "### Vue Hooks \u5f53\u6211\u4eec\u9700\u8981\u5728\u4e24\u4e2a\u7ec4\u4ef6\u4e4b\u95f4\u5171\u4eab\u884c\u4e3a\u7684\u573a\u666f,\u6211\u4eec\u901a\u5e38\u4f7f\u7528mixin\u3002\u4e0d\u8fc7\u968f\u7740hooks\u7684\u51fa\u73b0\uff0c\u73b0\u5728\u53c8\u6709\u53e6\u4e00\u79cd\u53ef\u9009\u65b9\u6848\uff0c\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528custom hook \u590d\u7528\u4e1a\u52a1\u903b\u8f91\u3002\u540c\u65f6\u53ef\u4ee5\u62ff\u5230\u66b4\u9732\u51fa\u6765\u7684render\u65b9\u6cd5, \u53ea\u9700\u8981\u5728withHooks\u7684\u65b9\u6cd5\u4e2d\u4f20\u5165\u4e00\u4e2a\u51fd\u6570\u53c2\u6570\u5373\u53ef\u3002\u6211\u4eec\u4e0d\u9700\u8981\u5173\u5fc3\u51fd\u6570\u5185\u90e8this\u7684\u6307\u5411\uff0c\u4f46\u5374\u4f9d\u65e7\u53ef\u4ee5\u4f7f\u7528state,\u4ee5\u53calife-cycle\u3002 \u4f7f\u7528\u51fd\u6570\u7684\u65b9\u5f0f\u53bb\u5b9e\u73b0\u4e00\u4e2a\u7ec4\u4ef6\uff08\u5e76\u4e0d\u662ffunctional component\uff09\uff0c\u8fd9\u79cd\u65b9\u5f0f\u4f1a\u8ba9\u7ec4\u4ef6\u7684\u5b9e\u73b0\u53d8\u5f97\u66f4\u52a0\u7075\u6d3b\u3002\u4f46\u662f\u524d\u63d0\u6761\u4ef6\u662f\u9700\u8981\u6211\u4eec\u4f7f\u7528render\u51fd\u6570\u4ee3\u66fftemplate\u6a21\u677f\u3002 vue hooks\u63d0\u4f9b\u4e86\u4e09\u79cd\u7c7b\u578b\u7684hooks - state hooks - effect hooks - custom hooks **\u6ce8\u610f:** \u94a9\u5b50\u53ea\u80fd\u5728\u4f20\u9012\u7ed9withHooks\u7684\u51fd\u6570\u4e2d\u8c03\u7528\u6216\u8005\u5728hooks\u65b9\u6cd5\u5185\u90e8\u8c03\u7528\u3002 #### 1.withHooks hooks \u662f\u5728\u4f20\u9012\u7ed9withHooks\u7684\u51fd\u6570\u4e2d\u8c03\u7528\u7684 ```js const Foo = withHooks(h => { // state const [count, setCount] = useState(0) // effect useEffect(() => { document.title = \"count is \" + count }) return h(\"div\", [ h(\"span\", `count is: ${count}`), h( \"button\", { on: { click: () => setCount(count + 1) } }, \"+\" ), ]) }) ``` withHooks\u662f\u4e00\u4e2a\u9ad8\u9636\u51fd\u6570\uff0c\u4f20\u5165\u4e00\u4e2a\u51fd\u6570\uff0c\u8fd9\u4e2a\u51fd\u6570\u5185\u90e8\u8fd4\u56de\u4e00\u4e2avnode\uff0c withHooks \u65b9\u6cd5\u8fd4\u56de\u7684\u662f\u4e00\u4e2avue\u7684\u9009\u9879\u5bf9\u8c61\u3002 ```js Foo = { created() {}, data() {}, render () {} }; ``` \u8fd9\u4e2a\u9009\u9879\u5bf9\u8c61\u53ef\u4ee5\u76f4\u63a5\u8c03\u7528Vue.component \u65b9\u6cd5\u751f\u6210\u5168\u5c40\u7ec4\u4ef6\uff0c\u6216\u8005\u5728render \u65b9\u6cd5\u4e2d\u751f\u6210vnode ```js Vue.component('v-foo', Foo); // or render(h) { return h(\"div\", [h(Foo), h(Foo)]) } ``` #### 2.state hooks \u5173\u4e8e\u72b6\u6001\u7c7b\u7684hooks \u6709\u4e09\u4e2a\uff0cuseState \u548c useData\u3001useComputed\uff0c ```js const data = useData({ count: 0 }) const double = useComputed(() => data.count * 2) const [count, setCount] = useState(0) ``` useState \u53ef\u4ee5\u770b\u6210useData\u548cchange data\u7684\u7ed3\u5408\uff0c\u6267\u884c\u540e\u8fd4\u56de\u4e00\u4e2a\u6570\u7ec4\uff0c\u6570\u7ec4\u7684\u7b2c\u4e00\u9879\u662f\u72b6\u6001state\uff0c\u7b2c\u4e8c\u4e2a\u9879\u662fchange state \u7684\u65b9\u6cd5updater\u3001useComputed \u4f20\u5165\u4e00\u4e2a\u65b9\u6cd5\uff0c\u8be5\u65b9\u6cd5\u8fd4\u56de\u4e00\u4e2a\u57fa\u4e8e\u5f53\u524d\u72b6\u6001\u7684\u884d\u751f\uff0c\u4e0ecomputed \u4e00\u81f4\u3002 #### 3.effect hooks useEffect \u7528\u4e8e\u6dfb\u52a0\u7ec4\u4ef6\u72b6\u6001\u66f4\u65b0\u540e\uff0c\u9700\u8981\u6267\u884c\u7684\u526f\u4f5c\u7528\u903b\u8f91\u3002 useEffect \u6307\u5b9a\u7684\u526f\u4f5c\u7528\u903b\u8f91\uff0c\u4f1a\u5728\u7ec4\u4ef6\u6302\u8f7d\u540e\u6267\u884c\u4e00\u6b21\u3001\u5728\u6bcf\u6b21\u7ec4\u4ef6\u6e32\u67d3\u540e\u6839\u636e\u6307\u5b9a\u7684\u4f9d\u8d56\u6709\u9009\u62e9\u5730\u6267\u884c\u3001\u5e76\u5728\u7ec4\u4ef6\u5378\u8f7d\u65f6\u6267\u884c\u6e05\u7406\u903b\u8f91(\u5982\u679c\u6307\u5b9a\u4e86\u7684\u8bdd)\u3002 ```js import { withHooks, useState, useEffect } from \"vue-hooks\" const Foo = withHooks(h => { const [count, setCount] = useState(0) useEffect(() => { document.title = \"count is \" + count }) return h(\"div\", [ h(\"span\", `count is: ${count}`), h(\"button\", { on: { click: () => setCount(count + 1) } }, \"+\" ) ]) }) ``` \u4ee3\u7801\u4e2d\uff0c\u901a\u8fc7 useEffect \u4f7f\u6bcf\u5f53 count \u7684\u72b6\u6001\u503c\u53d8\u5316\u65f6\uff0c\u90fd\u4f1a\u91cd\u7f6e document.title\u3002 **\u6ce8\u610f:** \u8fd9\u91cc\u6ca1\u6709\u6307\u5b9a useEffect \u7684\u7b2c\u4e8c\u4e2a\u53c2\u6570 deps\uff0c\u8868\u793a\u53ea\u8981\u7ec4\u4ef6\u91cd\u65b0\u6e32\u67d3\u90fd\u4f1a\u6267\u884c useEffect \u6307\u5b9a\u7684\u903b\u8f91\uff0c\u4e0d\u9650\u5236\u5fc5\u987b\u662f count \u53d8\u5316\u65f6\u3002 #### 4.custom hooks ```js // a custom hook that sync with window width function useWindowWidth() { const [width, setWidth] = useState(window.innerWidth) const handleResize = () => { setWidth(window.innerWidth) }; useEffect(() => { window.addEventListener(\"resize\", handleResize) return () => { window.removeEventListener(\"resize\", handleResize) } }, []) return width } // custom hook const width = useWindowWidth() ``` \u5982\u679c\u628auseState\u548cuseEffect\u7528\u5355\u72ec\u7684\u51fd\u6570\u62bd\u79bb\u51fa\u6765\uff0c\u5f53\u4f5c\u901a\u7528\u7684\u65b9\u6cd5\uff0c\u5176\u5b9e\u5c31\u662fcustom hooks\u3001\u672c\u8d28\u5c31\u662f\u590d\u7528\u4ee3\u7801\u7684\u903b\u8f91\u800c\u5df2\u3002", "answer": "", "biz_type": 1, "qid": 588, "subject": "", "title": "vue hooks \u6709\u54ea\u4e9b"}, "tech_tag": ["Vue"], "uid": 0, "uname": ""}, {"audit_flag": 0, "corp_tag": ["\u5bfa\u5e93", "\u6d77\u5eb7\u5a01\u89c6"], "date": "Fri, 19 Jun 2020 16:20:43 GMT", "favorite_num": 12, "qid": 511, "qtype": "short_answer", "short_answer": {"analysis": "", "answer": "", "biz_type": 1, "qid": 511, "subject": "", "title": "\u4ecb\u7ecd\u5355\u9875\u5e94\u7528\u548c\u591a\u9875\u5e94\u7528\uff1f"}, "tech_tag": ["React", "Vue"], "uid": 0, "uname": ""}, {"audit_flag": 0, "corp_tag": ["\u4f1a\u5c0f\u4e8c"], "date": "Fri, 19 Jun 2020 16:20:43 GMT", "favorite_num": 10, "qid": 614, "qtype": "short_answer", "short_answer": {"analysis": "", "answer": "", "biz_type": 1, "qid": 614, "subject": "```js\nA.data \u4e2d\u67d0\u4e00\u5c5e\u6027\u7684\u503c\u53d1\u751f\u6539\u53d8\u540e\uff0c\u89c6\u56fe\u4f1a\u7acb\u5373\u540c\u6b65\u8fdb\u884c\u91cd\u65b0\u6e32\u67d3\nB.Vue \u5b9e\u4f8b\u521b\u5efa\u540e\u518d\u6dfb\u52a0\u7684\u5c5e\u6027\uff0c\u8be5\u5c5e\u6027\u6539\u52a8\u5c06\u4e0d\u4f1a\u89e6\u53d1\u89c6\u56fe\u66f4\u65b0\nC.\u8ba1\u7b97\u5c5e\u6027\u53ea\u6709\u5728\u5b83\u7684\u76f8\u5173\u4f9d\u8d56\u53d1\u751f\u6539\u53d8\u65f6\u624d\u4f1a\u91cd\u65b0\u6c42\u503c\nD.Vue \u7ec4\u4ef6\u7684 data \u9009\u9879\u5fc5\u987b\u662f\u51fd\u6570\n\n```\n", "title": "\u4e0b\u9762\u5173\u4e8e Vue \u8bf4\u6cd5\u6b63\u786e\u7684\u662f\uff1f(\u5355\u9009\u9898)"}, "tech_tag": ["Vue"], "uid": 0, "uname": ""}, {"audit_flag": 0, "corp_tag": [], "date": "Fri, 19 Jun 2020 16:20:43 GMT", "favorite_num": 8, "qid": 637, "qtype": "short_answer", "short_answer": {"analysis": "", "answer": "", "biz_type": 1, "qid": 637, "subject": "", "title": "\u4e3a\u4ec0\u4e48 Vue data \u5fc5\u987b\u662f\u51fd\u6570"}, "tech_tag": ["Vue"], "uid": 0, "uname": ""}, {"audit_flag": 0, "corp_tag": [], "date": "Fri, 19 Jun 2020 16:20:43 GMT", "favorite_num": 10, "qid": 589, "qtype": "short_answer", "short_answer": {"analysis": "\n### \u8fc7\u7a0b\u5206\u6790\n\nvue\u7684\u6a21\u7248\u7f16\u8bd1\u8fc7\u7a0b\u4e3b\u8981\u5982\u4e0b: **template->ast->render\u51fd\u6570**\n\nvue\u5728\u6a21\u7248\u7f16\u8bd1\u7248\u672c\u7684\u6e90\u7801\u4e2d\u4f1a\u6267\u884c `compileToFunctions`\u5c06template\u8f6c\u5316\u4e3arender\u51fd\u6570\n\n```js\n// \u5c06\u6a21\u677f\u7f16\u8bd1\u4e3arender\u51fd\u6570\nconst { render, staticRenderFns } = compileToFunctions(template,optinos//\u7701\u7565}, this)\n```\n\ncompileToFunctions\u4e2d\u7684\u4e3b\u8981\u903b\u8f91\u5982\u4e0b:\n\n#### 1.\u8c03\u7528parse\u65b9\u6cd5\u5c06template\u8f6c\u5316\u4e3aast(\u62bd\u8c61\u8bed\u6cd5\u6811)\n\n`const ast = parse(template.trim(), options)`\n\n**parse\u7684\u76ee\u6807:** \u662f\u628atamplate\u8f6c\u6362\u4e3aAST\u6811\uff0c\u5b83\u662f\u4e00\u79cd\u7528JavaScript\u5bf9\u8c61\u7684\u5f62\u5f0f\u6765\u63cf\u8ff0\u6574\u4e2a\u6a21\u677f\u3002\n\n**\u89e3\u6790\u8fc7\u7a0b:** \u5229\u7528\u6b63\u5219\u8868\u8fbe\u5f0f\u987a\u5e8f\u89e3\u6790\u6a21\u677f\uff0c\u5f53\u89e3\u6790\u5230\u5f00\u59cb\u6807\u7b7e\u3001\u95ed\u5408\u6807\u7b7e\u3001\u6587\u672c\u7684\u65f6\u5019\u90fd\u4f1a\u5206\u522b\u6267\u884c\u5bf9\u5e94\u7684\u00a0\u56de\u8c03\u51fd\u6570\uff0c\u6765\u8fbe\u5230\u6784\u9020AST\u6811\u7684\u76ee\u7684\u3002\n\nAST\u5143\u7d20\u8282\u70b9\u603b\u5171\u4e09\u79cd\u7c7b\u578b\uff1atype\u4e3a1\u8868\u793a\u666e\u901a\u5143\u7d20\u30012\u4f4d\u8868\u8fbe\u5f0f\u30013\u4e3a\u7eaf\u6587\u672c\n\n#### 2.\u5bf9\u9759\u6001\u8282\u70b9\u505a\u4f18\u5316\n\n`optimize(ast, options)`\n\n\u8fd9\u4e2a\u8fc7\u7a0b\u4e3b\u8981\u5206\u6790\u51fa\u54ea\u4e9b\u662f\u9759\u6001\u8282\u70b9\uff0c\u7ed9\u5176\u6253\u4e00\u4e2a\u6807\u8bb0\uff0c\u4e3a\u540e\u7eed\u66f4\u65b0\u6e32\u67d3\u53ef\u4ee5\u76f4\u63a5\u8df3\u8fc7\u9759\u6001\u8282\u70b9\u505a\u4f18\u5316\n\n**\u6df1\u5ea6\u904d\u5386AST**\uff0c\u67e5\u770b\u6bcf\u4e2a\u5b50\u6811\u7684\u8282\u70b9\u5143\u7d20\u662f\u5426\u4e3a\u9759\u6001\u8282\u70b9\u6216\u8005\u9759\u6001\u8282\u70b9\u6839\u3002\u5982\u679c\u4e3a\u9759\u6001\u8282\u70b9\uff0c\u4ed6\u4eec\u751f\u6210\u7684DOM\u6c38\u8fdc\u4e0d\u4f1a\u6539\u53d8\uff0c\u8fd9\u5bf9\u8fd0\u884c\u65f6\u6a21\u677f\u66f4\u65b0\u8d77\u5230\u4e86\u6781\u5927\u7684\u4f18\u5316\u4f5c\u7528\u3002\n\n#### 3.\u751f\u6210\u4ee3\u7801\n\n`const code = generate(ast, options)`\n\ngenerate\u5c06ast\u62bd\u8c61\u8bed\u6cd5\u6811\u7f16\u8bd1\u6210`render\u5b57\u7b26\u4e32`\u5e76\u5c06\u9759\u6001\u90e8\u5206\u653e\u5230staticRenderFns\u4e2d\uff0c\u6700\u540e\u901a\u8fc7 `new Function(render)` \u751f\u6210render\u51fd\u6570\u3002\n\n\n\n\n", "answer": "", "biz_type": 1, "qid": 589, "subject": "", "title": "\u4ecb\u7ecd Vue template \u5230 render \u7684\u8fc7\u7a0b"}, "tech_tag": ["Vue"], "uid": 0, "uname": ""}, {"audit_flag": 0, "corp_tag": [], "date": "Fri, 19 Jun 2020 16:20:43 GMT", "favorite_num": 8, "qid": 636, "qtype": "short_answer", "short_answer": {"analysis": "\n### \u4e3a\u4ec0\u4e48\u8981\u7528 Vuex \u6216\u8005 Redux\n\n\u7531\u4e8e\u4f20\u53c2\u7684\u65b9\u6cd5\u5bf9\u4e8e\u591a\u5c42\u5d4c\u5957\u7684\u7ec4\u4ef6\u5c06\u4f1a\u975e\u5e38\u7e41\u7410\uff0c\u5e76\u4e14\u5bf9\u4e8e\u5144\u5f1f\u7ec4\u4ef6\u95f4\u7684\u72b6\u6001\u4f20\u9012\u65e0\u80fd\u4e3a\u529b\u3002\u6211\u4eec\u7ecf\u5e38\u4f1a\u91c7\u7528\u7236\u5b50\u7ec4\u4ef6\u76f4\u63a5\u5f15\u7528\u6216\u8005\u901a\u8fc7\u4e8b\u4ef6\u6765\u53d8\u66f4\u548c\u540c\u6b65\u72b6\u6001\u7684\u591a\u4efd\u62f7\u8d1d\u3002\u4ee5\u4e0a\u7684\u8fd9\u4e9b\u6a21\u5f0f\u975e\u5e38\u8106\u5f31\uff0c\u901a\u5e38\u4f1a\u5bfc\u81f4\u4ee3\u7801\u65e0\u6cd5\u7ef4\u62a4\u3002\n\n\u6240\u4ee5\u6211\u4eec\u9700\u8981\u628a\u7ec4\u4ef6\u7684\u5171\u4eab\u72b6\u6001\u62bd\u53d6\u51fa\u6765\uff0c\u4ee5\u4e00\u4e2a\u5168\u5c40\u5355\u4f8b\u6a21\u5f0f\u7ba1\u7406\u3002\u5728\u8fd9\u79cd\u6a21\u5f0f\u4e0b\uff0c\u6211\u4eec\u7684\u7ec4\u4ef6\u6811\u6784\u6210\u4e86\u4e00\u4e2a\u5de8\u5927\u7684\u201c\u89c6\u56fe\u201d\uff0c\u4e0d\u7ba1\u5728\u6811\u7684\u54ea\u4e2a\u4f4d\u7f6e\uff0c\u4efb\u4f55\u7ec4\u4ef6\u90fd\u80fd\u83b7\u53d6\u72b6\u6001\u6216\u8005\u89e6\u53d1\u884c\u4e3a\uff01\n\n\u53e6\u5916\uff0c\u901a\u8fc7\u5b9a\u4e49\u548c\u9694\u79bb\u72b6\u6001\u7ba1\u7406\u4e2d\u7684\u5404\u79cd\u6982\u5ff5\u5e76\u5f3a\u5236\u9075\u5b88\u4e00\u5b9a\u7684\u89c4\u5219\uff0c\u6211\u4eec\u7684\u4ee3\u7801\u5c06\u4f1a\u53d8\u5f97\u66f4\u7ed3\u6784\u5316\u4e14\u6613\u7ef4\u62a4\u3002", "answer": "", "biz_type": 1, "qid": 636, "subject": "", "title": "\u4e3a\u4ec0\u4e48\u8981\u7528 Vuex \u6216\u8005 Redux\uff0c\u4e0d\u8981\u8bf4\u4e3a\u4e86\u4fdd\u5b58\u72b6\u6001"}, "tech_tag": ["Vue"], "uid": 0, "uname": ""}, {"audit_flag": 0, "corp_tag": [], "date": "Fri, 19 Jun 2020 16:20:42 GMT", "favorite_num": 7, "qid": 323, "qtype": "short_answer", "short_answer": {"analysis": "### \u7b54\u6848\n\n\u4e0d\u53ef\u4ee5\n\n### \u89e3\u6790\n\n**\u4e3b\u8981\u662f\u4e3a\u4e86\u7ef4\u62a4\u7236\u5b50\u7ec4\u4ef6\u7684\u5355\u5411\u6570\u636e\u6d41\u3002**\n\n\u6bcf\u6b21\u7236\u7ea7\u7ec4\u4ef6\u53d1\u751f\u66f4\u65b0\u65f6\uff0c\u5b50\u7ec4\u4ef6\u4e2d\u6240\u6709\u7684 prop \u90fd\u5c06\u4f1a\u5237\u65b0\u4e3a\u6700\u65b0\u7684\u503c\u3002\n\n\u5982\u679c\u8fd9\u6837\u505a\u4e86\uff0cVue \u4f1a\u5728\u6d4f\u89c8\u5668\u7684\u63a7\u5236\u53f0\u4e2d\u53d1\u51fa\u8b66\u544a\u3002\n\nVue\u63d0\u5021\u5355\u5411\u6570\u636e\u6d41,\u5373\u7236\u7ea7 props \u7684\u66f4\u65b0\u4f1a\u6d41\u5411\u5b50\u7ec4\u4ef6,\u4f46\u662f\u53cd\u8fc7\u6765\u5219\u4e0d\u884c\u3002\u8fd9\u662f\u4e3a\u4e86\u9632\u6b62\u610f\u5916\u7684\u6539\u53d8\u7236\u7ec4\u4ef6\u72b6\u6001\uff0c\u4f7f\u5f97\u5e94\u7528\u7684\u6570\u636e\u6d41\u53d8\u5f97\u96be\u4ee5\u7406\u89e3\uff0c\u5bfc\u81f4\u6570\u636e\u6d41\u6df7\u4e71\u3002\u5982\u679c\u7834\u574f\u4e86\u5355\u5411\u6570\u636e\u6d41\uff0c\u5f53\u5e94\u7528\u590d\u6742\u65f6\uff0cdebug \u7684\u6210\u672c\u4f1a\u975e\u5e38\u9ad8\u3002\n\n**\u53ea\u80fd\u901a\u8fc7 $emit \u6d3e\u53d1\u4e00\u4e2a\u81ea\u5b9a\u4e49\u4e8b\u4ef6\uff0c\u7236\u7ec4\u4ef6\u63a5\u6536\u5230\u540e\uff0c\u7531\u7236\u7ec4\u4ef6\u4fee\u6539\u3002**", "answer": "", "biz_type": 1, "qid": 323, "subject": "", "title": "\u5b50\u7ec4\u4ef6\u53ef\u4ee5\u76f4\u63a5\u6539\u53d8\u7236\u7ec4\u4ef6\u7684\u6570\u636e\u4e48\uff0c\u8bf4\u660e\u539f\u56e0"}, "tech_tag": ["Vue"], "uid": 0, "uname": ""}, {"audit_flag": 0, "corp_tag": ["\u6709\u8d5e", "\u5fae\u533b", "58"], "date": "Fri, 19 Jun 2020 16:20:42 GMT", "favorite_num": 20, "qid": 423, "qtype": "short_answer", "short_answer": {"analysis": "### \u4e00\u3001\u4ec0\u4e48\u662f\u865a\u62dfDom\n\n\u4ece\u672c\u8d28\u4e0a\u6765\u8bf4\uff0cVirtual Dom\u662f\u4e00\u4e2aJavaScript\u5bf9\u8c61\uff0c\u901a\u8fc7\u5bf9\u8c61\u7684\u65b9\u5f0f\u6765\u8868\u793aDOM\u7ed3\u6784\u3002\u5c06\u9875\u9762\u7684\u72b6\u6001\u62bd\u8c61\u4e3aJS\u5bf9\u8c61\u7684\u5f62\u5f0f\uff0c\u914d\u5408\u4e0d\u540c\u7684\u6e32\u67d3\u5de5\u5177\uff0c\u4f7f\u8de8\u5e73\u53f0\u6e32\u67d3\u6210\u4e3a\u53ef\u80fd\u3002\u901a\u8fc7\u4e8b\u52a1\u5904\u7406\u673a\u5236\uff0c\u5c06\u591a\u6b21DOM\u4fee\u6539\u7684\u7ed3\u679c\u4e00\u6b21\u6027\u7684\u66f4\u65b0\u5230\u9875\u9762\u4e0a\uff0c\u4ece\u800c**\u6709\u6548\u7684\u51cf\u5c11\u9875\u9762\u6e32\u67d3\u7684\u6b21\u6570\uff0c\u51cf\u5c11\u4fee\u6539DOM\u7684\u91cd\u7ed8\u91cd\u6392\u6b21\u6570\uff0c\u63d0\u9ad8\u6e32\u67d3\u6027\u80fd**\u3002\n\n\u865a\u62dfdom\u662f\u5bf9DOM\u7684\u62bd\u8c61\uff0c\u8fd9\u4e2a\u5bf9\u8c61\u662f\u66f4\u52a0\u8f7b\u91cf\u7ea7\u7684\u5bf9DOM\u7684\u63cf\u8ff0\u3002\u5b83\u8bbe\u8ba1\u7684\u6700\u521d\u76ee\u7684\uff0c\u5c31\u662f\u66f4\u597d\u7684\u8de8\u5e73\u53f0\uff0c\u6bd4\u5982Node.js\u5c31\u6ca1\u6709DOM,\u5982\u679c\u60f3\u5b9e\u73b0SSR,\u90a3\u4e48\u4e00\u4e2a\u65b9\u5f0f\u5c31\u662f\u501f\u52a9\u865a\u62dfdom, \u56e0\u4e3a\u865a\u62dfdom\u672c\u8eab\u662fjs\u5bf9\u8c61\u3002\n\u5728\u4ee3\u7801\u6e32\u67d3\u5230\u9875\u9762\u4e4b\u524d\uff0cvue\u6216\u8005react\u4f1a\u628a\u4ee3\u7801\u8f6c\u6362\u6210\u4e00\u4e2a\u5bf9\u8c61\uff08\u865a\u62dfDOM\uff09\u3002\u4ee5\u5bf9\u8c61\u7684\u5f62\u5f0f\u6765\u63cf\u8ff0\u771f\u5b9edom\u7ed3\u6784\uff0c\u6700\u7ec8\u6e32\u67d3\u5230\u9875\u9762\u3002\u5728\u6bcf\u6b21\u6570\u636e\u53d1\u751f\u53d8\u5316\u524d\uff0c\u865a\u62dfdom\u90fd\u4f1a\u7f13\u5b58\u4e00\u4efd\uff0c\u53d8\u5316\u4e4b\u65f6\uff0c\u73b0\u5728\u7684\u865a\u62dfdom\u4f1a\u4e0e\u7f13\u5b58\u7684\u865a\u62dfdom\u8fdb\u884c\u6bd4\u8f83\u3002\n\n\u5728vue\u6216\u8005react\u5185\u90e8\u5c01\u88c5\u4e86diff\u7b97\u6cd5\uff0c\u901a\u8fc7\u8fd9\u4e2a\u7b97\u6cd5\u6765\u8fdb\u884c\u6bd4\u8f83\uff0c\u6e32\u67d3\u65f6\u4fee\u6539\u6539\u53d8\u7684\u53d8\u5316\uff0c\u539f\u5148\u6ca1\u6709\u53d1\u751f\u6539\u53d8\u7684\u901a\u8fc7\u539f\u5148\u7684\u6570\u636e\u8fdb\u884c\u6e32\u67d3\u3002\n\n\u53e6\u5916\u73b0\u4ee3\u524d\u7aef\u6846\u67b6\u7684\u4e00\u4e2a\u57fa\u672c\u8981\u6c42\u5c31\u662f\u65e0\u987b\u624b\u52a8\u64cd\u4f5cDOM,\u4e00\u65b9\u9762\u662f\u56e0\u4e3a\u624b\u52a8\u64cd\u4f5cDOM\u65e0\u6cd5\u4fdd\u8bc1\u7a0b\u5e8f\u6027\u80fd\uff0c\u591a\u4eba\u534f\u4f5c\u7684\u9879\u76ee\u4e2d\u5982\u679creview\u4e0d\u4e25\u683c\uff0c\u53ef\u80fd\u4f1a\u6709\u5f00\u53d1\u8005\u5199\u51fa\u6027\u80fd\u8f83\u4f4e\u7684\u4ee3\u7801\uff0c\u53e6\u4e00\u65b9\u9762\u66f4\u91cd\u8981\u7684\u662f\u7701\u7565\u624b\u52a8DOM\u64cd\u4f5c\u53ef\u4ee5\u5927\u5927\u63d0\u9ad8\u5f00\u53d1\u6548\u7387\u3002\n\n### \u4e8c\u3001\u4e3a\u4ec0\u4e48\u8981\u7528 Virtual DOM\n\n#### 1.\u4fdd\u8bc1\u6027\u80fd\u4e0b\u9650\uff0c\u5728\u4e0d\u8fdb\u884c\u624b\u52a8\u4f18\u5316\u7684\u60c5\u51b5\u4e0b\uff0c\u63d0\u4f9b\u8fc7\u5f97\u53bb\u7684\u6027\u80fd\n\n\u770b\u4e00\u4e0b\u9875\u9762\u6e32\u67d3\u7684\u4e00\u4e2a\u6d41\u7a0b\uff1a\n\n- \u89e3\u6790HTNL \u261e \u751f\u6210DOM? \u261e \u751f\u6210 CSSOM \u261e Layout \u261e Paint \u261e Compiler\n\n\u4e0b\u9762\u5bf9\u6bd4\u4e00\u4e0b\u4fee\u6539DOM\u65f6\u771f\u5b9eDOM\u64cd\u4f5c\u548cVirtual DOM\u7684\u8fc7\u7a0b\uff0c\u6765\u770b\u4e00\u4e0b\u5b83\u4eec\u91cd\u6392\u91cd\u7ed8\u7684\u6027\u80fd\u6d88\u8017\uff1a\n\n- \u771f\u5b9eDOM\uff1a \u751f\u6210HTML\u5b57\u7b26\u4e32 + \u91cd\u5efa\u6240\u6709\u7684DOM\u5143\u7d20\n- Virtual DOM\uff1a \u751f\u6210vNode + DOMDiff + \u5fc5\u8981\u7684dom\u66f4\u65b0\n\nVirtual DOM\u7684\u66f4\u65b0DOM\u7684\u51c6\u5907\u5de5\u4f5c\u8017\u8d39\u66f4\u591a\u7684\u65f6\u95f4\uff0c\u4e5f\u5c31\u662fJS\u5c42\u9762\uff0c\u76f8\u6bd4\u4e8e\u66f4\u591a\u7684DOM\u64cd\u4f5c\u5b83\u7684\u6d88\u8d39\u662f\u6781\u5176\u4fbf\u5b9c\u7684\u3002\u5c24\u96e8\u6eaa\u5728\u793e\u533a\u8bba\u575b\u4e2d\u8bf4\u9053\uff1a **\u6846\u67b6\u7ed9\u4f60\u7684\u4fdd\u8bc1\u662f\uff0c\u4f60\u4e0d\u9700\u8981\u624b\u52a8\u4f18\u5316\u7684\u60c5\u51b5\u4e0b\uff0c\u6211\u4f9d\u7136\u53ef\u4ee5\u7ed9\u4f60\u63d0\u4f9b\u8fc7\u5f97\u53bb\u7684\u6027\u80fd\u3002**\n\n#### 2.\u8de8\u5e73\u53f0\n\nVirtual DOM\u672c\u8d28\u4e0a\u662fJavaScript\u7684\u5bf9\u8c61\uff0c\u5b83\u53ef\u4ee5\u5f88\u65b9\u4fbf\u7684\u8de8\u5e73\u53f0\u64cd\u4f5c\uff0c\u6bd4\u5982\u670d\u52a1\u7aef\u6e32\u67d3\u3001uniapp\u7b49\u3002\n\n### \u4e09\u3001Virtual DOM\u771f\u7684\u6bd4\u771f\u5b9eDOM\u6027\u80fd\u597d\u5417\n\n1. \u9996\u6b21\u6e32\u67d3\u5927\u91cfDOM\u65f6\uff0c\u7531\u4e8e\u591a\u4e86\u4e00\u5c42\u865a\u62dfDOM\u7684\u8ba1\u7b97\uff0c\u4f1a\u6bd4innerHTML\u63d2\u5165\u6162\u3002\n2. \u6b63\u5982\u5b83\u80fd\u4fdd\u8bc1\u6027\u80fd\u4e0b\u9650\uff0c\u5728\u771f\u5b9eDOM\u64cd\u4f5c\u7684\u65f6\u5019\u8fdb\u884c\u9488\u5bf9\u6027\u7684\u4f18\u5316\u65f6\uff0c\u8fd8\u662f\u66f4\u5feb\u7684\u3002\n\n\n", "answer": "", "biz_type": 1, "qid": 423, "subject": "", "title": "\u5bf9\u865a\u62df DOM \u7684\u7406\u89e3\uff1f\u865a\u62df DOM \u4e3b\u8981\u505a\u4e86\u4ec0\u4e48\uff1f\u865a\u62df DOM \u672c\u8eab\u662f\u4ec0\u4e48\uff1f"}, "tech_tag": ["React", "Vue"], "uid": 0, "uname": ""}, {"audit_flag": 0, "corp_tag": ["58"], "date": "Fri, 19 Jun 2020 16:20:42 GMT", "favorite_num": 4, "qid": 446, "qtype": "short_answer", "short_answer": {"analysis": "", "answer": "", "biz_type": 1, "qid": 446, "subject": "", "title": "Vue \u4e2d\u4e00\u6b21\u6027 200 \u6761\u5f39\u5e55\u600e\u4e48\u5904\u7406"}, "tech_tag": ["Vue"], "uid": 0, "uname": ""}, {"audit_flag": 0, "corp_tag": [], "date": "Fri, 19 Jun 2020 16:20:42 GMT", "favorite_num": 13, "qid": 322, "qtype": "short_answer", "short_answer": {"analysis": "\n### \u4e00\u3001Vue3\n\n#### 1.Vue 3 \u91cd\u5199\u4e86\u591a\u79cd\u673a\u5236\n\n\u4e3b\u8981\u662f\u57fa\u4e8e\uff1a\n\n1. \u4e3b\u6d41\u6d4f\u89c8\u5668\u5bf9\u65b0\u7684 JavaScript \u8bed\u8a00\u7279\u6027\u7684\u666e\u904d\u652f\u6301\u3002\n2. \u5f53\u524dVue\u4ee3\u7801\u5e93\u968f\u7740\u65f6\u95f4\u7684\u63a8\u79fb\u800c\u66b4\u9732\u51fa\u6765\u7684\u8bbe\u8ba1\u548c\u4f53\u7cfb\u67b6\u6784\u95ee\u9898\u3002\n\n#### 2.Vue 3 \u8f83 2 \u505a\u4e86\u5f88\u591a\u4f18\u5316\n\n1. **\u91cd\u5199 VDOM \u673a\u5236:** \u901a\u8fc7\u7f16\u8bd1\u65f6\u7684\u6807\u8bb0\u4f18\u5316\u8fd0\u884c\u65f6\u7684\u901f\u5ea6\u3002\n2. **\u4f18\u5316\u63d2\u69fd\uff08slot\uff09\u751f\u6210:** \u539f\u6765\u7684\u5b9e\u73b0\uff0c\u7236\u7ec4\u4ef6\u91cd\u6e32\u67d3\u65f6\u5b50\u7ec4\u4ef6\u4e5f\u5fc5\u987b\u540c\u65f6\u91cd\u6e32\u67d3\uff0c\u800c\u5728 3 \u4e2d\u5b50\u7ec4\u4ef6\u63d0\u53d6\u51fd\u6570\uff0c\u53ef\u4ee5\u5206\u522b\u6e32\u67d3\u3002\n3. **\u9759\u6001\u6811\u63d0\u5347:** \u6ca1\u6709\u54cd\u5e94\u5f0f\u7ed1\u5b9a\u7684\u90e8\u5206\u88ab\u63d0\u53d6\u51fa\u6765\u4f5c\u4e3a\u5e38\u91cf\uff0c\u7528\u5230\u7684\u65f6\u5019\u4e0d\u7528\u518d\u6b21\u6267\u884c\u5b83\u7684\u6e32\u67d3\u51fd\u6570\u3002\n4. **\u9759\u6001\u5c5e\u6027\u63d0\u5347:** \u6ca1\u6709\u54cd\u5e94\u5f0f\u7ed1\u5b9a\u7684\u7ec4\u4ef6\u5c5e\u6027\uff08props\uff09\u88ab\u63d0\u53d6\u51fa\u6765\u4f5c\u4e3a\u5e38\u91cf\uff0c\u7528\u5230\u7684\u65f6\u5019\u4e0d\u7528\u518d\u8fdb\u884c\u521b\u5efa\u3002\n5. **\u9879\u76ee\u7ed3\u6784\u4f18\u5316:** \u5185\u90e8\u89e3\u8026\uff0c\u66f4\u597d\u7ef4\u62a4\uff0c\u652f\u6301\u4e86\u7ec6\u7c92\u5ea6\u7684 tree-shaking \u5982\u53ef\u9009\u7684\u751f\u547d\u5468\u671f\u3002\n\n#### 3.Object.defineProperty\u4e0eProxy\n\n\u5728 Vue2 \u4e2d\uff0c`Object.defineProperty` \u4f1a\u6539\u53d8\u539f\u59cb\u6570\u636e\uff0c\u800c `Proxy` \u662f\u521b\u5efa\u5bf9\u8c61\u7684\u865a\u62df\u8868\u793a\uff0c\u5e76\u63d0\u4f9b `set`\u3001`get` \u548c `deleteProperty` \u7b49\u5904\u7406\u5668\uff0c\u8fd9\u4e9b\u5904\u7406\u5668\u53ef\u5728\u8bbf\u95ee\u6216\u4fee\u6539\u539f\u59cb\u5bf9\u8c61\u4e0a\u7684\u5c5e\u6027\u65f6\u8fdb\u884c\u62e6\u622a\uff0c\u6709\u4ee5\u4e0b\u7279\u70b9\uff1a\n\n1. \u4e0d\u9700\u7528\u4f7f\u7528 `Vue.$set` \u6216 `Vue.$delete` \u89e6\u53d1\u54cd\u5e94\u5f0f\u3002\n2. \u5168\u65b9\u4f4d\u7684\u6570\u7ec4\u53d8\u5316\u68c0\u6d4b\uff0c\u6d88\u9664\u4e86 Vue2 \u65e0\u6548\u7684\u8fb9\u754c\u60c5\u51b5\u3002\n3. \u652f\u6301 `Map`\uff0c`Set`\uff0c`WeakMap` \u548c `WeakSet`\u3002\n\nProxy \u5b9e\u73b0\u7684\u54cd\u5e94\u5f0f\u539f\u7406\u4e0e Vue2 \u7684\u5b9e\u73b0\u539f\u7406\u76f8\u540c\uff0c\u5b9e\u73b0\u65b9\u5f0f\u5927\u540c\u5c0f\u5f02\uff1a\n\n- get \u6536\u96c6\u4f9d\u8d56\n- set\u3001delete \u7b49\u89e6\u53d1\u4f9d\u8d56\n- \u5bf9\u4e8e\u96c6\u5408\u7c7b\u578b\uff0c\u5c31\u662f\u5bf9\u96c6\u5408\u5bf9\u8c61\u7684\u65b9\u6cd5\u505a\u4e00\u5c42\u5305\u88c5\uff1a\u539f\u65b9\u6cd5\u6267\u884c\u540e\u6267\u884c\u4f9d\u8d56\u76f8\u5173\u7684\u6536\u96c6\u6216\u89e6\u53d1\u903b\u8f91\u3002", "answer": "", "biz_type": 1, "qid": 322, "subject": "", "title": "\u8bf4\u4e00\u4e0b\u5bf9 vue3.0 \u7684\u4e86\u89e3\uff0cvue3.0 \u4e3a\u4ec0\u4e48\u8981\u7528\u4ee3\u7406"}, "tech_tag": ["Vue"], "uid": 0, "uname": ""}, {"audit_flag": 0, "corp_tag": ["\u8109\u8109", "58"], "date": "Fri, 19 Jun 2020 16:20:41 GMT", "favorite_num": 10, "qid": 218, "qtype": "short_answer", "short_answer": {"analysis": "### \u751f\u547d\u5468\u671f\n\n- **beforeCreate\uff08\u521b\u5efa\u524d\uff09** \u5728\u6570\u636e\u89c2\u6d4b\u548c\u521d\u59cb\u5316\u4e8b\u4ef6\u8fd8\u672a\u5f00\u59cb\n- **created\uff08\u521b\u5efa\u540e\uff09** \u5b8c\u6210\u6570\u636e\u89c2\u6d4b\uff0c\u5c5e\u6027\u548c\u65b9\u6cd5\u7684\u8fd0\u7b97\uff0c\u521d\u59cb\u5316\u4e8b\u4ef6\uff0c$el\u5c5e\u6027\u8fd8\u6ca1\u6709\u663e\u793a\u51fa\u6765\n- **beforeMounted(\u6302\u8f7d\u524d)** \u5728\u6302\u8f7d\u5f00\u59cb\u4e4b\u524d\u88ab\u8c03\u7528\uff0c\u76f8\u5173\u7684render\u51fd\u6570\u9996\u6b21\u88ab\u8c03\u7528\u3002\u5b9e\u4f8b\u5df2\u5b8c\u6210\u4ee5\u4e0b\u7684\u914d\u7f6e\uff1a\u7f16\u8bd1\u6a21\u677f\uff0c\u628adata\u91cc\u9762\u7684\u6570\u636e\u548c\u6a21\u677f\u751f\u6210html\u3002\u6b64\u65f6\u8fd8\u6ca1\u6709\u6302\u8f7dhtml\u5230\u9875\u9762\u4e0a\u3002\n- **mounted\uff08\u6302\u8f7d\u540e)** \u5728el\u88ab\u65b0\u521b\u5efa\u7684 vm.$el \u66ff\u6362\uff0c\u5e76\u6302\u8f7d\u5230\u5b9e\u4f8b\u4e0a\u53bb\u4e4b\u540e\u8c03\u7528\u3002\u5b9e\u4f8b\u5df2\u5b8c\u6210\u4ee5\u4e0b\u7684\u914d\u7f6e\uff1a\u7528\u4e0a\u9762\u7f16\u8bd1\u597d\u7684html\u5185\u5bb9\u66ff\u6362el\u5c5e\u6027\u6307\u5411\u7684DOM\u5bf9\u8c61\u3002\u5b8c\u6210\u6a21\u677f\u4e2d\u7684html\u6e32\u67d3\u5230html \u9875\u9762\u4e2d\u3002\u6b64\u8fc7\u7a0b\u4e2d\u8fdb\u884cajax\u4ea4\u4e92\u3002\n- **beforeUpdate\uff08\u66f4\u65b0\u524d\uff09** \u5728\u6570\u636e\u66f4\u65b0\u4e4b\u524d\u8c03\u7528\uff0c\u53d1\u751f\u5728\u865a\u62dfDOM\u91cd\u65b0\u6e32\u67d3\u548c\u6253\u8865\u4e01\u4e4b\u524d\u3002\u53ef\u4ee5\u5728\u8be5\u94a9\u5b50\u4e2d\u8fdb\u4e00\u6b65\u5730\u66f4\u6539\u72b6\u6001\uff0c\u4e0d\u4f1a\u89e6\u53d1\u9644\u52a0\u7684\u91cd\u6e32\u67d3\u8fc7\u7a0b\u3002\n- **updated\uff08\u66f4\u65b0\u540e\uff09** \u5728\u7531\u4e8e\u6570\u636e\u66f4\u6539\u5bfc\u81f4\u7684\u865a\u62dfDOM\u91cd\u65b0\u6e32\u67d3\u548c\u6253\u8865\u4e01\u4e4b\u540e\u8c03\u7528\u3002\u8c03\u7528\u65f6\uff0c\u7ec4\u4ef6DOM\u5df2\u7ecf\u66f4\u65b0\uff0c\u6240\u4ee5\u53ef\u4ee5\u6267\u884c\u4f9d\u8d56\u4e8eDOM\u7684\u64cd\u4f5c\u3002\u7136\u800c\u5728\u5927\u591a\u6570\u60c5\u51b5\u4e0b\uff0c\u5e94\u8be5\u907f\u514d\u5728\u6b64\u671f\u95f4\u66f4\u6539\u72b6\u6001\uff0c \u56e0\u4e3a\u8fd9\u53ef\u80fd\u4f1a\u5bfc\u81f4\u66f4\u65b0\u65e0\u9650\u5faa\u73af\u3002\u8be5\u94a9\u5b50\u5728\u670d\u52a1\u5668\u7aef\u6e32\u67d3\u671f\u95f4\u4e0d\u88ab\u8c03\u7528\u3002\n- **beforeDestroy\uff08\u9500\u6bc1\u524d\uff09** \u5728\u5b9e\u4f8b\u9500\u6bc1\u4e4b\u524d\u8c03\u7528\u3002\u5b9e\u4f8b\u4ecd\u7136\u5b8c\u5168\u53ef\u7528\u3002\n- **destroyed\uff08\u9500\u6bc1\u540e\uff09** \u5728\u5b9e\u4f8b\u9500\u6bc1\u4e4b\u540e\u8c03\u7528\u3002\u8c03\u7528\u540e\uff0c\u6240\u6709\u7684\u4e8b\u4ef6\u76d1\u542c\u5668\u4f1a\u88ab\u79fb\u9664\uff0c\u6240\u6709\u7684\u5b50\u5b9e\u4f8b\u4e5f\u4f1a\u88ab\u9500\u6bc1\u3002\u8be5\u94a9\u5b50\u5728\u670d\u52a1\u5668\u7aef\u6e32\u67d3\u671f\u95f4\u4e0d\u88ab\u8c03\u7528\u3002", "answer": "", "biz_type": 1, "qid": 218, "subject": "", "title": "\u7b80\u8ff0 Vue \u7684\u751f\u547d\u5468\u671f\u4ee5\u53ca\u6bcf\u4e2a\u9636\u6bb5\u505a\u7684\u4e8b"}, "tech_tag": ["Vue"], "uid": 0, "uname": ""}, {"audit_flag": 0, "corp_tag": ["\u9ad8\u5fb7"], "date": "Fri, 19 Jun 2020 16:20:41 GMT", "favorite_num": 8, "qid": 200, "qtype": "short_answer", "short_answer": {"analysis": "### \u6e90\u7801\u5b9e\u73b0\n\n\u91cd\u5199\u7684\u65b9\u6cd5\u6709\n\n- `push`\n- `pop`\n- `shift`\n- `unshift`\n- `splice`\n- `sort`\n- `reverse`\n\n\u7b80\u5355\u6765\u8bf4,Vue \u901a\u8fc7\u539f\u578b\u62e6\u622a\u7684\u65b9\u5f0f\u91cd\u5199\u4e86\u6570\u7ec4\u7684 7 \u4e2a\u65b9\u6cd5,\u9996\u5148\u83b7\u53d6\u5230\u8fd9\u4e2a\u6570\u7ec4\u7684**ob**,\u4e5f\u5c31\u662f\u5b83\u7684 Observer \u5bf9\u8c61,\u5982\u679c\u6709\u65b0\u7684\u503c,\u5c31\u8c03\u7528 observeArray \u5bf9\u65b0\u7684\u503c\u8fdb\u884c\u76d1\u542c,\u7136\u540e\u624b\u52a8\u8c03\u7528 notify,\u901a\u77e5 render watcher,\u6267\u884c update\n\n```js\nconst\u00a0arrayProto\u00a0=\u00a0Array.prototype;\nexport\u00a0const\u00a0arrayMethods\u00a0=\u00a0Object.create(arrayProto);\nconst\u00a0methodsToPatch\u00a0=\u00a0[\u00a0\u00a0\"push\",\u00a0\u00a0\"pop\",\u00a0\u00a0\"shift\",\u00a0\u00a0\"unshift\",\u00a0\u00a0\"splice\",\u00a0\u00a0\"sort\",\u00a0\u00a0\"reverse\"];\n/**\u00a0*\u00a0Intercept\u00a0mutating\u00a0methods\u00a0and\u00a0emit\u00a0events\u00a0*/\nmethodsToPatch.forEach(function(method)\u00a0{\u00a0\u00a0//\u00a0cache\u00a0original\u00a0method\u00a0\u00a0\n const\u00a0original\u00a0=\u00a0arrayProto[method];\u00a0\u00a0\n def(arrayMethods,\u00a0method,\u00a0function\u00a0mutator(...args)\u00a0{\u00a0\u00a0\u00a0\u00a0\n const\u00a0result\u00a0=\u00a0original.apply(this,\u00a0args);\u00a0\u00a0\u00a0\u00a0\n const\u00a0ob\u00a0=\u00a0this.__ob__;\u00a0\u00a0\u00a0\u00a0\n let\u00a0inserted;\u00a0\u00a0\u00a0\u00a0\n switch\u00a0(method)\u00a0{\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n case\u00a0\"push\":\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n case\u00a0\"unshift\":\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n inserted\u00a0=\u00a0args;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n break;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n case\u00a0\"splice\":\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n inserted\u00a0=\u00a0args.slice(2);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n break;\u00a0\u00a0\u00a0\u00a0\n }\u00a0\u00a0\u00a0\u00a0\n if\u00a0(inserted)\u00a0ob.observeArray(inserted);\u00a0\u00a0\u00a0\u00a0\n //\u00a0notify\u00a0change\u00a0\u00a0\u00a0\u00a0\n ob.dep.notify();\u00a0\u00a0\u00a0\u00a0\n return\u00a0result;\u00a0\u00a0\n });\n});\n/**\u00a0*\u00a0Observe\u00a0a\u00a0list\u00a0of\u00a0Array\u00a0items.\u00a0*/\nObserver.prototype.observeArray\u00a0=\u00a0function\u00a0observeArray(items)\u00a0{\u00a0\u00a0\n for\u00a0(var\u00a0i\u00a0=\u00a00,\u00a0l\u00a0=\u00a0items.length;\u00a0i\u00a0<\u00a0l;\u00a0i++)\u00a0{\n observe(items[i]);\u00a0\u00a0\n }\n};\n```", "answer": "", "biz_type": 1, "qid": 200, "subject": "", "title": "vue \u5bf9\u6570\u7ec4\u7684\u65b9\u6cd5\u505a\u4e86\u91cd\u5199\u7684\u64cd\u4f5c\uff0c\u5982\u4f55\u5b9e\u73b0\u5bf9 vue2 \u4e2d\u5bf9\u6570\u7ec4\u64cd\u4f5c\u7684 push()\u65b9\u6cd5"}, "tech_tag": ["Vue"], "uid": 0, "uname": ""}, {"audit_flag": 0, "corp_tag": ["\u81ea\u5982"], "date": "Fri, 19 Jun 2020 16:20:41 GMT", "favorite_num": 9, "qid": 246, "qtype": "short_answer", "short_answer": {"analysis": "### \u5b9e\u73b0\u539f\u7406\n\nvue-router\u7684\u539f\u7406\u5c31\u662f\u66f4\u65b0\u89c6\u56fe\u800c\u4e0d\u91cd\u65b0\u8bf7\u6c42\u9875\u9762\u3002\n\nvue-router\u53ef\u4ee5\u901a\u8fc7mode\u53c2\u6570\u8bbe\u7f6e\u4e3a\u4e09\u79cd\u6a21\u5f0f\uff1a**hash\u6a21\u5f0f\u3001history\u6a21\u5f0f**\u3001**abstract\u6a21\u5f0f** \u3002\n\n#### 1.hash\u6a21\u5f0f\n\n\u9ed8\u8ba4\u662fhash\u6a21\u5f0f,\u57fa\u4e8e\u6d4f\u89c8\u5668history api\uff0c\u4f7f\u7528 `window.addEventListener(\"hashchange\",callback,false)` \u5bf9\u6d4f\u89c8\u5668\u5730\u5740\u8fdb\u884c\u76d1\u542c\u3002\u5f53\u8c03\u7528push\u65f6\uff0c\u628a\u65b0\u8def\u7531\u6dfb\u52a0\u5230\u6d4f\u89c8\u5668\u8bbf\u95ee\u5386\u53f2\u7684\u6808\u9876\u3002\u4f7f\u7528replace\u65f6\uff0c\u628a\u6d4f\u89c8\u5668\u8bbf\u95ee\u5386\u53f2\u7684\u6808\u9876\u8def\u7531\u66ff\u6362\u6210\u65b0\u8def\u7531\u3002\n\nhash\u503c\u7b49\u4e8eurl\u4e2d#\u53ca\u5176\u4ee5\u540e\u7684\u5185\u5bb9\u3002\u6d4f\u89c8\u5668\u662f\u6839\u636ehash\u503c\u7684\u53d8\u5316\uff0c\u5c06\u9875\u9762\u52a0\u8f7d\u5230\u76f8\u5e94\u7684DOM\u4f4d\u7f6e\u3002\u951a\u70b9\u53d8\u5316\u53ea\u662f\u6d4f\u89c8\u5668\u7684\u884c\u4e3a\uff0c\u6bcf\u6b21\u951a\u70b9\u53d8\u5316\u540e\u4f9d\u7136\u4f1a\u5728\u6d4f\u89c8\u5668\u4e2d\u7559\u4e0b\u4e00\u6761\u5386\u53f2\u8bb0\u5f55\uff0c\u53ef\u4ee5\u901a\u8fc7\u6d4f\u89c8\u5668\u7684\u540e\u9000\u6309\u94ae\u56de\u5230\u4e0a\u4e00\u4e2a\u4f4d\u7f6e\u3002\n\n#### 2.History\n\nhistory\u6a21\u5f0f\uff0c\u57fa\u4e8e\u6d4f\u89c8\u5668history api\uff0c\u4f7f\u7528 `window.onpopstate` \u5bf9\u6d4f\u89c8\u5668\u5730\u5740\u8fdb\u884c\u76d1\u542c\u3002\u5bf9\u6d4f\u89c8\u5668history api\u4e2d`pushState()`\u3001`replaceState()` \u8fdb\u884c\u5c01\u88c5\uff0c\n\u5f53\u65b9\u6cd5\u8c03\u7528\uff0c\u4f1a\u5bf9\u6d4f\u89c8\u5668\u5386\u53f2\u6808\u8fdb\u884c\u4fee\u6539\u3002\u4ece\u800c\u5b9e\u73b0URL\u7684\u8df3\u8f6c\u800c\u65e0\u9700\u91cd\u65b0\u52a0\u8f7d\u9875\u9762\u3002\n\n\u4f46\u662f\u5b83\u7684\u95ee\u9898\u5728\u4e8e\u5f53\u5237\u65b0\u9875\u9762\u7684\u65f6\u5019\u4f1a\u8d70\u540e\u7aef\u8def\u7531\uff0c\u6240\u4ee5\u9700\u8981\u670d\u52a1\u7aef\u7684\u8f85\u52a9\u6765\u515c\u5e95\uff0c\u907f\u514dURL\u65e0\u6cd5\u5339\u914d\u5230\u8d44\u6e90\u65f6\u80fd\u8fd4\u56de\u9875\u9762\u3002\n\n#### 3.abstract\n\n\u4e0d\u6d89\u53ca\u548c\u6d4f\u89c8\u5668\u5730\u5740\u7684\u76f8\u5173\u8bb0\u5f55\u3002\u6d41\u7a0b\u8ddfhash\u6a21\u5f0f\u4e00\u6837\uff0c\u901a\u8fc7\u6570\u7ec4\u7ef4\u62a4\u6a21\u62df\u6d4f\u89c8\u5668\u7684\u5386\u53f2\u8bb0\u5f55\u6808\u3002\n\n\u670d\u52a1\u7aef\u4e0b\u4f7f\u7528\u3002\u4f7f\u7528\u4e00\u4e2a\u4e0d\u4f9d\u8d56\u4e8e\u6d4f\u89c8\u5668\u7684\u6d4f\u89c8\u5386\u53f2\u865a\u62df\u7ba1\u7406\u540e\u53f0\u3002\n\n#### 4.\u603b\u7ed3\n\nhash\u6a21\u5f0f\u548chistory\u6a21\u5f0f\u90fd\u662f\u901a\u8fc7 `window.addEventListenter()` \u65b9\u6cd5\u76d1\u542c `hashchange` \u548c `popState` \u8fdb\u884c\u76f8\u5e94\u8def\u7531\u7684\u64cd\u4f5c\u3002\u53ef\u4ee5\u901a\u8fc7back\u3001foward\u3001go\u7b49\u65b9\u6cd5\u8bbf\u95ee\u6d4f\u89c8\u5668\u7684\u5386\u53f2\u8bb0\u5f55\u6808\uff0c\u8fdb\u884c\u5404\u79cd\u8df3\u8f6c\u3002\u800cabstract\u6a21\u5f0f\u662f\u81ea\u5df1\u7ef4\u62a4\u4e00\u4e2a\u6a21\u62df\u7684\u6d4f\u89c8\u5668\u5386\u53f2\u8bb0\u5f55\u6808\u7684\u6570\u7ec4\u3002", "answer": "", "biz_type": 1, "qid": 246, "subject": "", "title": "\u8bf4\u4e00\u4e0b vue-router \u7684\u539f\u7406"}, "tech_tag": ["Vue"], "uid": 0, "uname": ""}, {"audit_flag": 0, "corp_tag": ["\u8109\u8109"], "date": "Fri, 19 Jun 2020 16:20:41 GMT", "favorite_num": 6, "qid": 217, "qtype": "short_answer", "short_answer": {"analysis": "### \u57fa\u672c\u539f\u7406\n\n\u5f53\u4e00\u4e2aVue\u5b9e\u4f8b\u521b\u5efa\u65f6\uff0cvue\u4f1a\u904d\u5386data\u9009\u9879\u7684\u5c5e\u6027\uff0c\u7528 `Object.defineProperty` (vue3.0\u4f7f\u7528proxy )\u5c06\u5b83\u4eec\u8f6c\u4e3a `getter/setter` \u5e76\u4e14\u5728\u5185\u90e8\u8ffd\u8e2a\u76f8\u5173\u4f9d\u8d56\uff0c\u5728\u5c5e\u6027\u88ab\u8bbf\u95ee\u548c\u4fee\u6539\u65f6\u901a\u77e5\u53d8\u5316\u3002 \u6bcf\u4e2a\u7ec4\u4ef6\u5b9e\u4f8b\u90fd\u6709\u76f8\u5e94\u7684watcher\u7a0b\u5e8f\u5b9e\u4f8b\uff0c\u5b83\u4f1a\u5728\u7ec4\u4ef6\u6e32\u67d3\u7684\u8fc7\u7a0b\u4e2d\u628a\u5c5e\u6027\u8bb0\u5f55\u4e3a\u4f9d\u8d56\uff0c\u4e4b\u540e\u5f53\u4f9d\u8d56\u9879\u7684setter\u88ab\u8c03\u7528\u65f6\uff0c\u4f1a\u901a\u77e5watcher\u91cd\u65b0\u8ba1\u7b97\uff0c\u4ece\u800c\u81f4\u4f7f\u5b83\u5173\u8054\u7684\u7ec4\u4ef6\u5f97\u4ee5\u66f4\u65b0\u3002\n\n\n\n\n", "answer": "", "biz_type": 1, "qid": 217, "subject": "", "title": "\u7b80\u8ff0 Vue \u7684\u57fa\u672c\u539f\u7406"}, "tech_tag": ["Vue"], "uid": 0, "uname": ""}, {"audit_flag": 0, "corp_tag": ["\u81ea\u5982"], "date": "Fri, 19 Jun 2020 16:20:41 GMT", "favorite_num": 7, "qid": 245, "qtype": "short_answer", "short_answer": {"analysis": "### \u4e00\u3001\u9996\u5148\u6765\u4e86\u89e3\u4e0bjs\u7684\u8fd0\u884c\u673a\u5236\n\n> JS \u8fd0\u884c\u673a\u5236\uff08Event Loop\uff09\n\nJS \u6267\u884c\u662f\u5355\u7ebf\u7a0b\u7684\uff0c\u5b83\u662f\u57fa\u4e8e\u4e8b\u4ef6\u5faa\u73af\u7684\u3002\n\n- \u6240\u6709\u540c\u6b65\u4efb\u52a1\u90fd\u5728\u4e3b\u7ebf\u7a0b\u4e0a\u6267\u884c\uff0c\u5f62\u6210\u4e00\u4e2a\u6267\u884c\u6808\u3002\n- \u4e3b\u7ebf\u7a0b\u4e4b\u5916\uff0c\u4f1a\u5b58\u5728\u4e00\u4e2a\u4efb\u52a1\u961f\u5217\uff0c\u53ea\u8981\u5f02\u6b65\u4efb\u52a1\u6709\u4e86\u7ed3\u679c\uff0c\u5c31\u5728\u4efb\u52a1\u961f\u5217\u4e2d\u653e\u7f6e\u4e00\u4e2a\u4e8b\u4ef6\u3002\n- \u5f53\u6267\u884c\u6808\u4e2d\u7684\u6240\u6709\u540c\u6b65\u4efb\u52a1\u6267\u884c\u5b8c\u540e\uff0c\u5c31\u4f1a\u8bfb\u53d6\u4efb\u52a1\u961f\u5217\u3002\u90a3\u4e9b\u5bf9\u5e94\u7684\u5f02\u6b65\u4efb\u52a1\uff0c\u4f1a\u7ed3\u675f\u7b49\u5f85\u72b6\u6001\uff0c\u8fdb\u5165\u6267\u884c\u6808\u3002\n- \u4e3b\u7ebf\u7a0b\u4e0d\u65ad\u91cd\u590d\u7b2c\u4e09\u6b65\u3002\n\n\u8fd9\u91cc\u4e3b\u7ebf\u7a0b\u7684\u6267\u884c\u8fc7\u7a0b\u5c31\u662f\u4e00\u4e2a tick\uff0c\u800c\u6240\u6709\u7684\u5f02\u6b65\u7ed3\u679c\u90fd\u662f\u901a\u8fc7\u4efb\u52a1\u961f\u5217\u6765\u8c03\u5ea6\u3002Event Loop \u5206\u4e3a\u5b8f\u4efb\u52a1\u548c\u5fae\u4efb\u52a1\uff0c\u65e0\u8bba\u662f\u6267\u884c\u5b8f\u4efb\u52a1\u8fd8\u662f\u5fae\u4efb\u52a1\uff0c\u5b8c\u6210\u540e\u90fd\u4f1a\u8fdb\u5165\u5230\u4e00\u4e0b tick\uff0c\u5e76\u5728\u4e24\u4e2a tick \u4e4b\u95f4\u8fdb\u884c UI \u6e32\u67d3\u3002\n\n\u7531\u4e8e Vue DOM \u66f4\u65b0\u662f\u5f02\u6b65\u6267\u884c\u7684\uff0c\u5373\u4fee\u6539\u6570\u636e\u65f6\uff0c\u89c6\u56fe\u4e0d\u4f1a\u7acb\u5373\u66f4\u65b0\uff0c\u800c\u662f\u4f1a\u76d1\u542c\u6570\u636e\u53d8\u5316\uff0c\u5e76\u7f13\u5b58\u5728\u540c\u4e00\u4e8b\u4ef6\u5faa\u73af\u4e2d\uff0c\u7b49\u540c\u4e00\u6570\u636e\u5faa\u73af\u4e2d\u7684\u6240\u6709\u6570\u636e\u53d8\u5316\u5b8c\u6210\u4e4b\u540e\uff0c\u518d\u7edf\u4e00\u8fdb\u884c\u89c6\u56fe\u66f4\u65b0\u3002\u4e3a\u4e86\u786e\u4fdd\u5f97\u5230\u66f4\u65b0\u540e\u7684 DOM\uff0c\u6240\u4ee5\u8bbe\u7f6e\u4e86 Vue.nextTick()\u65b9\u6cd5\n\n### \u4e00\u3001\u4ec0\u4e48\u662f $nextTick\n\nVue \u7684\u6838\u5fc3\u65b9\u6cd5\u4e4b\u4e00\uff0c\u5b98\u65b9\u6587\u6863\u89e3\u91ca\u5982\u4e0b\uff1a \u5728\u4e0b\u6b21 DOM \u66f4\u65b0\u5faa\u73af\u7ed3\u675f\u4e4b\u540e\u6267\u884c\u5ef6\u8fdf\u56de\u8c03\u3002\u5728\u4fee\u6539\u6570\u636e\u4e4b\u540e\u7acb\u5373\u4f7f\u7528\u8fd9\u4e2a\u65b9\u6cd5\uff0c\u83b7\u53d6\u66f4\u65b0\u540e\u7684 DOM\u3002\n\n#### 1.MutationObserver\n\n\u5148\u7b80\u5355\u4ecb\u7ecd\u4e0b MutationObserver\uff1aMO \u662f HTML5 \u4e2d\u7684 API\uff0c\u662f\u4e00\u4e2a\u7528\u4e8e\u76d1\u89c6 DOM \u53d8\u52a8\u7684\u63a5\u53e3\uff0c\u5b83\u53ef\u4ee5\u76d1\u542c\u4e00\u4e2a DOM \u5bf9\u8c61\u4e0a\u53d1\u751f\u7684\u5b50\u8282\u70b9\u5220\u9664\u3001\u5c5e\u6027\u4fee\u6539\u3001\u6587\u672c\u5185\u5bb9\u4fee\u6539\u7b49\u3002 \u8c03\u7528\u8fc7\u7a0b\u662f\u8981\u5148\u7ed9\u5b83\u7ed1\u5b9a\u56de\u8c03\uff0c\u5f97\u5230 MO \u5b9e\u4f8b\uff0c\u8fd9\u4e2a\u56de\u8c03\u4f1a\u5728 MO \u5b9e\u4f8b\u76d1\u542c\u5230\u53d8\u52a8\u65f6\u89e6\u53d1\u3002\u8fd9\u91cc MO \u7684\u56de\u8c03\u662f\u653e\u5728 microtask \u4e2d\u6267\u884c\u7684\u3002\n\n```js\n// \u521b\u5efaMO\u5b9e\u4f8b\nconst observer = new MutationObserver(callback)\nconst textNode = \"\u60f3\u8981\u76d1\u542c\u7684Don\u8282\u70b9\"\nobserver.observe(textNode, {\n characterData: true, // \u8bf4\u660e\u76d1\u542c\u6587\u672c\u5185\u5bb9\u7684\u4fee\u6539\n})\n```\n\n#### 2.\u6e90\u7801\u6d45\u6790\n\nnextTick \u7684\u5b9e\u73b0\u5355\u72ec\u6709\u4e00\u4e2a JS \u6587\u4ef6\u6765\u7ef4\u62a4\u5b83\uff0c\u5728 src/core/util/next-tick.js \u4e2d\u3002 nextTick \u6e90\u7801\u4e3b\u8981\u5206\u4e3a\u4e24\u5757\uff1a\u80fd\u529b\u68c0\u6d4b\u548c\u6839\u636e\u80fd\u529b\u68c0\u6d4b\u4ee5\u4e0d\u540c\u65b9\u5f0f\u6267\u884c\u56de\u8c03\u961f\u5217\u3002\n\n**\u80fd\u529b\u68c0\u6d4b**\n\n\u7531\u4e8e\u5b8f\u4efb\u52a1\u8017\u8d39\u7684\u65f6\u95f4\u662f\u5927\u4e8e\u5fae\u4efb\u52a1\u7684\uff0c\u6240\u4ee5\u5728\u6d4f\u89c8\u5668\u652f\u6301\u7684\u60c5\u51b5\u4e0b\uff0c\u4f18\u5148\u4f7f\u7528\u5fae\u4efb\u52a1\u3002\u5982\u679c\u6d4f\u89c8\u5668\u4e0d\u652f\u6301\u5fae\u4efb\u52a1\uff0c\u518d\u4f7f\u7528\u5b8f\u4efb\u52a1\u3002\n\n```js\n// \u7a7a\u51fd\u6570\uff0c\u53ef\u7528\u4f5c\u51fd\u6570\u5360\u4f4d\u7b26\nimport { noop } from \"shared/util\"\n\n// \u9519\u8bef\u5904\u7406\u51fd\u6570\nimport { handleError } from \"./error\"\n\n// \u662f\u5426\u662fIE\u3001IOS\u3001\u5185\u7f6e\u51fd\u6570\nimport { isIE, isIOS, isNative } from \"./env\"\n\n// \u4f7f\u7528 MicroTask \u7684\u6807\u8bc6\u7b26\uff0c\u8fd9\u91cc\u662f\u56e0\u4e3a\u706b\u72d0\u5728<=53\u65f6 \u65e0\u6cd5\u89e6\u53d1\u5fae\u4efb\u52a1\uff0c\u5728modules/events.js\u6587\u4ef6\u4e2d\u5f15\u7528\u8fdb\u884c\u5b89\u5168\u6392\u9664\nexport let isUsingMicroTask = false\n\n// \u7528\u6765\u5b58\u50a8\u6240\u6709\u9700\u8981\u6267\u884c\u7684\u56de\u8c03\u51fd\u6570\nconst callbacks = []\n\n// \u7528\u6765\u6807\u5fd7\u662f\u5426\u6b63\u5728\u6267\u884c\u56de\u8c03\u51fd\u6570\nlet pending = false\n\n// \u5bf9callbacks\u8fdb\u884c\u904d\u5386\uff0c\u7136\u540e\u6267\u884c\u76f8\u5e94\u7684\u56de\u8c03\u51fd\u6570\nfunction flushCallbacks() {\n pending = false\n // \u8fd9\u91cc\u62f7\u8d1d\u7684\u539f\u56e0\u662f\uff1a\n // \u6709\u7684cb \u6267\u884c\u8fc7\u7a0b\u4e2d\u53c8\u4f1a\u5f80callbacks\u4e2d\u52a0\u5165\u5185\u5bb9\n // \u6bd4\u5982 $nextTick\u7684\u56de\u8c03\u51fd\u6570\u91cc\u8fd8\u6709$nextTick\n // \u540e\u8005\u7684\u5e94\u8be5\u653e\u5230\u4e0b\u4e00\u8f6e\u7684nextTick \u4e2d\u6267\u884c\n // \u6240\u4ee5\u62f7\u8d1d\u4e00\u4efd\u5f53\u524d\u7684\uff0c\u904d\u5386\u6267\u884c\u5b8c\u5f53\u524d\u7684\u5373\u53ef\uff0c\u907f\u514d\u65e0\u4f11\u6b62\u7684\u6267\u884c\u4e0b\u53bb\n const copies = callbcks.slice(0)\n callbacks.length = 0\n for (let i = 0; i < copies.length; i++) {\n copies[i]()\n }\n}\n\nlet timerFunc // \u5f02\u6b65\u6267\u884c\u51fd\u6570 \u7528\u4e8e\u5f02\u6b65\u5ef6\u8fdf\u8c03\u7528 flushCallbacks \u51fd\u6570\n\n// \u57282.5\u4e2d\uff0c\u6211\u4eec\u4f7f\u7528(\u5b8f)\u4efb\u52a1(\u4e0e\u5fae\u4efb\u52a1\u7ed3\u5408\u4f7f\u7528)\u3002\n// \u7136\u800c\uff0c\u5f53\u72b6\u6001\u5728\u91cd\u65b0\u7ed8\u5236\u4e4b\u524d\u53d1\u751f\u53d8\u5316\u65f6\uff0c\u5c31\u4f1a\u51fa\u73b0\u4e00\u4e9b\u5fae\u5999\u7684\u95ee\u9898\n// (\u4f8b\u5982#6813,out-in\u8f6c\u6362)\u3002\n// \u540c\u6837\uff0c\u5728\u4e8b\u4ef6\u5904\u7406\u7a0b\u5e8f\u4e2d\u4f7f\u7528(\u5b8f)\u4efb\u52a1\u4f1a\u5bfc\u81f4\u4e00\u4e9b\u5947\u602a\u7684\u884c\u4e3a\n// \u56e0\u6b64\uff0c\u6211\u4eec\u73b0\u5728\u518d\u6b21\u5728\u4efb\u4f55\u5730\u65b9\u4f7f\u7528\u5fae\u4efb\u52a1\u3002\n// \u4f18\u5148\u4f7f\u7528 Promise\nif (typeof Promise !== \"undefined\" && isNative(Promise)) {\n const p = Promise.resolve()\n timerFunc = () => {\n p.then(flushCallbacks)\n\n // IOS \u7684UIWebView, Promise.then \u56de\u8c03\u88ab\u63a8\u5165 microTask \u961f\u5217\uff0c\u4f46\u662f\u961f\u5217\u53ef\u80fd\u4e0d\u4f1a\u5982\u671f\u6267\u884c\n // \u56e0\u6b64\uff0c\u6dfb\u52a0\u4e00\u4e2a\u7a7a\u8ba1\u65f6\u5668\u5f3a\u5236\u6267\u884c microTask\n if (isIOS) setTimeout(noop)\n }\n isUsingMicroTask = true\n} else if (\n !isIE &&\n typeof MutationObserver !== \"undefined\" &&\n (isNative(MutationObserver) ||\n MutationObserver.toString === \"[object MutationObserverConstructor]\")\n) {\n // \u5f53 \u539f\u751fPromise \u4e0d\u53ef\u7528\u65f6\uff0c\u4f7f\u7528 \u539f\u751fMutationObserver\n // e.g. PhantomJS, iOS7, Android 4.4\n\n let counter = 1\n // \u521b\u5efaMO\u5b9e\u4f8b\uff0c\u76d1\u542c\u5230DOM\u53d8\u52a8\u540e\u4f1a\u6267\u884c\u56de\u8c03flushCallbacks\n const observer = new MutationObserver(flushCallbacks)\n const textNode = document.createTextNode(String(counter))\n observer.observe(textNode, {\n characterData: true, // \u8bbe\u7f6etrue \u8868\u793a\u89c2\u5bdf\u76ee\u6807\u7684\u6539\u53d8\n })\n\n // \u6bcf\u6b21\u6267\u884ctimerFunc \u90fd\u4f1a\u8ba9\u6587\u672c\u8282\u70b9\u7684\u5185\u5bb9\u5728 0/1\u4e4b\u95f4\u5207\u6362\n // \u5207\u6362\u4e4b\u540e\u5c06\u65b0\u503c\u590d\u5236\u5230 MO \u89c2\u6d4b\u7684\u6587\u672c\u8282\u70b9\u4e0a\n // \u8282\u70b9\u5185\u5bb9\u53d8\u5316\u4f1a\u89e6\u53d1\u56de\u8c03\n timerFunc = () => {\n counter = (counter + 1) % 2\n textNode.data = String(counter) // \u89e6\u53d1\u56de\u8c03\n }\n isUsingMicroTask = true\n} else if (typeof setImmediate !== \"undefined\" && isNative(setImmediate)) {\n timerFunc = () => {\n setImmediate(flushCallbacks)\n }\n} else {\n timerFunc = () => {\n setTimeout(flushCallbacks, 0)\n }\n}\n```\n\n\u5ef6\u8fdf\u8c03\u7528\u4f18\u5148\u7ea7\u5982\u4e0b\uff1a Promise > MutationObserver > setImmediate > setTimeout\n\n```js\nexport function nextTick(cb? Function, ctx: Object) {\n let _resolve\n // cb \u56de\u8c03\u51fd\u6570\u4f1a\u7edf\u4e00\u5904\u7406\u538b\u5165callbacks\u6570\u7ec4\n callbacks.push(() => {\n if(cb) {\n try {\n cb.call(ctx)\n } catch(e) {\n handleError(e, ctx, 'nextTick')\n }\n } else if (_resolve) {\n _resolve(ctx)\n }\n })\n\n // pending \u4e3afalse \u8bf4\u660e\u672c\u8f6e\u4e8b\u4ef6\u5faa\u73af\u4e2d\u6ca1\u6709\u6267\u884c\u8fc7timerFunc()\n if(!pending) {\n pending = true\n timerFunc()\n }\n\n // \u5f53\u4e0d\u4f20\u5165 cb \u53c2\u6570\u65f6\uff0c\u63d0\u4f9b\u4e00\u4e2apromise\u5316\u7684\u8c03\u7528\n // \u5982nextTick().then(() => {})\n // \u5f53_resolve\u6267\u884c\u65f6\uff0c\u5c31\u4f1a\u8df3\u8f6c\u5230then\u903b\u8f91\u4e2d\n if(!cb && typeof Promise !== 'undefined') {\n return new Promise(resolve => {\n _resolve = resolve\n })\n }\n}\n```\n\nnext-tick.js \u5bf9\u5916\u66b4\u9732\u4e86 nextTick \u8fd9\u4e00\u4e2a\u53c2\u6570\uff0c\u6240\u4ee5\u6bcf\u6b21\u8c03\u7528 Vue.nextTick \u65f6\u4f1a\u6267\u884c\uff1a\n\n- \u628a\u4f20\u5165\u7684\u56de\u8c03\u51fd\u6570 cb \u538b\u5165 callbacks \u6570\u7ec4\n- \u6267\u884c timerFunc \u51fd\u6570\uff0c\u5ef6\u8fdf\u8c03\u7528 flushCallbacks \u51fd\u6570\n- \u904d\u5386\u6267\u884c callbacks \u6570\u7ec4\u4e2d\u7684\u6240\u6709\u51fd\u6570\n\n\u8fd9\u91cc\u7684 callbacks \u6ca1\u6709\u76f4\u63a5\u5728 nextTick \u4e2d\u6267\u884c\u56de\u8c03\u51fd\u6570\u7684\u539f\u56e0\u662f\u4fdd\u8bc1\u5728\u540c\u4e00\u4e2a tick \u5185\u591a\u6b21\u6267\u884c nextTick\uff0c\u4e0d\u4f1a\u5f00\u542f\u591a\u4e2a\u5f02\u6b65\u4efb\u52a1\uff0c\u800c\u662f\u628a\u8fd9\u4e9b\u5f02\u6b65\u4efb\u52a1\u90fd\u538b\u6210\u4e00\u4e2a\u540c\u6b65\u4efb\u52a1\uff0c\u5728\u4e0b\u4e00\u4e2a tick \u6267\u884c\u5b8c\u6bd5\u3002\n\n**\u9644\u52a0**\n\nnoop \u7684\u5b9a\u4e49\u5982\u4e0b\n\n```js\n/**\n * Perform no operation.\n * Stubbing args to make Flow happy without leaving useless transpiled code\n * with ...rest (https://flow.org/blog/2017/05/07/Strict-Function-Call-Arity/).\n */\nexport function noop(a?: any, b?: any, c?: any) {}\n```\n\n\n### \u4e8c\u3001\u4f7f\u7528\u65b9\u5f0f \n\n- \u8bed\u6cd5\uff1aVue.nextTick([callback, context]) \n- \u53c2\u6570\uff1a\n - {Function} [callback]\uff1a\u56de\u8c03\u51fd\u6570\uff0c\u4e0d\u4f20\u65f6\u63d0\u4f9b promise \u8c03\u7528\n - {Object} [context]\uff1a\u56de\u8c03\u51fd\u6570\u6267\u884c\u7684\u4e0a\u4e0b\u6587\u73af\u5883\uff0c\u4e0d\u4f20\u9ed8\u8ba4\u662f\u81ea\u52a8\u7ed1\u5b9a\u5230\u8c03\u7528\u5b83\u7684\u5b9e\u4f8b\u4e0a\u3002\n\n```js\n//\u6539\u53d8\u6570\u636e\nvm.message = \"changed\"\n\n//\u60f3\u8981\u7acb\u5373\u4f7f\u7528\u66f4\u65b0\u540e\u7684DOM\u3002\u8fd9\u6837\u4e0d\u884c\uff0c\u56e0\u4e3a\u8bbe\u7f6emessage\u540eDOM\u8fd8\u6ca1\u6709\u66f4\u65b0\nconsole.log(vm.$el.textContent) // \u5e76\u4e0d\u4f1a\u5f97\u5230'changed'\n\n//\u8fd9\u6837\u53ef\u4ee5\uff0cnextTick\u91cc\u9762\u7684\u4ee3\u7801\u4f1a\u5728DOM\u66f4\u65b0\u540e\u6267\u884c\nVue.nextTick(function () {\n // DOM \u66f4\u65b0\u4e86\n //\u53ef\u4ee5\u5f97\u5230'changed'\n console.log(vm.$el.textContent)\n})\n\n// \u4f5c\u4e3a\u4e00\u4e2a Promise \u4f7f\u7528 \u5373\u4e0d\u4f20\u56de\u8c03\nVue.nextTick().then(function () {\n // DOM \u66f4\u65b0\u4e86\n})\n```\n\nVue \u5b9e\u4f8b\u65b9\u6cd5 vm.$nextTick \u505a\u4e86\u8fdb\u4e00\u6b65\u5c01\u88c5\uff0c\u628a context \u53c2\u6570\u8bbe\u7f6e\u6210\u5f53\u524d Vue \u5b9e\u4f8b\u3002\n\n\u4f7f\u7528 Vue.nextTick()\u662f\u4e3a\u4e86\u53ef\u4ee5\u83b7\u53d6\u66f4\u65b0\u540e\u7684 DOM \u3002 \u89e6\u53d1\u65f6\u673a\uff1a\u5728\u540c\u4e00\u4e8b\u4ef6\u5faa\u73af\u4e2d\u7684\u6570\u636e\u53d8\u5316\u540e\uff0cDOM \u5b8c\u6210\u66f4\u65b0\uff0c\u7acb\u5373\u6267\u884c Vue.nextTick()\u7684\u56de\u8c03\u3002\n\n> \u540c\u4e00\u4e8b\u4ef6\u5faa\u73af\u4e2d\u7684\u4ee3\u7801\u6267\u884c\u5b8c\u6bd5 -> DOM \u66f4\u65b0 -> nextTick callback \u89e6\u53d1\n\n\u4e09\u3001\u5e94\u7528\u573a\u666f\n\n\u5728 Vue \u751f\u547d\u5468\u671f\u7684 created()\u94a9\u5b50\u51fd\u6570\u8fdb\u884c\u7684 DOM \u64cd\u4f5c\u4e00\u5b9a\u8981\u653e\u5728 Vue.nextTick()\u7684\u56de\u8c03\u51fd\u6570\u4e2d\u3002\u539f\u56e0\uff1a\u662f created()\u94a9\u5b50\u51fd\u6570\u6267\u884c\u65f6 DOM \u5176\u5b9e\u5e76\u672a\u8fdb\u884c\u6e32\u67d3\u3002\n\n\u5728\u6570\u636e\u53d8\u5316\u540e\u8981\u6267\u884c\u7684\u67d0\u4e2a\u64cd\u4f5c\uff0c\u800c\u8fd9\u4e2a\u64cd\u4f5c\u9700\u8981\u4f7f\u7528\u968f\u6570\u636e\u6539\u53d8\u800c\u6539\u53d8\u7684 DOM \u7ed3\u6784\u7684\u65f6\u5019\uff0c\u8fd9\u4e2a\u64cd\u4f5c\u5e94\u8be5\u653e\u5728 Vue.nextTick()\u7684\u56de\u8c03\u51fd\u6570\u4e2d\u3002\u539f\u56e0\uff1aVue \u5f02\u6b65\u6267\u884c DOM \u66f4\u65b0\uff0c\u53ea\u8981\u89c2\u5bdf\u5230\u6570\u636e\u53d8\u5316\uff0cVue \u5c06\u5f00\u542f\u4e00\u4e2a\u961f\u5217\uff0c\u5e76\u7f13\u51b2\u5728\u540c\u4e00\u4e8b\u4ef6\u5faa\u73af\u4e2d\u53d1\u751f\u7684\u6240\u6709\u6570\u636e\u6539\u53d8\uff0c\u5982\u679c\u540c\u4e00\u4e2a watcher \u88ab\u591a\u6b21\u89e6\u53d1\uff0c\u53ea\u4f1a\u88ab\u63a8\u5165\u5230\u961f\u5217\u4e2d\u4e00\u6b21\u3002\n\n\n### \u56db\u3001\u603b\u7ed3\n\n- Vue \u7684 nextTick \u5176\u672c\u8d28\u662f\u5bf9 JavaScript \u6267\u884c\u539f\u7406 EventLoop \u7684\u4e00\u79cd\u5e94\u7528\n- nextTick \u7684\u6838\u5fc3\u5229\u7528\u4e86\u5982 Promise \u3001 MutationObserver \u3001 setImmediate \u3001 setTimeout \u7684\u539f\u751f JavaScript \u65b9\u6cd5\u6765\u6a21\u62df\u5bf9\u5e94\u7684\u5fae/\u5b8f\u4efb\u52a1\u7684\u5b9e\u73b0\uff0c\u672c\u8d28\u662f\u4e3a\u4e86\u5229\u7528 JavaScript \u7684\u8fd9\u4e9b\u5f02\u6b65\u56de\u8c03\u4efb\u52a1\u961f\u5217\u6765\u5b9e\u73b0 Vue \u6846\u67b6\u4e2d\u81ea\u5df1\u7684\u5f02\u6b65\u56de\u8c03\u961f\u5217\n- nextTick \u4e0d\u4ec5\u662f Vue \u5185\u90e8\u7684\u5f02\u6b65\u961f\u5217\u7684\u8c03\u7528\u65b9\u6cd5\uff0c\u540c\u65f6\u4e5f\u5141\u8bb8\u5f00\u53d1\u8005\u5728\u5b9e\u9645\u9879\u76ee\u4e2d\u4f7f\u7528\u8fd9\u4e2a\u65b9\u6cd5\u6765\u6ee1\u8db3\u5b9e\u9645\u5e94\u7528\u4e2d\u5bf9 Dom \u66f4\u65b0\u6570\u636e\u65f6\u673a\u7684\u540e\u7eed\u903b\u8f91\u5904\u7406\n- nextTick \u662f\u5178\u578b\u7684\u5c06\u5e95\u5c42 JavaScript \u6267\u884c\u539f\u7406\u5e94\u7528\u5230\u5177\u4f53\u6848\u4f8b\u4e2d\u7684\u793a\u4f8b\n- \u5f15\u5165\u5f02\u6b65\u66f4\u65b0\u961f\u5217\u673a\u5236\u7684\u539f\u56e0\uff1a\n - \u5982\u679c\u662f\u540c\u6b65\u66f4\u65b0\uff0c\u5219\u591a\u6b21\u5bf9\u4e00\u4e2a\u6216\u591a\u4e2a\u5c5e\u6027\u8d4b\u503c\uff0c\u4f1a\u9891\u7e41\u89e6\u53d1 UI/Dom \u7684\u6e32\u67d3\uff0c\u53ef\u4ee5\u51cf\u5c11\u4e00\u4e9b\u65e0\u7528\u6e32\u67d3\n - \u540c\u65f6\u7531\u4e8e VirtualDOM \u7684\u5f15\u5165\uff0c\u6bcf\u4e00\u6b21\u72b6\u6001\u53d1\u751f\u53d8\u5316\u540e\uff0c\u72b6\u6001\u53d8\u5316\u7684\u4fe1\u53f7\u4f1a\u53d1\u9001\u7ed9\u7ec4\u4ef6\uff0c\u7ec4\u4ef6\u5185\u90e8\u4f7f\u7528 VirtualDOM \u8fdb\u884c\u8ba1\u7b97\u5f97\u51fa\u9700\u8981\u66f4\u65b0\u7684\u5177\u4f53\u7684 DOM \u8282\u70b9\uff0c\u7136\u540e\u5bf9 DOM \u8fdb\u884c\u66f4\u65b0\u64cd\u4f5c\uff0c\u6bcf\u6b21\u66f4\u65b0\u72b6\u6001\u540e\u7684\u6e32\u67d3\u8fc7\u7a0b\u9700\u8981\u66f4\u591a\u7684\u8ba1\u7b97\uff0c\u800c\u8fd9\u79cd\u65e0\u7528\u529f\u4e5f\u5c06\u6d6a\u8d39\u66f4\u591a\u7684\u6027\u80fd\uff0c\u6240\u4ee5\u5f02\u6b65\u6e32\u67d3\u53d8\u5f97\u66f4\u52a0\u81f3\u5173\u91cd\u8981", "answer": "", "biz_type": 1, "qid": 245, "subject": "", "title": "\u8bf4\u4e00\u4e0b Vue \u7684\\$nextTick \u539f\u7406"}, "tech_tag": ["Vue"], "uid": 0, "uname": ""}, {"audit_flag": 0, "corp_tag": ["\u8109\u8109"], "date": "Fri, 19 Jun 2020 16:20:41 GMT", "favorite_num": 9, "qid": 222, "qtype": "short_answer", "short_answer": {"analysis": "### \u4e00\u3001\u8bed\u6cd5\u7cd6\n\n\u6307\u8ba1\u7b97\u673a\u8bed\u8a00\u4e2d\u6dfb\u52a0\u7684\u67d0\u79cd\u8bed\u6cd5\uff0c\u8fd9\u79cd\u8bed\u6cd5\u5bf9\u8bed\u8a00\u7684\u529f\u80fd\u5e76\u6ca1\u6709\u5f71\u54cd\uff0c\u4f46\u662f\u66f4\u65b9\u4fbf\u7a0b\u5e8f\u5458\u4f7f\u7528\u3002\u901a\u5e38\u6765\u8bf4\u4f7f\u7528\u8bed\u6cd5\u7cd6\u80fd\u591f\u589e\u52a0\u7a0b\u5e8f\u7684\u53ef\u8bfb\u6027\uff0c\u4ece\u800c\u51cf\u5c11\u7a0b\u5e8f\u4ee3\u7801\u51fa\u9519\u7684\u673a\u4f1a\u3002\u7cd6\u5728\u4e0d\u6539\u53d8\u5176\u6240\u5728\u4f4d\u7f6e\u7684\u8bed\u6cd5\u7ed3\u6784\u7684\u524d\u63d0\u4e0b\uff0c\u5b9e\u73b0\u4e86\u8fd0\u884c\u65f6\u7684\u7b49\u4ef7\u3002\u53ef\u4ee5\u7b80\u5355\u7406\u89e3\u4e3a\uff0c\u52a0\u7cd6\u540e\u7684\u4ee3\u7801\u7f16\u8bd1\u540e\u8ddf\u52a0\u7cd6\u524d\u4e00\u6837,\u4ee3\u7801\u66f4\u7b80\u6d01\u6d41\u7545\uff0c\u4ee3\u7801\u66f4\u8bed\u4e49\u81ea\u7136.\n\n### \u4e8c\u3001\u5b9e\u73b0\u539f\u7406\n\n#### 1.\u4f5c\u7528\u5728\u666e\u901a\u8868\u5355\u5143\u7d20\u4e0a\n\n\u52a8\u6001\u7ed1\u5b9a\u4e86\u00a0`input`\u00a0\u7684\u00a0`value`\u00a0\u6307\u5411\u4e86\u00a0`messgae`\u00a0\u53d8\u91cf\uff0c\u5e76\u4e14\u5728\u89e6\u53d1\u00a0`input`\u00a0\u4e8b\u4ef6\u7684\u65f6\u5019\u53bb\u52a8\u6001\u628a\u00a0`message`\u00a0\u8bbe\u7f6e\u4e3a\u76ee\u6807\u503c\n\n```js\n<input v-model=\"sth\" />\n// \u7b49\u540c\u4e8e\n<input \n v-bind:value=\"message\" \n v-on:input=\"message=$event.target.value\"\n>\n//$event \u6307\u4ee3\u5f53\u524d\u89e6\u53d1\u7684\u4e8b\u4ef6\u5bf9\u8c61;\n//$event.target \u6307\u4ee3\u5f53\u524d\u89e6\u53d1\u7684\u4e8b\u4ef6\u5bf9\u8c61\u7684dom;\n//$event.target.value \u5c31\u662f\u5f53\u524ddom\u7684value\u503c;\n//\u5728@input\u65b9\u6cd5\u4e2d\uff0cvalue => sth;\n//\u5728:value\u4e2d,sth => value;\n```\n\n#### 2.\u4f5c\u7528\u5728\u7ec4\u4ef6\u4e0a\n\n\u5728\u81ea\u5b9a\u4e49\u7ec4\u4ef6\u4e2d\uff0cv-model \u9ed8\u8ba4\u4f1a\u5229\u7528\u540d\u4e3a value \u7684 prop \u548c\u540d\u4e3a input \u7684\u4e8b\u4ef6\n\n**\u672c\u8d28\u662f\u4e00\u4e2a\u7236\u5b50\u7ec4\u4ef6\u901a\u4fe1\u7684\u8bed\u6cd5\u7cd6\uff0c\u901a\u8fc7prop\u548c$.emit\u5b9e\u73b0**\n\n\u56e0\u6b64\u7236\u7ec4\u4ef6`v-model`\u8bed\u6cd5\u7cd6\u672c\u8d28\u4e0a\u53ef\u4ee5\u4fee\u6539\u4e3a\u00a0`'<child :value=\"message\" @input=\"function(e){message = e}\"></child>'`\n\n\u5728\u7ec4\u4ef6\u7684\u5b9e\u73b0\u4e2d\uff0c\u6211\u4eec\u662f\u53ef\u4ee5\u901a\u8fc7 **v-model\u5c5e\u6027** \u6765\u914d\u7f6e\u5b50\u7ec4\u4ef6\u63a5\u6536\u7684prop\u540d\u79f0\uff0c\u4ee5\u53ca\u6d3e\u53d1\u7684\u4e8b\u4ef6\u540d\u79f0\u3002\n\n\n\u4f8b\u5b50\n\n```js\n// \u7236\u7ec4\u4ef6\n<aa-input v-model=\"aa\"></aa-input>\n// \u7b49\u4ef7\u4e8e\n<aa-input v-bind:value=\"aa\" v-on:input=\"aa=$event.target.value\"></aa-input>\n\n// \u5b50\u7ec4\u4ef6\uff1a\n<input v-bind:value=\"aa\" v-on:input=\"onmessage\"></aa-input>\n\nprops:{value:aa,}\nmethods:{\n onmessage(e){\n $emit('input',e.target.value)\n }\n}\n```\n\n\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u4e00\u4e2a\u7ec4\u4ef6\u4e0a\u7684 v-model \u4f1a\u628a value \u7528\u4f5c prop \u4e14\u628a input \u7528\u4f5c event\n\n\u4f46\u662f\u4e00\u4e9b\u8f93\u5165\u7c7b\u578b\u6bd4\u5982\u5355\u9009\u6846\u548c\u590d\u9009\u6846\u6309\u94ae\u53ef\u80fd\u60f3\u4f7f\u7528 value prop \u6765\u8fbe\u5230\u4e0d\u540c\u7684\u76ee\u7684\u3002\u4f7f\u7528 model \u9009\u9879\u53ef\u4ee5\u56de\u907f\u8fd9\u4e9b\u60c5\u51b5\u4ea7\u751f\u7684\u51b2\u7a81\u3002\n\njs \u76d1\u542cinput \u8f93\u5165\u6846\u8f93\u5165\u6570\u636e\u6539\u53d8\uff0c\u7528oninput ,\u6570\u636e\u6539\u53d8\u4ee5\u540e\u5c31\u4f1a\u7acb\u523b\u51fa\u53d1\u8fd9\u4e2a\u4e8b\u4ef6\u3002\n\n\u901a\u8fc7input\u4e8b\u4ef6\u628a\u6570\u636e$emit \u51fa\u53bb\uff0c\u5728\u7236\u7ec4\u4ef6\u63a5\u53d7\u3002\n\n\u7236\u7ec4\u4ef6\u8bbe\u7f6ev-model\u7684\u503c\u4e3ainput$emit\u8fc7\u6765\u7684\u503c\u3002\n", "answer": "", "biz_type": 1, "qid": 222, "subject": "", "title": "Vue v-model \u662f\u5982\u4f55\u5b9e\u73b0\u7684\uff0c\u8bed\u6cd5\u7cd6\u5b9e\u9645\u662f\u4ec0\u4e48"}, "tech_tag": ["Vue"], "uid": 0, "uname": ""}, {"audit_flag": 0, "corp_tag": [], "date": "Fri, 19 Jun 2020 16:20:41 GMT", "favorite_num": 6, "qid": 258, "qtype": "short_answer", "short_answer": {"analysis": "### \u4e00\u3001\u5b9a\u4e49\n\n**SPA\u5355\u9875\u9762\u5e94\u7528\uff08SinglePage Web Application \uff09** \uff0c\u6307\u53ea\u6709\u4e00\u4e2a\u4e3b\u9875\u9762\u7684\u5e94\u7528\uff0c\u4e00\u5f00\u59cb\u53ea\u9700\u8981\u52a0\u8f7d\u4e00\u6b21js\u3001css\u7b49\u76f8\u5173\u8d44\u6e90\u3002\u6240\u6709\u5185\u5bb9\u90fd\u5305\u542b\u5728\u4e3b\u9875\u9762\uff0c\u5bf9\u6bcf\u4e00\u00a0 \u4e2a\u529f\u80fd\u6a21\u5757\u7ec4\u4ef6\u5316\u3002\u5355\u9875\u5e94\u7528\u8df3\u8f6c\uff0c\u5c31\u662f\u5207\u6362\u76f8\u5173\u7ec4\u4ef6\uff0c\u4ec5\u4ec5\u5237\u65b0\u5c40\u90e8\u8d44\u6e90\u3002\n\n**MPA\u591a\u9875\u9762\u5e94\u7528 \uff08MultiPage Application\uff09** ,\u6307\u6709\u591a\u4e2a\u72ec\u7acb\u9875\u9762\u7684\u5e94\u7528\uff0c\u6bcf\u4e2a\u9875\u9762\u5fc5\u987b\u91cd\u590d\u52a0\u8f7djs\u3001css\u7b49\u76f8\u5173\u8d44\u6e90\u3002\u591a\u9875\u5e94\u7528\u8df3\u8f6c\uff0c\u9700\u8981\u6574\u9875\u8d44\u6e90\u5237\u65b0\n\n### \u533a\u522b\n\n#### 1.\u5237\u65b0\u65b9\u5f0f\n\n- SPA:\u76f8\u5173\u7ec4\u4ef6\u5207\u6362\uff0c\u9875\u9762\u5c40\u90e8\u5237\u65b0\u6216\u66f4\u6539\n- MPA:\u6574\u9875\u5237\u65b0\n\n#### 2.\u8def\u7531\u6a21\u5f0f\n\n- SPA\uff1a\u53ef\u4ee5\u4f7f\u7528hash\uff0c\u4e5f\u53ef\u4ee5\u4f7f\u7528history\n- MPA: \u666e\u901a\u94fe\u63a5\u8df3\u8f6c\n\n#### 3.\u7528\u6237\u4f53\u9a8c\n\n- SPA: \u9875\u9762\u7247\u6bb5\u95f4\u65f6\u95f4\u7684\u5207\u6362\u5feb\uff0c\u7528\u6237\u4f53\u9a8c\u826f\u597d,\u5f53\u521d\u6b21\u52a0\u8f7d\u6587\u4ef6\u8fc7\u591a\u65f6\uff0c\u9700\u8981\u505a\u76f8\u5173\u8c03\u4f18\u3002\n- MPA\uff1a\u9875\u9762\u5207\u6362\u52a0\u8f7d\u7f13\u6162\uff0c\u6d41\u7545\u5ea6\u4e0d\u591f\uff0c\u7528\u6237\u4f53\u9a8c\u6bd4\u8f83\u5dee\uff0c\u5c24\u5176\u7f51\u901f\u6162\u7684\u65f6\u5019\n\n#### 4.\u8f6c\u573a\u52a8\u753b\n\n- SPA: \u5bb9\u6613\u5b9e\u73b0\u8f6c\u573a\u52a8\u753b\n- MPA\uff1a\u65e0\u6cd5\u5b9e\u73b0\u4e13\u573a\u52a8\u753b\n\n#### 5.\u6570\u636e\u4f20\u9012\n\n- SPA: \u5bb9\u6613\u5b9e\u73b0\u6570\u636e\u4f20\u9012\uff0c\u65b9\u6cd5\u6709\u5f88\u591a\uff08\u901a\u8fc7\u8def\u7531\u5e26\u53c2\u6570\u4f20\u503c\uff0cVuex\u4f20\u503c\u7b49\u7b49\uff09\n- MPA\uff1a \u4f9d\u8d56url\u4f20\u53c2\uff0ccookie \uff0c \u672c\u5730\u5b58\u50a8\u7b49\n\n#### 6.\u641c\u7d22\u5f15\u64ce\u4f18\u5316\uff08SEO\uff09\n\n- SPA: \u9700\u8981\u5355\u72ec\u65b9\u6848\uff0c\u5b9e\u73b0\u8f83\u4e3a\u56f0\u96be\uff0c\u4e0d\u5229\u4e8eSEO\u68c0\u7d22\uff0c\u53ef\u5229\u7528\u670d\u52a1\u5668\u7aef\u6e32\u67d3\uff08SSR\uff09\u4f18\u5316\n- MPA:\u5b9e\u73b0\u65b9\u6cd5\u5bb9\u6613 \n\n#### 7.\u4f7f\u7528\u8303\u56f4\n\n- SPA\uff1a\u9ad8\u8981\u6c42\u7684\u4f53\u9a8c\u5ea6\u3001\u8ffd\u6c42\u754c\u9762\u6d41\u7545\u7684\u5e94\u7528\n- MPA\uff1a\u9002\u7528\u4e8e\u8ffd\u6c42\u9ad8\u5ea6\u652f\u6301\u641c\u7d22\u5f15\u64ce\u7684\u5e94\u7528\n\n#### 8.\u5f00\u53d1\u6210\u672c\n\n- SPA: \u8f83\u9ad8\uff0c\u957f\u9700\u8981\u501f\u52a9\u4e13\u4e1a\u7684\u6846\u67b6\n- MPA:\u8f83\u4f4e\uff0c\u4f46\u4e5f\u9875\u9762\u4ee3\u7801\u91cd\u590d\u7684\u591a\n\n#### 9.\u7ef4\u62a4\u6210\u672c\n\n- SPA\uff1a\u76f8\u5bf9\u5bb9\u6613\n- MPA\uff1a\u76f8\u5bf9\u590d\u6742\n\n#### 10.\u7ed3\u6784\n\n- SPA:\u4e00\u4e2a\u4e3b\u9875\u9762+\u8bb8\u591a\u6a21\u5757\u7684\u7ec4\u4ef6\n- MPA:\u8bb8\u591a\u5b8c\u6574\u7684\u9875\u9762\n\n#### 11.\u8d44\u6e90\u6587\u4ef6\n\n- SPA:\u7ec4\u4ef6\u516c\u7528\u7684\u8d44\u6e90\u53ea\u9700\u8981\u52a0\u8f7d\u4e00\u6b21\n- MPA:\u6bcf\u4e2a\u9875\u9762\u90fd\u9700\u8981\u81ea\u5df1\u52a0\u8f7d\u516c\u7528\u7684\u8d44\u6e90\n\n\n\n\n", "answer": "", "biz_type": 1, "qid": 258, "subject": "", "title": "\u8bf4\u4e00\u4e0b Vue \u5355\u9875\u4e0e\u591a\u9875\u7684\u533a\u522b"}, "tech_tag": ["Vue"], "uid": 0, "uname": ""}, {"audit_flag": 0, "corp_tag": ["\u9ad8\u5fb7"], "date": "Fri, 19 Jun 2020 16:20:41 GMT", "favorite_num": 13, "qid": 199, "qtype": "short_answer", "short_answer": {"analysis": "### \u4e00\u3001Vue3 beta \u65b0\u4f18\u52bf\n\n#### 1.optionsAPI -> composition API\n\n[composition API\u53c2\u8003](https://vue-composition-api-rfc.netlify.app)\n\n\u4e3e\u4e2a\u7b80\u5355\u7684\u4f8b\u5b50\n\n**1\uff09\u58f0\u660e\u53d8\u91cf**\n\n```js\nconst { reactive } = Vue\nvar App = {\n template: `\n <div>\n {{message}}\n </div>`,\n setup() {\n \tconst state = reactive({message: \"Hello World!!!\"})\n\treturn {\n\t\t...state\n\t}\n }\n}\nVue.createApp().mount(App, '#app')\n```\n\n**2\uff09\u53cc\u5411\u7ed1\u5b9a**\n\n```js\nconst { reactive } = Vue\nlet App = {\n template: `\n <div>\n <input v-model=\"state.value\"/>{{state.value}}\n </div>`,\n setup() {\n const state = reactive({ value: '' })\n return { state }\n }\n}\nVue.createApp().mount(App, '#app')\n```\n\n- setup\n - **\u88ab\u8bdf\u75c5\u5f97\u5730\u65b9\uff0c\u5185\u5bb9\u8981\u5199\u5728\u8fd9\u4e2a\u5730\u65b9**\u3002setup \u5b9e\u9645\u4e0a\u662f\u4e00\u4e2a\u7ec4\u4ef6\u7684\u5165\u53e3\uff0c\u5b83\u8fd0\u884c\u5728\u7ec4\u4ef6\u88ab\u5b9e\u4f8b\u5316\u65f6\u5019\uff0cprops \u5c5e\u6027\u88ab\u5b9a\u4e49\u4e4b\u540e\uff0c\u5b9e\u9645\u4e0a\u7b49\u4ef7\u4e8e vue2 \u7248\u672c\u7684 beforeCreate \u548c Created \u8fd9\u4e24\u4e2a\u751f\u547d\u5468\u671f\n- reactive\n - \u521b\u5efa\u4e00\u4e2a\u54cd\u5e94\u5f0f\u5f97\u72b6\u6001\uff0c\u51e0\u4e4e\u7b49\u4ef7\u4e8e vue2.x \u4e2d\u7684 Vue.observable() API\uff0c\u4e3a\u4e86\u907f\u514d\u4e8e rxjs \u4e2d\u5f97 observable \u6df7\u6dc6\u8fdb\u884c\u4e86\u91cd\u547d\u540d\n\n**3\uff09\u89c2\u5bdf\u5c5e\u6027**\n\n```js\nimport { reactive, watchEffect } from 'vue'\n\nconst state = reactive({\n count: 0,\n})\n\nwatchEffect(() => {\n document.body.innerHTML = `count is ${state.count}`\n})\nreturn {...state}\n```\n\n> watchEffect \u548c 2.x \u4e2d\u7684 watch \u9009\u9879\u7c7b\u4f3c\uff0c\u4f46\u662f\u5b83\u4e0d\u9700\u8981\u628a\u88ab\u4f9d\u8d56\u7684\u6570\u636e\u6e90\u548c\u526f\u4f5c\u7528\u56de\u8c03\u5206\u5f00\u3002\u7ec4\u5408\u5f0f API \u540c\u6837\u63d0\u4f9b\u4e86\u4e00\u4e2a watch \u51fd\u6570\uff0c\u5176\u884c\u4e3a\u548c 2.x \u7684\u9009\u9879\u5b8c\u5168\u4e00\u81f4\u3002\n\n**5\uff09ref**\n\n> vue3 \u5141\u8bb8\u7528\u6237\u521b\u5efa\u5355\u4e2a\u7684\u54cd\u5e94\u5f0f\u5bf9\u8c61\n\n```js\nconst App = {\n template: `\n <div>\n {{value}}\n </div>`,\n setup() {\n const value = ref(0)\n return { value }\n }\n}\nVue.createApp().mount(App, '#app')\n```\n\n**6\uff09\u8ba1\u7b97\u5c5e\u6027**\n\n```js\nsetup() {\n const state = reactive({\n count: 0,\n double: computed(() => state.count * 2),\n })\n\n function increment() {\n state.count++\n }\n\n return {\n state,\n increment,\n }\n},\n```\n\n**7\uff09\u751f\u547d\u5468\u671f\u7684\u53d8\u66f4**\n\n\n\n\u751f\u547d\u5468\u671f\u4f7f\u7528\u4e3e\u4f8b\uff1a\n\n```js\nimport { onMounted } from 'vue'\n\nexport default {\n setup() {\n onMounted(() => {\n console.log('component is mounted!')\n })\n },\n}\n```\n\n#### 2.performance \u4f18\u5316\n\n- \u91cd\u6784\u4e86\u865a\u62df DOM\uff0c\u4fdd\u6301\u517c\u5bb9\u6027\uff0c\u4f7f dom \u8131\u79bb\u6a21\u677f\u6e32\u67d3\uff0c\u63d0\u5347\u6027\u80fd\n- \u4f18\u5316\u4e86\u6a21\u677f\u7f16\u8bd1\u8fc7\u7a0b\uff0c\u589e\u52a0 patchFlag\uff0c\u904d\u5386\u8282\u70b9\u7684\u65f6\u5019\uff0c\u4f1a\u8df3\u8fc7\u9759\u6001\u8282\u70b9\n- \u9ad8\u6548\u7684\u7ec4\u4ef6\u521d\u59cb\u5316\n- \u7ec4\u4ef6 upload \u7684\u8fc7\u7a0b\u6027\u80fd\u63d0\u5347 1.3~2 \u500d\n- SSR \u901f\u5ea6\u63d0\u5347 2~3 \u500d\n\n**vue3.0\u5982\u4f55\u5b9e\u73b0\u7684 domdiff\u548cvDOM\u7684\u4f18\u5316**\n\n**1\uff09\u7f16\u8bd1\u6a21\u677f\u7684\u9759\u6001\u6807\u8bb0**\n\n\u4e3e\u4f8b\uff1a\n\n```html\n<div id=\"app\">\n <p>\u5468\u4e00\u5462</p>\n <p>\u660e\u5929\u5c31\u5468\u4e8c\u4e86</p>\n <div>{{week}}</div>\n</div>\n```\n\n\u5728vue2\u4f1a\u88ab\u89e3\u6790\u6210\u4e00\u4e0b\u4ee3\u7801\n\n```js\nfunction render() {\n with(this) {\n return _c('div', {\n attrs: {\n \"id\": \"app\"\n }\n }, [_c('p', [_v(\"\u5468\u4e00\u5462\")]), _c('p', [_v(\"\u660e\u5929\u5c31\u5468\u4e8c\u4e86\")]), _c('div', [_v(\n _s(week))])])\n }\n}\n```\n\n\u53ef\u4ee5\u770b\u51fa\uff0c\u4e24\u4e2a`p`\u6807\u7b7e\u662f\u5b8c\u5168\u9759\u6001\u7684\uff0c\u4ee5\u81f3\u4e8e\u5728\u540e\u7eed\u7684\u6e32\u67d3\u4e2d\uff0c\u5176\u5b9e\u6ca1\u6709\u4efb\u4f55\u53d8\u5316\u7684\uff0c\u4f46\u662f\u5728`vue2.x`\u4e2d\u4f9d\u7136\u4f1a\u4f7f\u7528`_c`\u65b0\u5efa\u6210\u4e00\u4e2avdom\uff0c\u5728`diff`\u7684\u65f6\u5019\u4ecd\u7136\u9700\u8981\u53bb\u6bd4\u8f83\uff0c\u8fd9\u6837\u5c31\u9020\u6210\u4e86\u4e00\u5b9a\u91cf\u7684\u6027\u80fd\u6d88\u8017\n\n\u5728vue3\u4e2d\n\n```js\nimport { createVNode as _createVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock } from \"vue\"\n\nexport function render(_ctx, _cache) {\n return (_openBlock(), _createBlock(\"div\", { id: \"app\" }, [\n _createVNode(\"p\", null, \"\u5468\u4e00\u5462\"),\n _createVNode(\"p\", null, \"\u660e\u5929\u5c31\u5468\u4e8c\u4e86\"),\n _createVNode(\"div\", null, _toDisplayString(_ctx.week), 1 /* TEXT */)\n ]))\n}\n\n```\n\n\u53ea\u6709\u5f53`_createVNode`\u7684\u7b2c\u56db\u4e2a\u53c2\u6570\u4e0d\u4e3a\u7a7a\u7684\u65f6\u5019\uff0c\u8fd9\u65f6\uff0c\u624d\u4f1a\u88ab\u904d\u5386\uff0c\u800c\u9759\u6001\u8282\u70b9\u5c31\u4e0d\u4f1a\u88ab\u904d\u5386\u5230\n\n\u540c\u65f6\u53d1\u73b0\u4e86\u5728`vue3`\u6700\u540e\u4e00\u4e2a\u975e\u9759\u6001\u7684\u8282\u70b9\u7f16\u8bd1\u540e\uff1a\u51fa\u73b0\u4e86`/* TEXT */`\uff0c\u8fd9\u662f\u4e3a\u4e86\u6807\u8bb0\u5f53\u524d\u5185\u5bb9\u7684\u7c7b\u578b\u4ee5\u4fbf\u8fdb\u884c`diff`\uff0c\u5982\u679c\u4e0d\u540c\u7684\u6807\u8bb0\uff0c\u53ea\u9700\u8981\u53bb\u6bd4\u8f83\u5bf9\u6bd4\u76f8\u540c\u7684\u7c7b\u578b\u3002\u8fd9\u5c31\u4e0d\u4f1a\u53bb\u6d6a\u8d39\u65f6\u95f4\u5bf9\u5176\u4ed6\u7c7b\u578b\u8fdb\u884c\u904d\u5386\u4e86\n\n```js\nexport const enum PatchFlags {\n \n TEXT = 1,// \u8868\u793a\u5177\u6709\u52a8\u6001textContent\u7684\u5143\u7d20\n CLASS = 1 << 1, // \u8868\u793a\u6709\u52a8\u6001Class\u7684\u5143\u7d20\n STYLE = 1 << 2, // \u8868\u793a\u52a8\u6001\u6837\u5f0f\uff08\u9759\u6001\u5982style=\"color: red\"\uff0c\u4e5f\u4f1a\u63d0\u5347\u81f3\u52a8\u6001\uff09\n PROPS = 1 << 3, // \u8868\u793a\u5177\u6709\u975e\u7c7b/\u6837\u5f0f\u52a8\u6001\u9053\u5177\u7684\u5143\u7d20\u3002\n FULL_PROPS = 1 << 4, // \u8868\u793a\u5e26\u6709\u52a8\u6001\u952e\u7684\u9053\u5177\u7684\u5143\u7d20\uff0c\u4e0e\u4e0a\u9762\u4e09\u79cd\u76f8\u65a5\n HYDRATE_EVENTS = 1 << 5, // \u8868\u793a\u5e26\u6709\u4e8b\u4ef6\u76d1\u542c\u5668\u7684\u5143\u7d20\n STABLE_FRAGMENT = 1 << 6, // \u8868\u793a\u5176\u5b50\u987a\u5e8f\u4e0d\u53d8\u7684\u7247\u6bb5\uff08\u6ca1\u61c2\uff09\u3002 \n KEYED_FRAGMENT = 1 << 7, // \u8868\u793a\u5e26\u6709\u952e\u63a7\u6216\u90e8\u5206\u952e\u63a7\u5b50\u5143\u7d20\u7684\u7247\u6bb5\u3002\n UNKEYED_FRAGMENT = 1 << 8, // \u8868\u793a\u5e26\u6709\u65e0key\u7ed1\u5b9a\u7684\u7247\u6bb5\n NEED_PATCH = 1 << 9, // \u8868\u793a\u53ea\u9700\u8981\u975e\u5c5e\u6027\u8865\u4e01\u7684\u5143\u7d20\uff0c\u4f8b\u5982ref\u6216hooks\n DYNAMIC_SLOTS = 1 << 10, // \u8868\u793a\u5177\u6709\u52a8\u6001\u63d2\u69fd\u7684\u5143\u7d20\n}\n\n```\n\n\u5982\u679c\u5b58\u5728\u4e24\u79cd\u7c7b\u578b\uff0c\u90a3\u4e48\u53ea\u9700\u8981\u5bf9\u8fd9\u4e24\u4e2a\u503c\u5bf9\u5e94\u7684`patchflag`\u8fdb\u884c\u4f4d\u6655\u7729\n\n\u5982\uff1a`TEXT`\u548c`PROPS`\n\n```js\nTEXT: 1 ,PROPRS: 1<<3 => 8\n\n// \u90a3\u4e48\u5bf91\u548c8\u8fdb\u884c\u6309\u4f4d\u4e0e\u8fd0\u7b97\u5f97\u5230=>9\n```\n\n\n**2\uff09\u4e8b\u4ef6\u50a8\u5b58**\n\n> \u7ed1\u5b9a\u7684\u4e8b\u4ef6\u4f1a\u7f13\u5b58\u5728\u7f13\u5b58\u4e2d\n\n```html\n<div id=\"app\">\n <button @click=\"handleClick\">\u5468\u4e94\u5566</button>\n</div>\n\n```\n\n\u7ecf\u8fc7\u8f6c\u6362\n\n```js\nimport { createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock } from \"vue\"\n\nexport function render(_ctx, _cache) {\n return (_openBlock(), _createBlock(\"div\", { id: \"app\" }, [\n _createVNode(\"button\", {\n onClick: _cache[1] || (_cache[1] = ($event, ...args) => (_ctx.handleClick($event, ...args)))\n }, \"\u5468\u4e94\u5566\")\n ]))\n}\n\n```\n\n\u5728\u4ee3\u7801\u4e2d\u53ef\u4ee5\u770b\u51fa\u5728\u7ed1\u5b9a\u70b9\u51fb\u4e8b\u4ef6\u7684\u65f6\u5019\uff0c\u4f1a\u751f\u6210\u5e76\u7f13\u5b58\u4e86\u4e00\u4e2a\u5185\u8054\u51fd\u6570\u5728cache\u4e2d\uff0c\u53d8\u6210\u4e86\u4e00\u4e2a\u9759\u6001\u7684\u8282\u70b9\n\n**3\uff09\u9759\u6001\u63d0\u5347**\n\n```html\n<div id=\"app\">\n <p>\u5468\u4e00\u4e86</p>\n <p>\u5468\u4e8c\u4e86</p>\n <div>{{week}}</div>\n <div :class=\"{red:isRed}\">\u5468\u4e09\u5462</div>\n</div>\n```\n\n\u8f6c\u6362\u6210\n\n```js\nimport { createVNode as _createVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock } from \"vue\"\n\nconst _hoisted_1 = { id: \"app\" }\nconst _hoisted_2 = /*#__PURE__*/_createVNode(\"p\", null, \"\u5468\u4e00\u4e86\", -1 /* HOISTED */)\nconst _hoisted_3 = /*#__PURE__*/_createVNode(\"p\", null, \"\u5468\u4e8c\u4e86\", -1 /* HOISTED */)\n\nexport function render(_ctx, _cache) {\n return (_openBlock(), _createBlock(\"div\", _hoisted_1, [\n _hoisted_2,\n _hoisted_3,\n _createVNode(\"div\", null, _toDisplayString(_ctx.week), 1 /* TEXT */),\n _createVNode(\"div\", {\n class: {red:_ctx.isRed}\n }, \"\u5468\u4e09\u5462\", 2 /* CLASS */)\n ]))\n}\n```\n\n\u5728\u8fd9\u91cc\u53ef\u4ee5\u770b\u51fa\u6765\u5c06\u4e00\u4e9b\u9759\u6001\u7684\u8282\u70b9\u653e\u653e\u5728\u4e86`render`\u51fd\u6570\u7684\u5916\u90e8\uff0c\u8fd9\u6837\u5c31\u907f\u514d\u4e86\u6bcf\u6b21`render`\u90fd\u4f1a\u53bb\u751f\u6210\u4e00\u6b21\u9759\u6001\u8282\u70b9\n\n#### 3.\u63d0\u4f9b\u4e86tree shaking\n\n- \u6253\u5305\u7684\u65f6\u5019\u81ea\u52a8\u53bb\u9664\u6ca1\u7528\u5230\u7684 vue \u6a21\u5757\n\n#### 4.\u66f4\u597d\u7684 ts \u652f\u6301\n\n- \u7c7b\u578b\u5b9a\u4e49\u63d0\u793a\n- tsx \u652f\u6301\n- class \u7ec4\u4ef6\u7684\u652f\u6301\n\n### 5.\u5168\u5bb6\u6876\u4fee\u6539\n\nvite \u7684\u4f7f\u7528\uff0c\u653e\u5f03\u539f\u6765vue2.x\u4f7f\u7528\u7684 webpack\n\n1. \u5f00\u53d1\u670d\u52a1\u5668\u542f\u52a8\u540e\u4e0d\u9700\u8981\u8fdb\u884c\u6253\u5305\u64cd\u4f5c\n2. \u53ef\u4ee5\u81ea\u5b9a\u4e49\u5f00\u53d1\u670d\u52a1\u5668:`const {createSever} = require('vite')`\n3. \u70ed\u6a21\u5757\u66ff\u6362\u7684\u6027\u80fd\u548c\u6a21\u5757\u6570\u91cf\u65e0\u5173\uff0c\u66ff\u6362\u53d8\u5feb\uff0c\u5373\u65f6\u70ed\u6a21\u5757\u66ff\u6362\n4. \u751f\u4ea7\u73af\u5883\u548c rollup \u6346\u7ed1\n\n### \u4e8c\u3001vue2\u548cvue3\u54cd\u5e94\u5f0f\u5bf9\u6bd4\n\n#### 1.vue2.x \u4f7f\u7528\u7684\u662fdefineProperty\uff0c\u6709\u4e24\u4e2a\u96be\u89e3\u51b3\u7684\u95ee\u9898\n\n1. \u53ea\u80fd\u505a\u7b2c\u4e00\u5c42\u5c5e\u6027\u7684\u54cd\u5e94\uff0c\u518d\u5f80\u6df1\u5904\u5c31\u65e0\u6cd5\u5b9e\u73b0\u4e86\n2. \u6570\u7ec4\u95ee\u9898\uff1adefineProperty\u65e0\u6cd5\u68c0\u6d4b\u6570\u7ec4\u957f\u5ea6\u7684\u53d8\u5316\uff0c\u51c6\u786e\u7684\u662f\u8bf4\uff0c\u662f\u65e0\u6cd5\u68c0\u6d4b\u901a\u8fc7\u6539\u53d8`length`\u7684\u65b9\u6cd5\u800c\u589e\u52a0\u7684\u957f\u5ea6\u65e0\u6cd5\u68c0\u6d4b\u5230\n\n```js\n// length\u7684\u5c5e\u6027\u88ab\u521d\u59cb\u5316\u6210\u4e3a\u4e86\nenumberable: false\nconfigurable: false\nwritable: true\n// \u6240\u4ee5\u8bf4\u76f4\u63a5\u53bb\u5220\u9664\u6216\u8005\u4fee\u6539length\u5c5e\u6027\u662f\u4e0d\u884c\u7684\nvar a = [1,2,3]\nObject.defineProperty(a,'length',{\n enumberable: true,\nconfigurable: true,\nwritable: true ,\n})\n\n// Uncaught TypeError: Cannot redefine property: length\n```\n\n#### 2.vue3 \u4f7f\u7528\u7684\u662fProxy\u548cReflect\uff0c\u76f4\u63a5\u4ee3\u7406\u6574\u4e2a\u5bf9\u8c61\n\n```js\nfunction reactive(data) {\n if (typeof data !== 'object' || data === null) {\n return data\n }\n const observed = new Proxy(data, {\n get(target, key, receiver) {\n // Reflect\u6709\u8fd4\u56de\u503c\u4e0d\u62a5\u9519\n let result = Reflect.get(target, key, receiver)\n\n // \u591a\u5c42\u4ee3\u7406\n return typeof result !== 'object' ? result : reactive(result) \n },\n set(target, key, value, receiver) {\n effective()\n // proxy + reflect\n const ret = Reflect.set(target, key, value, receiver)\n return ret\n },\n\n deleteProperty(target,key){\n const ret = Reflect.deleteProperty(target,key)\n return ret\n }\n\n })\n return observed\n}\n```\n\n#### 3.\u603b\u7ed3\n\n1. Object.defineProperty \u53ea\u80fd\u52ab\u6301\u5bf9\u8c61\u7684\u5c5e\u6027\uff0c\u800c Proxy \u662f\u76f4\u63a5\u4ee3\u7406\u5bf9\u8c61,\u7531\u4e8e Object.defineProperty \u53ea\u80fd\u5bf9\u5c5e\u6027\u8fdb\u884c\u52ab\u6301\uff0c\u9700\u8981\u904d\u5386\u5bf9\u8c61\u7684\u6bcf\u4e2a\u5c5e\u6027\u3002\u800c Proxy \u53ef\u4ee5\u76f4\u63a5\u4ee3\u7406\u5bf9\u8c61\u3002\n2. Object.defineProperty \u5bf9\u65b0\u589e\u5c5e\u6027\u9700\u8981\u624b\u52a8\u8fdb\u884c Observe\uff0c \u7531\u4e8e Object.defineProperty \u52ab\u6301\u7684\u662f\u5bf9\u8c61\u7684\u5c5e\u6027\uff0c\u6240\u4ee5\u65b0\u589e\u5c5e\u6027\u65f6\uff0c\u9700\u8981\u91cd\u65b0\u904d\u5386\u5bf9\u8c61\uff0c\u5bf9\u5176\u65b0\u589e\u5c5e\u6027\u518d\u4f7f\u7528 Object.defineProperty \u8fdb\u884c\u52ab\u6301\u3002 \u4e5f\u6b63\u662f\u56e0\u4e3a\u8fd9\u4e2a\u539f\u56e0\uff0c\u4f7f\u7528 Vue \u7ed9 data \u4e2d\u7684\u6570\u7ec4\u6216\u5bf9\u8c61\u65b0\u589e\u5c5e\u6027\u65f6\uff0c\u9700\u8981\u4f7f\u7528 vm.$set \u624d\u80fd\u4fdd\u8bc1\u65b0\u589e\u7684\u5c5e\u6027\u4e5f\u662f\u54cd\u5e94\u5f0f\u7684\u3002\n3. Proxy \u652f\u6301 13 \u79cd\u62e6\u622a\u64cd\u4f5c\uff0c\u8fd9\u662f defineProperty \u6240\u4e0d\u5177\u6709\u7684\u65b0\u6807\u51c6\u6027\u80fd\u7ea2\u5229\n4. Proxy \u4f5c\u4e3a\u65b0\u6807\u51c6\uff0c\u957f\u8fdc\u6765\u770b\uff0cJS \u5f15\u64ce\u4f1a\u7ee7\u7eed\u4f18\u5316 Proxy\uff0c\u4f46 getter \u548c setter \u57fa\u672c\u4e0d\u4f1a\u518d\u6709\u9488\u5bf9\u6027\u4f18\u5316\u3002\n5. Proxy \u517c\u5bb9\u6027\u5dee \u76ee\u524d\u5e76\u6ca1\u6709\u4e00\u4e2a\u5b8c\u6574\u652f\u6301 Proxy \u6240\u6709\u62e6\u622a\u65b9\u6cd5\u7684 Polyfill \u65b9\u6848\n", "answer": "", "biz_type": 1, "qid": 199, "subject": "", "title": "\u8bf4\u4e00\u4e0b Vue3 \u4e0e Vue2 \u7684\u5bf9\u6bd4"}, "tech_tag": ["Vue"], "uid": 0, "uname": ""}, {"audit_flag": 0, "corp_tag": ["\u7f51\u6613"], "date": "Fri, 19 Jun 2020 16:20:41 GMT", "favorite_num": 9, "qid": 227, "qtype": "short_answer", "short_answer": {"analysis": "### \u4e00\u3001Diff\u7b97\u6cd5\n\nDiff\u7b97\u6cd5\u662f\u4e00\u79cd\u901a\u8fc7\u540c\u5c42\u7684\u6811\u8282\u70b9\u8fdb\u884c\u6bd4\u8f83\u7684\u9ad8\u6548\u7b97\u6cd5\uff0c\u907f\u514d\u5bf9\u6811\u7684\u9010\u5c42\u904d\u5386\uff0c\u51cf\u5c11\u65f6\u95f4\u590d\u6742\u5ea6\u3002diff\u7b97\u6cd5\u5728\u5f88\u591a\u573a\u666f\u4e0b\u90fd\u6709\u5e94\u8be5\u7528\uff0c\u6bd4\u5982vue\u865a\u62dfdom\u6e32\u67d3\u751f\u6210\u771f\u5b9edom\u7684\u65b0\u65e7VNonde\u6bd4\u8f83\u66f4\u65b0\u3002\n\ndiff\u7b97\u6cd5\u4e24\u4e2a\u7279\u70b9\uff1a\n\n- \u53ea\u4f1a\u540c\u7ea7\u6bd4\u8f83\uff0c\u4e0d\u8de8\u5c42\u7ea7\n- diff\u6bd4\u8f83\u5faa\u73af\u4e24\u8fb9\u5f80\u4e2d\u95f4\u6536\u62e2\uff0c\n\n### \u4e8c\u3001Vue Diff\u7b97\u6cd5\n\n**vue\u7684\u865a\u62dfdomdiff\u6838\u5fc3\u5728\u4e0epatch\u8fc7\u7a0b**\n\n#### 1.\u9996\u5148\u5c06\u65b0\u65e7VNode\u8fdb\u884c\u5f00\u59cb\u4f4d\u7f6e\u548c\u7ed3\u675f\u4f4d\u7f6e\u7684\u6807\u8bb0\n\n```js\nlet oldStartIndex = 0;\nlet oldEndIndex = oldChildren.length -1;\nlet oldStartVnode = oldChidren[0];\nlet oldEndVnode = oldChildren[oldEndIndex];\nlet newStartIndex = 0;\nlet newEndIndex = newChildren.length - 1;\nlet newStartVnode = newChildren[0];\nlet newEndVnode = newChildren.length;\n```\n\n#### 2.\u6807\u8bb0\u597d\u8282\u70b9\u4f4d\u7f6e\uff0c\u8fdb\u884c\u5faa\u73af\u5904\u7406\u8282\u70b9\n\n- \u5982\u679c\u5f53\u524doldStartVnode\u548cnewStartVnode\u8282\u70b9\u76f8\u540c\uff0c\u76f4\u63a5\u7528\u65b0\u8282\u70b9\u590d\u7528\u8001\u8282\u70b9\uff0c\u8fdb\u884cpatchVnode\u590d\u7528\uff0c\u66f4\u65b0oldStartVnode\uff0cnewStartVnode\uff0coldStartIndex++ \u548c newStartIndex++\n- \u5982\u679c\u5f53\u524doldEndVnode\u548cnewEndVnode\u8282\u70b9\u76f8\u540c\uff0c\u76f4\u63a5\u7528\u65b0\u8282\u70b9\u590d\u7528\u8001\u8282\u70b9\uff0c\u8fdb\u884cpatchVnode\u590d\u7528\uff0c\u66f4\u65b0oldEndVnode\uff0cnewEndVnode\uff0coldEndIndex-- \u548c newEndIndex--\n- \u5982\u679c\u5f53\u524doldStartVnode\u548cnewEndVnode\u8282\u70b9\u76f8\u540c\uff0c\u76f4\u63a5\u7528\u65b0\u8282\u70b9\u590d\u7528\u8001\u8282\u70b9\uff0c\u8fdb\u884cpatchVnode\u590d\u7528\uff0c\u5c06\u5c06\u8001\u8282\u70b9\u79fb\u52a8\u5230oldEndVnode\u8282\u70b9\u4e4b\u540e\uff0c\uff0c \u66f4\u65b0oldStartVnode\uff0cnewEndVnode\uff0coldStartIndex++ \u548c newEndIndex--\n- \u5982\u679c\u5f53\u524doldEndVnode\u548cnewStartVnode\u8282\u70b9\u76f8\u540c\uff0c\u76f4\u63a5\u7528\u65b0\u8282\u70b9\u590d\u7528\u8001\u8282\u70b9\uff0c\u8fdb\u884cpatchVnode\u590d\u7528\uff0c\u5c06\u590d\u7528\u8001\u8282\u70b9\u79fb\u52a8oldStartVnode\u7684elm\u4e4b\u524d\uff0c\uff0c \u66f4\u65b0oldStartVnode\uff0cnewEndVnode\uff0coldEndIndex-- \u548c newStartIndex--\n- \u5982\u679c\u90fd\u4e0d\u6ee1\u8db3\u5219\u6ca1\u6709\u76f8\u540c\u8282\u70b9\u590d\u7528\uff0c\u8fdb\u884ckey\u7684\u5bf9\u6bd4\u3002\u6ee1\u8db3\u6761\u4ef6\u8fdb\u884cpatchVnode\u8fc7\u7a0b\uff0c\u5e76\u5c06dom\u79fb\u52a8\u5230oldStartVnode\u5bf9\u5e94\u771f\u662fdom\u4e4b\u524d\u3002\u6ca1\u627e\u5230\u5219\u91cd\u65b0\u521b\n\n#### 3.\u9012\u5f52\u5904\u7406\n\n\n### \u4e8c\u3001Vue Diff\u56fe\u89e3\n\n\n\n\n\n\n- **\u7b2c\u4e00\u6b65\uff1a** \u521b\u5efa\u56db\u4e2a\u6307\u9488\uff0c\u5206\u522b\u4e3a\u65e7`VNode`\u7684\u5f00\u59cb\u6307\u9488\u548c\u7ed3\u675f\u6307\u9488\u3001\u65b0`VNode`\u7684\u5f00\u59cb\u548c\u7ed3\u675f\u6307\u9488\n- **\u7b2c\u4e8c\u6b65\uff1a** \u5148\u6bd4\u8f83\u65e7`VNode`\u7684\u5f00\u59cb\u6307\u9488\u548c\u65b0`VNode`\u7684\u5f00\u59cb\u6307\u9488\uff0c\u5373`A`\u548c`E`\uff0c\u53d1\u73b0\u4e0d\u662f\u540c\u4e00\u4e2a\u8282\u70b9\n- **\u7b2c\u4e09\u6b65\uff1a** \u518d\u6bd4\u8f83\u65e7`VNode`\u7684\u7ed3\u675f\u6307\u9488\u548c\u65b0`VNode`\u7684\u7ed3\u675f\u6307\u9488\uff0c\u5373`D`\u548c`F`\uff0c\u4f9d\u7136\u4e0d\u662f\u76f8\u540c\u8282\u70b9\n- **\u7b2c\u56db\u6b65\uff1a** \u518d\u6bd4\u8f83\u65e7`VNode`\u7684\u5f00\u59cb\u6307\u9488\u548c\u65b0`VNode`\u7684\u7ed3\u675f\u6307\u9488\uff0c\u5373`A`\u548c`F`\uff0c\u4e0d\u662f\u76f8\u540c\u8282\u70b9\n- **\u7b2c\u4e94\u6b65\uff1a** \u518d\u6bd4\u8f83\u65e7`VNode`\u7684\u7ed3\u675f\u6307\u9488\u548c\u65b0`VNode`\u7684\u5f00\u59cb\u6307\u9488\uff0c\u5373`E`\u548c`D`\uff0c\u4e0d\u662f\u76f8\u540c\u8282\u70b9\n- **\u7b2c\u516d\u6b65\uff1a** \u901a\u8fc7\u4e0a\u8ff0\u56db\u79cd\u6bd4\u5bf9\u65b9\u5f0f\u90fd\u4e0d\u662f\u76f8\u540c\u8282\u70b9\uff0c\u4e0b\u9762\u5c31\u5728\u65e7`VNode`\u8282\u70b9\u4e2d\u67e5\u627e\u662f\u5426\u6709\u4e0e`E`\u8282\u70b9\u76f8\u540c\u7684\u8282\u70b9\n- **\u7b2c\u4e03\u6b65\uff1a** \u53d1\u73b0\u65e7`VNode`\u8282\u70b9\u4e2d\u6ca1\u6709`E`\u8282\u70b9\uff0c\u90a3\u4e48\u5c31\u4f1a\u5728\u65e7`VNode`\u5f00\u59cb\u6307\u9488\u524d\u63d2\u5165\u4e00\u4e2a\u65b0\u7684`E`\u8282\u70b9\n- **\u7b2c\u516b\u6b65\uff1a** \u7b2c\u4e00\u4e2a\u8282\u70b9\u64cd\u4f5c\u5b8c\u540e\uff0c\u6307\u9488\u540e\u79fb\uff0c\u7ee7\u7eed\u8fdb\u884c\u6bd4\u8f83\uff0c\u91cd\u590d\\**\u7b2c\u4e8c\u81f3\u7b2c\u4e03\u6b65**\uff0c\u7ed3\u679c\u4e3a\uff1a**\u65b0\u589e**\u3001**\u5220\u9664**\u3001**\u79fb\u52a8**\n- **\u7b2c\u4e5d\u6b65\uff1a** \u5f53\u627e\u5230\u76f8\u540c\u8282\u70b9\u65f6\uff0c\u4f1a\u901a\u8fc7`patchVnode`\u8fdb\u884c\u8fd9\u4e24\u4e2a\u8282\u70b9\u66f4\u7ec6\u81f4\u7684`Diff`\n\n\n**\u603b\u7ed3**\n\n\u6bcf\u6b21`Diff`\u90fd\u4f1a\u8c03\u7528`updateChildren`\u65b9\u6cd5\u6765\u6bd4\u8f83\uff0c\u5c31\u8fd9\u6837\u5c42\u5c42\u9012\u5f52\u4e0b\u53bb\uff0c\u76f4\u5230\u5c06\u65e7`VNode`\u548c\u65b0`VNode`\u4e2d\u7684\u6240\u6709\u5b50\u8282\u70b9\u6bd4\u5bf9\u5b8c\u3002`DomDiff`\u7684\u8fc7\u7a0b\u66f4\u50cf\u662f\u4e24\u4e2a\u6811\u7684\u6bd4\u8f83\uff0c\u6bcf\u627e\u5230\u76f8\u540c\u8282\u70b9\u65f6\uff0c\u90fd\u4f1a\u4e00\u5c42\u4e00\u5c42\u7684\u5f80\u4e0b\u6bd4\u8f83\u5b83\u4eec\u7684\u5b50\u8282\u70b9\uff0c\u662f\u4e00\u4e2a\\**\u6df1\u5ea6\u9012\u5f52\u904d\u5386\u6bd4\u8f83**\u7684\u8fc7\u7a0b\u3002\n\n\n\n\n\n\n", "answer": "", "biz_type": 1, "qid": 227, "subject": "", "title": "\u8bf4\u4e00\u4e0b Vue dom diff \u7b97\u6cd5"}, "tech_tag": ["Vue"], "uid": 0, "uname": ""}, {"audit_flag": 0, "corp_tag": ["\u81ea\u5982"], "date": "Fri, 19 Jun 2020 16:20:41 GMT", "favorite_num": 4, "qid": 249, "qtype": "short_answer", "short_answer": {"analysis": "### Vue\u4f9d\u8d56\u6536\u96c6\n\n\u5728\u521d\u59cb\u5316`Vue`\u7684\u6bcf\u4e2a\u7ec4\u4ef6\u65f6\uff0c\u4f1a\u5bf9\u7ec4\u4ef6\u7684`data`\u8fdb\u884c\u521d\u59cb\u5316\uff0c\u5c31\u4f1a\u5c06\u7531\u666e\u901a\u5bf9\u8c61\u53d8\u6210\u54cd\u5e94\u5f0f\u5bf9\u8c61\uff0c\u5728\u8fd9\u4e2a\u8fc7\u7a0b\u4e2d\u4fbf\u4f1a\u8fdb\u884c\u4f9d\u8d56\u6536\u96c6\u7684\u76f8\u5173\u903b\u8f91\uff0c\u5982\u4e0b\u6240\u793a:\n\n```js\nfunction defieneReactive (obj, key, val){\n const dep = new Dep();\n ...\n Object.defineProperty(obj, key, {\n ...\n get: function reactiveGetter () {\n if(Dep.target){\n dep.depend();\n ...\n }\n return val\n }\n ...\n })\n}\n```\n\n\u4ee5\u4e0a\u53ea\u4fdd\u7559\u4e86\u5173\u952e\u4ee3\u7801\uff0c\u4e3b\u8981\u5c31\u662f `const dep = new Dep()`\u5b9e\u4f8b\u5316\u4e00\u4e2a`Dep`\u7684\u5b9e\u4f8b\uff0c\u7136\u540e\u5728`get`\u51fd\u6570\u4e2d\u901a\u8fc7`dep.depend()`\u8fdb\u884c\u4f9d\u8d56\u6536\u96c6\u3002\n\n#### 1.Dep\n\n`Dep`\u662f\u6574\u4e2a\u4f9d\u8d56\u6536\u96c6\u7684\u6838\u5fc3\uff0c\u5173\u952e\u4ee3\u7801\u5982\u4e0b\uff1a\n\n```js\nclass Dep {\n static target;\n subs;\n \n constructor () {\n ...\n this.subs = [];\n }\n addSub (sub) {\n this.subs.push(sub)\n }\n removeSub (sub) {\n remove(this.sub, sub)\n }\n depend () {\n if(Dep.target){\n Dep.target.addDep(this)\n }\n }\n notify () {\n const subs = this.subds.slice();\n for(let i = 0;i < subs.length; i++){\n subs[i].update()\n }\n }\n}\n```\n\n`Dep`\u662f\u4e00\u4e2a`class`\uff0c\u5176\u4e2d\u6709\u4e00\u4e2a\u5173\u952e\u7684\u9759\u6001\u5c5e\u6027`static`\uff0c\u5b83\u6307\u5411\u4e86\u4e00\u4e2a\u5168\u5c40\u552f\u4e00`Watcher`\uff0c\u4fdd\u8bc1\u4e86\u540c\u4e00\u65f6\u95f4\u5168\u5c40\u53ea\u6709\u4e00\u4e2a`watcher`\u88ab\u8ba1\u7b97\uff0c\u53e6\u4e00\u4e2a\u5c5e\u6027`subs`\u5219\u662f\u4e00\u4e2a`Watcher`\u7684\u6570\u7ec4\uff0c\u6240\u4ee5`Dep`\u5b9e\u9645\u4e0a\u5c31\u662f\u5bf9`Watcher`\u7684\u7ba1\u7406\uff0c\u518d\u770b\u770b`Watcher`\u7684\u76f8\u5173\u4ee3\u7801\uff1a\n\n#### 2.Watcher\n\n```javascript\nclass Watcher {\n getter;\n ...\n constructor (vm, expression){\n ...\n this.getter = expression;\n this.get();\n }\n get () {\n pushTarget(this);\n value = this.getter.call(vm, vm)\n ...\n return value\n }\n addDep (dep){\n\t\t...\n dep.addSub(this)\n }\n ...\n}\nfunction pushTarget (_target) {\n Dep.target = _target\n}\n```\n\n`Watcher`\u662f\u4e00\u4e2a`class`\uff0c\u5b83\u5b9a\u4e49\u4e86\u4e00\u4e9b\u65b9\u6cd5\uff0c\u5176\u4e2d\u548c\u4f9d\u8d56\u6536\u96c6\u76f8\u5173\u7684\u4e3b\u8981\u6709`get`\u3001`addDep`\u7b49\u3002\n\n#### 3.\u8fc7\u7a0b\n\n\u5728\u5b9e\u4f8b\u5316`Vue`\u65f6\uff0c\u4f9d\u8d56\u6536\u96c6\u7684\u76f8\u5173\u8fc7\u7a0b\u5982\u4e0b\uff1a\n\n\u521d\u59cb\u5316\u72b6\u6001`initState`\uff0c\u8fd9\u4e2d\u95f4\u4fbf\u4f1a\u901a\u8fc7`defineReactive`\u5c06\u6570\u636e\u53d8\u6210\u54cd\u5e94\u5f0f\u5bf9\u8c61\uff0c\u5176\u4e2d\u7684`gette r`\u90e8\u5206\u4fbf\u662f\u7528\u6765\u4f9d\u8d56\u6536\u96c6\u7684\u3002\n\n\u521d\u59cb\u5316\u6700\u7ec8\u4f1a\u8d70`mount`\u8fc7\u7a0b\uff0c\u5176\u4e2d\u4f1a\u5b9e\u4f8b\u5316`Watcher`\uff0c\u8fdb\u5165`Watcher`\u4e2d\uff0c\u4fbf\u4f1a\u6267\u884c`this.get()`\u65b9\u6cd5\uff0c\n\n```js\nupdateComponent = () => {\n vm._update(vm._render())\n}\nnew Watcher(vm, updateComponent)\n```\n\n`get`\u65b9\u6cd5\u4e2d\u7684`pushTarget`\u5b9e\u9645\u4e0a\u5c31\u662f\u628a`Dep.target`\u8d4b\u503c\u4e3a\u5f53\u524d\u7684`watcher`\u3002\n\n`this.getter.call(vm, vm)`\uff0c\u8fd9\u91cc\u7684`getter`\u4f1a\u6267\u884c`vm._render()`\u65b9\u6cd5\uff0c\u5728\u8fd9\u4e2a\u8fc7\u7a0b\u4e2d\u4fbf\u4f1a\t\u89e6\u53d1\u6570\u636e\u5bf9\u8c61\u7684`getter`\u3002\n\n\u90a3\u4e48\u6bcf\u4e2a\u5bf9\u8c61\u503c\u7684 getter \u90fd\u6301\u6709\u4e00\u4e2a `dep`\uff0c\u5728\u89e6\u53d1 getter \u7684\u65f6\u5019\u4f1a\u8c03\u7528 `dep.depend()` \u65b9\u6cd5\uff0c\u4e5f\u5c31\u4f1a\u6267\u884c `Dep.target.addDep(this)`\u3002\n\n\u521a\u624d `Dep.target` \u5df2\u7ecf\u88ab\u8d4b\u503c\u4e3a `watcher`\uff0c\u4e8e\u662f\u4fbf\u4f1a\u6267\u884c `addDep` \u65b9\u6cd5\uff0c\u7136\u540e\u8d70\u5230`dep.addSub()`\u65b9\u6cd5\uff0c\u4fbf\u5c06\u5f53\u524d\u7684 `watcher` \u8ba2\u9605\u5230\u8fd9\u4e2a\u6570\u636e\u6301\u6709\u7684 `dep` \u7684 `subs` \u4e2d\uff0c\u8fd9\u4e2a\u76ee\u7684\u662f\u4e3a\u540e\u7eed\u6570\u636e\u53d8\u5316\u65f6\u5019\u80fd\u901a\u77e5\u5230\u54ea\u4e9b `subs` \u505a\u51c6\u5907\u3002\n\n\u6240\u4ee5\u5728 `vm._render()` \u8fc7\u7a0b\u4e2d\uff0c\u4f1a\u89e6\u53d1\u6240\u6709\u6570\u636e\u7684 getter\uff0c\u8fd9\u6837\u4fbf\u5df2\u7ecf\u5b8c\u6210\u4e86\u4e00\u4e2a\u4f9d\u8d56\u6536\u96c6\u7684\u8fc7\u7a0b\u3002", "answer": "", "biz_type": 1, "qid": 249, "subject": "", "title": "Vue \u662f\u5982\u4f55\u6536\u96c6\u4f9d\u8d56\u7684"}, "tech_tag": ["Vue"], "uid": 0, "uname": ""}, {"audit_flag": 0, "corp_tag": ["\u8109\u8109", "58"], "date": "Fri, 19 Jun 2020 16:20:41 GMT", "favorite_num": 7, "qid": 219, "qtype": "short_answer", "short_answer": {"analysis": "", "answer": "", "biz_type": 1, "qid": 219, "subject": "", "title": "\u8bf4\u4e00\u4e0b Vue \u7ec4\u4ef6\u7684\u901a\u4fe1\u65b9\u5f0f\u90fd\u6709\u54ea\u4e9b\uff1f(\u7236\u5b50\u7ec4\u4ef6\uff0c\u5144\u5f1f\u7ec4\u4ef6\uff0c\u591a\u7ea7\u5d4c\u5957\u7ec4\u4ef6\u7b49\u7b49)"}, "tech_tag": ["Vue"], "uid": 0, "uname": ""}, {"audit_flag": 0, "corp_tag": [], "date": "Fri, 19 Jun 2020 16:20:41 GMT", "favorite_num": 4, "qid": 259, "qtype": "short_answer", "short_answer": {"analysis": "", "answer": "", "biz_type": 1, "qid": 259, "subject": "", "title": "\u8bf4\u4e00\u4e0b Vue \u8def\u7531\u5b9e\u73b0\u539f\u7406"}, "tech_tag": ["Vue"], "uid": 0, "uname": ""}, {"audit_flag": 0, "corp_tag": ["\u864e\u6251", "CVTE"], "date": "Fri, 19 Jun 2020 16:20:41 GMT", "favorite_num": 6, "qid": 275, "qtype": "short_answer", "short_answer": {"analysis": "", "answer": "", "biz_type": 1, "qid": 275, "subject": "", "title": "Vue3.0 \u4e3a\u4ec0\u4e48\u8981\u7528 proxy\uff1f\u662f\u600e\u4e48\u7528 proxy \u5b9e\u73b0\u6570\u636e\u76d1\u542c\u7684?"}, "tech_tag": ["Vue"], "uid": 0, "uname": ""}, {"audit_flag": 0, "corp_tag": ["\u7f51\u6613", "\u8109\u8109", "\u5feb\u624b"], "date": "Fri, 19 Jun 2020 16:20:41 GMT", "favorite_num": 11, "qid": 159, "qtype": "short_answer", "short_answer": {"analysis": "\n### \u4e00\u3001\u76f8\u4f3c\u4e4b\u5904\n\n- \u90fd\u5c06\u6ce8\u610f\u529b\u96c6\u4e2d\u4fdd\u6301\u5728\u6838\u5fc3\u5e93\uff0c\u800c\u5c06\u5176\u4ed6\u529f\u80fd\u5982\u8def\u7531\u548c\u5168\u5c40\u72b6\u6001\u7ba1\u7406\u4ea4\u7ed9\u76f8\u5173\u7684\u5e93\n- \u90fd\u6709\u81ea\u5df1\u7684\u6784\u5efa\u5de5\u5177\uff0c\u80fd\u8ba9\u4f60\u5f97\u5230\u4e00\u4e2a\u6839\u636e\u6700\u4f73\u5b9e\u8df5\u8bbe\u7f6e\u7684\u9879\u76ee\u6a21\u677f\u3002\n- \u90fd\u4f7f\u7528\u4e86'Virtual DOM'\uff08\u865a\u62dfDOM\uff09\u63d0\u9ad8\u91cd\u7ed8\u6027\u80fd\n- \u90fd\u6709\u2019props\u2019\u7684\u6982\u5ff5\uff0c\u5141\u8bb8\u7ec4\u4ef6\u95f4\u7684\u6570\u636e\u4f20\u9012\n- \u90fd\u9f13\u52b1\u7ec4\u4ef6\u5316\u5e94\u7528\uff0c\u5c06\u5e94\u7528\u5206\u62c6\u6210\u4e00\u4e2a\u4e2a\u529f\u80fd\u660e\u786e\u7684\u6a21\u5757\uff0c\u63d0\u9ad8\u590d\u7528\u6027\n\n### \u4e8c\u3001\u4e0d\u540c\u4e4b\u5904\n\n#### 1.\u6570\u636e\u6d41\n\nVue\u9ed8\u8ba4\u652f\u6301\u6570\u636e\u53cc\u5411\u7ed1\u5b9a\uff0c\u800cReact\u4e00\u76f4\u63d0\u5021\u5355\u5411\u6570\u636e\u6d41\n\n#### 2.\u865a\u62dfDOM\n\nVue2.x \u5f00\u59cb\u5f15\u5165\u201cVirtual DOM\u201d\uff0c\u6d88\u9664\u4e86\u548cReact\u5728\u8fd9\u65b9\u9762\u7684\u5dee\u5f02\uff0c\u4f46\u662f\u5728\u5177\u4f53\u7684\u7ec6\u8282\u8fd8\u662f\u6709\u5404\u81ea\u7684\u7279\u70b9\n\n- Vue\u5ba3\u79f0\u53ef\u4ee5\u66f4\u5feb\u5730\u8ba1\u7b97\u51faVirtual DOM\u7684\u5dee\u5f02\uff0c\u8fd9\u662f\u7531\u4e8e\u5b83\u5728\u6e32\u67d3\u8fc7\u7a0b\u4e2d\uff0c\u4f1a\u8ddf\u8e2a\u6bcf\u4e00\u4e2a\u7ec4\u4ef6\u7684\u4f9d\u8d56\u5173\u7cfb\uff0c\u4e0d\u9700\u8981\u91cd\u65b0\u6e32\u67d3\u6574\u4e2a\u7ec4\u4ef6\u6811\u3002\n\n- \u5bf9\u4e8eReact\u800c\u8a00\uff0c\u6bcf\u5f53\u5e94\u7528\u7684\u72b6\u6001\u88ab\u6539\u53d8\u65f6\uff0c\u5168\u90e8\u5b50\u7ec4\u4ef6\u90fd\u4f1a\u91cd\u65b0\u6e32\u67d3\u3002\u5f53\u7136\uff0c\u8fd9\u53ef\u4ee5\u901a\u8fc7PureComponent/shouldComponentUpdate\u8fd9\u4e2a\u751f\u547d\u5468\u671f\u65b9\u6cd5\u6765\u8fdb\u884c\u63a7\u5236\uff0c\u4f46Vue\u5c06\u6b64\u89c6\u4e3a\u9ed8\u8ba4\u7684\u4f18\u5316\u3002\n\n#### 3.\u7ec4\u4ef6\u5316\n\nReact\u4e0eVue\u6700\u5927\u7684\u4e0d\u540c\u662f\u6a21\u677f\u7684\u7f16\u5199\u3002\n\nVue\u9f13\u52b1\u4f60\u53bb\u5199\u8fd1\u4f3c\u5e38\u89c4HTML\u7684\u6a21\u677f\u3002\u5199\u8d77\u6765\u5f88\u63a5\u8fd1\u6807\u51c6HTML\u5143\u7d20\uff0c\u53ea\u662f\u591a\u4e86\u4e00\u4e9b\u5c5e\u6027\u3002React\u63a8\u8350\u4f60\u6240\u6709\u7684\u6a21\u677f\u901a\u7528JavaScript\u7684\u8bed\u6cd5\u6269\u5c55\u2014\u2014JSX\u4e66\u5199\u3002\n\n\u5177\u4f53\u6765\u8bb2\uff1a\n\nReact\u4e2drender\u51fd\u6570\u662f\u652f\u6301\u95ed\u5305\u7279\u6027\u7684\uff0c\u6240\u4ee5\u6211\u4eecimport\u7684\u7ec4\u4ef6\u5728render\u4e2d\u53ef\u4ee5\u76f4\u63a5\u8c03\u7528\u3002\u4f46\u662f\u5728Vue\u4e2d\uff0c\u7531\u4e8e\u6a21\u677f\u4e2d\u4f7f\u7528\u7684\u6570\u636e\u90fd\u5fc5\u987b\u6302\u5728 this \u4e0a\u8fdb\u884c\u4e00\u6b21\u4e2d\u8f6c\uff0c\u6240\u4ee5\u6211\u4eecimport \u4e00\u4e2a\u7ec4\u4ef6\u5b8c\u4e86\u4e4b\u540e\uff0c\u8fd8\u9700\u8981\u5728 components \u4e2d\u518d\u58f0\u660e\u4e0b\u3002\n\n#### 4.\u76d1\u542c\u6570\u636e\u53d8\u5316\u7684\u5b9e\u73b0\u539f\u7406\u4e0d\u540c\n\n- Vue \u901a\u8fc7 `getter/setter` \u4ee5\u53ca\u4e00\u4e9b\u51fd\u6570\u7684\u52ab\u6301\uff0c\u80fd\u7cbe\u786e\u77e5\u9053\u6570\u636e\u53d8\u5316\uff0c\u4e0d\u9700\u8981\u7279\u522b\u7684\u4f18\u5316\u5c31\u80fd\u8fbe\u5230\u5f88\u597d\u7684\u6027\u80fd\n- React \u9ed8\u8ba4\u662f\u901a\u8fc7\u6bd4\u8f83\u5f15\u7528\u7684\u65b9\u5f0f\u8fdb\u884c\u7684\uff0c\u5982\u679c\u4e0d\u4f18\u5316\uff08PureComponent/shouldComponentUpdate\uff09\u53ef\u80fd\u5bfc\u81f4\u5927\u91cf\u4e0d\u5fc5\u8981\u7684VDOM\u7684\u91cd\u65b0\u6e32\u67d3\u3002\u8fd9\u662f\u56e0\u4e3aVue \u4f7f\u7528\u7684\u662f\u53ef\u53d8\u6570\u636e\uff0c\u800cReact\u66f4\u5f3a\u8c03\u6570\u636e\u7684\u4e0d\u53ef\u53d8\u3002\n\n#### 5.\u9ad8\u9636\u7ec4\u4ef6\n\nreact\u53ef\u4ee5\u901a\u8fc7\u9ad8\u9636\u7ec4\u4ef6\uff08Higher Order Components--HOC\uff09\u6765\u6269\u5c55\uff0c\u800cvue\u9700\u8981\u901a\u8fc7mixins\u6765\u6269\u5c55\n\n\u539f\u56e0\u9ad8\u9636\u7ec4\u4ef6\u5c31\u662f\u9ad8\u9636\u51fd\u6570\uff0c\u800cReact\u7684\u7ec4\u4ef6\u672c\u8eab\u5c31\u662f\u7eaf\u7cb9\u7684\u51fd\u6570\uff0c\u6240\u4ee5\u9ad8\u9636\u51fd\u6570\u5bf9React\u6765\u8bf4\u6613\u5982\u53cd\u638c\u3002\u76f8\u53cdVue.js\u4f7f\u7528HTML\u6a21\u677f\u521b\u5efa\u89c6\u56fe\u7ec4\u4ef6\uff0c\u8fd9\u65f6\u6a21\u677f\u65e0\u6cd5\u6709\u6548\u7684\u7f16\u8bd1\uff0c\u56e0\u6b64Vue\u4e0d\u91c7\u7528HoC\u6765\u5b9e\u73b0\u3002\n\n#### 6.\u6784\u5efa\u5de5\u5177\n\n\u4e24\u8005\u90fd\u6709\u81ea\u5df1\u7684\u6784\u5efa\u5de5\u5177\n\n- React ==> Create React APP\n- Vue ==> vue-cli\n\n#### 7.\u8de8\u5e73\u53f0\n\n- React ==> React Native\n- Vue ==> Weex", "answer": "", "biz_type": 1, "qid": 159, "subject": "", "title": "\u8bf4\u4e00\u4e0b\u5bf9 React \u548c Vue \u7684\u7406\u89e3\uff0c\u5b83\u4eec\u7684\u5f02\u540c"}, "tech_tag": ["React", "Vue"], "uid": 0, "uname": ""}, {"audit_flag": 0, "corp_tag": ["\u8109\u8109"], "date": "Fri, 19 Jun 2020 16:20:41 GMT", "favorite_num": 8, "qid": 220, "qtype": "short_answer", "short_answer": {"analysis": "\n### Vuex\n\n\n\nVuex\u4e3aVue Components\u5efa\u7acb\u8d77\u4e86\u4e00\u4e2a\u5b8c\u6574\u7684\u751f\u6001\u5708\uff0c\u5305\u62ec\u5f00\u53d1\u4e2d\u7684API\u8c03\u7528\u4e00\u73af\u3002\n\n#### 1.\u6838\u5fc3\u6d41\u7a0b\u4e2d\u7684\u4e3b\u8981\u529f\u80fd\uff1a\n\n1. Vue Components \u662f\u6211\u4eec\u7684 vue \u7ec4\u4ef6\uff0c\u7ec4\u4ef6\u4f1a\u89e6\u53d1\uff08dispatch\uff09\u4e00\u4e9b\u4e8b\u4ef6\u6216\u52a8\u4f5c\uff0c\u4e5f\u5c31\u662f\u56fe\u4e2d\u7684 Actions\uff1b\n2. \u6211\u4eec\u5728\u7ec4\u4ef6\u4e2d\u53d1\u51fa\u7684\u52a8\u4f5c\uff0c\u80af\u5b9a\u662f\u60f3\u83b7\u53d6\u6216\u8005\u6539\u53d8\u6570\u636e\u7684\uff0c\u4f46\u662f\u5728 vuex \u4e2d\uff0c\u6570\u636e\u662f\u96c6\u4e2d\u7ba1\u7406\u7684\uff0c\u6211\u4eec\u4e0d\u80fd\u76f4\u63a5\u53bb\u66f4\u6539\u6570\u636e\uff0c\u6240\u4ee5\u4f1a\u628a\u8fd9\u4e2a\u52a8\u4f5c\u63d0\u4ea4\uff08Commit\uff09\u5230 Mutations \u4e2d\uff1b\n3. \u7136\u540e Mutations \u5c31\u53bb\u6539\u53d8\uff08Mutate\uff09State \u4e2d\u7684\u6570\u636e\uff1b\n4. \u5f53 State \u4e2d\u7684\u6570\u636e\u88ab\u6539\u53d8\u4e4b\u540e\uff0c\u5c31\u4f1a\u91cd\u65b0\u6e32\u67d3\uff08Render\uff09\u5230 Vue Components \u4e2d\u53bb\uff0c\u7ec4\u4ef6\u5c55\u793a\u66f4\u65b0\u540e\u7684\u6570\u636e\uff0c\u5b8c\u6210\u4e00\u4e2a\u6d41\u7a0b\u3002\n\n#### \u5404\u6a21\u5757\u5728\u6838\u5fc3\u6d41\u7a0b\u4e2d\u7684\u4e3b\u8981\u529f\u80fd\uff1a\n\n- **Vue Components:** Vue\u7ec4\u4ef6\u3002HTML\u9875\u9762\u4e0a\uff0c\u8d1f\u8d23\u63a5\u6536\u7528\u6237\u64cd\u4f5c\u7b49\u4ea4\u4e92\u884c\u4e3a\uff0c\u6267\u884cdispatch\u65b9\u6cd5\u89e6\u53d1\u5bf9\u5e94action\u8fdb\u884c\u56de\u5e94\u3002\n- **dispatch:** \u64cd\u4f5c\u884c\u4e3a\u89e6\u53d1\u65b9\u6cd5\uff0c\u662f\u552f\u4e00\u80fd\u6267\u884caction\u7684\u65b9\u6cd5\u3002\n- **actions:** \u64cd\u4f5c\u884c\u4e3a\u5904\u7406\u6a21\u5757\u3002\u8d1f\u8d23\u5904\u7406Vue Components\u63a5\u6536\u5230\u7684\u6240\u6709\u4ea4\u4e92\u884c\u4e3a\u3002\u5305\u542b\u540c\u6b65/\u5f02\u6b65\u64cd\u4f5c\uff0c\u652f\u6301\u591a\u4e2a\u540c\u540d\u65b9\u6cd5\uff0c\u6309\u7167\u6ce8\u518c\u7684\u987a\u5e8f\u4f9d\u6b21\u89e6\u53d1\u3002\u5411\u540e\u53f0API\u8bf7\u6c42\u7684\u64cd\u4f5c\u5c31\u5728\u8fd9\u4e2a\u6a21\u5757\u4e2d\u8fdb\u884c\uff0c\u5305\u62ec\u89e6\u53d1\u5176\u4ed6action\u4ee5\u53ca\u63d0\u4ea4mutation\u7684\u64cd\u4f5c\u3002\u8be5\u6a21\u5757\u63d0\u4f9b\u4e86Promise\u7684\u5c01\u88c5\uff0c\u4ee5\u652f\u6301action\u7684\u94fe\u5f0f\u89e6\u53d1\u3002\n- **commit:** \u72b6\u6001\u6539\u53d8\u63d0\u4ea4\u64cd\u4f5c\u65b9\u6cd5\u3002\u5bf9mutation\u8fdb\u884c\u63d0\u4ea4\uff0c\u662f\u552f\u4e00\u80fd\u6267\u884cmutation\u7684\u65b9\u6cd5\u3002\n- **mutations:** \u72b6\u6001\u6539\u53d8\u64cd\u4f5c\u65b9\u6cd5\u3002\u662fVuex\u4fee\u6539state\u7684\u552f\u4e00\u63a8\u8350\u65b9\u6cd5\uff0c\u5176\u4ed6\u4fee\u6539\u65b9\u5f0f\u5728\u4e25\u683c\u6a21\u5f0f\u4e0b\u5c06\u4f1a\u62a5\u9519\u3002\u8be5\u65b9\u6cd5\u53ea\u80fd\u8fdb\u884c\u540c\u6b65\u64cd\u4f5c\uff0c\u4e14\u65b9\u6cd5\u540d\u53ea\u80fd\u5168\u5c40\u552f\u4e00\u3002\u64cd\u4f5c\u4e4b\u4e2d\u4f1a\u6709\u4e00\u4e9bhook\u66b4\u9732\u51fa\u6765\uff0c\u4ee5\u8fdb\u884cstate\u7684\u76d1\u63a7\u7b49\u3002\n- **state:** \u9875\u9762\u72b6\u6001\u7ba1\u7406\u5bb9\u5668\u5bf9\u8c61\u3002\u96c6\u4e2d\u5b58\u50a8Vue components\u4e2ddata\u5bf9\u8c61\u7684\u96f6\u6563\u6570\u636e\uff0c\u5168\u5c40\u552f\u4e00\uff0c\u4ee5\u8fdb\u884c\u7edf\u4e00\u7684\u72b6\u6001\u7ba1\u7406\u3002\u9875\u9762\u663e\u793a\u6240\u9700\u7684\u6570\u636e\u4ece\u8be5\u5bf9\u8c61\u4e2d\u8fdb\u884c\u8bfb\u53d6\uff0c\u5229\u7528Vue\u7684\u7ec6\u7c92\u5ea6\u6570\u636e\u54cd\u5e94\u673a\u5236\u6765\u8fdb\u884c\u9ad8\u6548\u7684\u72b6\u6001\u66f4\u65b0\u3002\n- **getters:** state\u5bf9\u8c61\u8bfb\u53d6\u65b9\u6cd5\u3002\u56fe\u4e2d\u6ca1\u6709\u5355\u72ec\u5217\u51fa\u8be5\u6a21\u5757\uff0c\u5e94\u8be5\u88ab\u5305\u542b\u5728\u4e86render\u4e2d\uff0cVue Components\u901a\u8fc7\u8be5\u65b9\u6cd5\u8bfb\u53d6\u5168\u5c40state\u5bf9\u8c61\u3002", "answer": "", "biz_type": 1, "qid": 220, "subject": "", "title": "\u8bf4\u4e00\u4e0b Vuex \u7684\u539f\u7406\u4ee5\u53ca\u81ea\u5df1\u7684\u7406\u89e3"}, "tech_tag": ["Vue"], "uid": 0, "uname": ""}, {"audit_flag": 0, "corp_tag": ["\u5feb\u624b"], "date": "Fri, 19 Jun 2020 16:20:40 GMT", "favorite_num": 14, "qid": 72, "qtype": "short_answer", "short_answer": {"analysis": "**1\uff09Redux \u548c Vuex\u533a\u522b**\n\n- Vuex\u6539\u8fdb\u4e86Redux\u4e2d\u7684Action\u548cReducer\u51fd\u6570\uff0c\u4ee5mutations\u53d8\u5316\u51fd\u6570\u53d6\u4ee3Reducer\uff0c\u65e0\u9700switch,\u53ea\u9700\u5728\u5bf9\u5e94\u7684mutation\u51fd\u6570\u91cc\u6539\u53d8state\u503c\u5373\u53ef\n- Vuex\u7531\u4e8eVue\u81ea\u52a8\u91cd\u65b0\u6e32\u67d3\u7684\u7279\u6027\uff0c\u65e0\u9700\u8ba2\u9605\u91cd\u65b0\u6e32\u67d3\u51fd\u6570\uff0c\u53ea\u8981\u751f\u6210\u65b0\u7684State\u5373\u53ef\n- Vuex\u6570\u636e\u6d41\u7684\u987a\u5e8f\u662f:View\u8c03\u7528store.commit\u63d0\u4ea4\u5bf9\u5e94\u7684\u8bf7\u6c42\u5230Store\u4e2d\u5bf9\u5e94\u7684mutation\u51fd\u6570->store\u6539\u53d8(vue\u68c0\u6d4b\u5230\u6570\u636e\u53d8\u5316\u81ea\u52a8\u6e32\u67d3)\n\n\u901a\u4fd7\u70b9\u7406\u89e3\u5c31\u662f\uff0cvuex \u5f31\u5316 dispatch, \u901a\u8fc7commit\u8fdb\u884cstore\u72b6\u6001\u7684\u4e00\u6b21\u66f4\u53d8;\u53d6\u6d88\u4e86action\u6982\u5ff5, \u4e0d\u5fc5\u4f20\u5165\u7279\u5b9a\u7684action\u5f62\u5f0f\u8fdb\u884c\u6307\u5b9a\u53d8\u66f4; \u5f31\u5316reducer, \u57fa\u4e8ecommit\u53c2\u6570\u76f4\u63a5\u5bf9\u6570\u636e\u8fdb\u884c\u8f6c\u53d8, \u4f7f\u5f97\u6846\u67b6\u66f4\u52a0\u7b80\u6613;\n\n**2\uff09\u5171\u540c\u601d\u60f3**\n\n- \u5355\u4e00\u7684\u6570\u636e\u6e90\n- \u53d8\u5316\u53ef\u4ee5\u9884\u6d4b\n\n**\u672c\u8d28\u4e0a\uff1a** redux\u4e0evuex\u90fd\u662f\u5bf9mvvm\u601d\u60f3\u7684\u670d\u52a1, \u5c06\u6570\u636e\u4ece\u89c6\u56fe\u4e2d\u62bd\u79bb\u7684\u4e00\u79cd\u65b9\u6848;\n\n**\u5f62\u5f0f\u4e0a\uff1a** vuex\u501f\u9274\u4e86redux, \u5c06store\u4f5c\u4e3a\u5168\u5c40\u7684\u6570\u636e\u4e2d\u5fc3, \u8fdb\u884cmode\u7ba1\u7406;\n\n", "answer": "", "biz_type": 1, "qid": 72, "subject": "", "title": "Redux \u548c Vuex \u6709\u4ec0\u4e48\u533a\u522b\uff0c\u8bf4\u4e0b\u4e00\u5b83\u4eec\u7684\u5171\u540c\u601d\u60f3"}, "tech_tag": ["React", "Vue"], "uid": 0, "uname": ""}, {"audit_flag": 0, "corp_tag": ["\u5feb\u624b"], "date": "Fri, 19 Jun 2020 16:20:40 GMT", "favorite_num": 16, "qid": 71, "qtype": "short_answer", "short_answer": {"analysis": "### \u4e00\u3001keep-alive\n\n#### Props\n\n- include \u5b57\u7b26\u4e32\u6216\u6b63\u5219\u8868\u8fbe\u5f0f\uff0c\u53ea\u6709\u540d\u79f0\u5339\u914d\u7684\u7ec4\u4ef6\u4f1a\u88ab\u5339\u914d\n- exclude \u5b57\u7b26\u4e32\u6216\u6b63\u5219\u8868\u8fbe\u5f0f\u3002\u4efb\u4f55\u540d\u79f0\u5339\u914d\u7684\u7ec4\u4ef6\u90fd\u4e0d\u4f1a\u88ab\u7f13\u5b58\u3002\n- max \u6570\u5b57\u3002\u6700\u591a\u53ef\u4ee5\u7f13\u5b58\u591a\u5c11\u7ec4\u4ef6\u5b9e\u4f8b\n\n> keep-alive \u5305\u88f9\u52a8\u6001\u7ec4\u4ef6\u65f6\uff0c\u4f1a\u7f13\u5b58**\u4e0d\u6d3b\u52a8\u7684\u7ec4\u4ef6\u5b9e\u4f8b**\n\n#### \u4e3b\u8981\u6d41\u7a0b\n\n1. \u5224\u65ad\u7ec4\u4ef6`name`\uff0c\u4e0d\u5728`include`\u6216\u8005\u5728`exclude`\u4e2d\uff0c\u76f4\u63a5\u8fd4\u56de`vnode`\uff0c\u8bf4\u660e\u8be5\u7ec4\u4ef6\u4e0d\u88ab\u7f13\u5b58\u3002\n2. \u83b7\u53d6\u7ec4\u4ef6\u5b9e\u4f8b`key`\uff0c\u5982\u679c\u6709\u83b7\u53d6\u5b9e\u4f8b\u7684`key`\uff0c\u5426\u5219\u91cd\u65b0\u751f\u6210\u3002\n3. key\u751f\u6210\u89c4\u5219\uff0c`cid + \"::\"+ tag`\uff0c\u4ec5\u9760cid\u662f\u4e0d\u591f\u7684\u7684\uff0c\u56e0\u4e3a\u76f8\u540c\u7684\u6784\u9020\u51fd\u6570\u53ef\u4ee5\u6ce8\u518c\u4e3a\u4e0d\u540c\u7684\u672c\u5730\u7ec4\u4ef6\u3002\n4. \u5982\u679c\u7f13\u5b58\u5bf9\u8c61\u5185\u5b58\u5728\uff0c\u5219\u76f4\u63a5\u4ece\u7f13\u5b58\u5bf9\u8c61\u4e2d\u83b7\u53d6\u7ec4\u4ef6\u5b9e\u4f8b\u7ed9`vnode`\uff0c\u4e0d\u5b58\u5728\u5219\u6dfb\u52a0\u5230\u7f13\u5b58\u5bf9\u8c61\u4e2d\u3002\n5. \u6700\u5927\u7f13\u5b58\u6570\u91cf\uff0c\u5f53\u7f13\u5b58\u7ec4\u4ef6\u6570\u91cf\u8d85\u8fc7`max`\u503c\u65f6\uff0c\u6e05\u9664`keys`\u6570\u7ec4\u5185\u7b2c\u4e00\u4e2a\u7ec4\u4ef6\u3002\n\n### \u4e8c\u3001keep-alive \u7684\u5b9e\u73b0\n\n```js\nconst patternTypes: Array<Function> = [String, RegExp, Array] // \u63a5\u6536\uff1a\u5b57\u7b26\u4e32\uff0c\u6b63\u5219\uff0c\u6570\u7ec4\n\nexport default {\n name: 'keep-alive',\n abstract: true, // \u62bd\u8c61\u7ec4\u4ef6\uff0c\u662f\u4e00\u4e2a\u62bd\u8c61\u7ec4\u4ef6\uff1a\u5b83\u81ea\u8eab\u4e0d\u4f1a\u6e32\u67d3\u4e00\u4e2a DOM \u5143\u7d20\uff0c\u4e5f\u4e0d\u4f1a\u51fa\u73b0\u5728\u7236\u7ec4\u4ef6\u94fe\u4e2d\u3002\n\n props: {\n include: patternTypes, // \u5339\u914d\u7684\u7ec4\u4ef6\uff0c\u7f13\u5b58\n exclude: patternTypes, // \u4e0d\u53bb\u5339\u914d\u7684\u7ec4\u4ef6\uff0c\u4e0d\u7f13\u5b58\n max: [String, Number], // \u7f13\u5b58\u7ec4\u4ef6\u7684\u6700\u5927\u5b9e\u4f8b\u6570\u91cf, \u7531\u4e8e\u7f13\u5b58\u7684\u662f\u7ec4\u4ef6\u5b9e\u4f8b\uff08vnode\uff09\uff0c\u6570\u91cf\u8fc7\u591a\u7684\u65f6\u5019\uff0c\u4f1a\u5360\u7528\u8fc7\u591a\u7684\u5185\u5b58\uff0c\u53ef\u4ee5\u7528max\u6307\u5b9a\u4e0a\u9650\n },\n\n created() {\n // \u7528\u4e8e\u521d\u59cb\u5316\u7f13\u5b58\u865a\u62dfDOM\u6570\u7ec4\u548cvnode\u7684key\n this.cache = Object.create(null)\n this.keys = []\n },\n\n destroyed() {\n // \u9500\u6bc1\u7f13\u5b58cache\u7684\u7ec4\u4ef6\u5b9e\u4f8b\n for (const key in this.cache) {\n pruneCacheEntry(this.cache, key, this.keys)\n }\n },\n\n mounted() {\n // prune \u524a\u51cf\u7cbe\u7b80[v.]\n // \u53bb\u76d1\u63a7include\u548cexclude\u7684\u6539\u53d8\uff0c\u6839\u636e\u6700\u65b0\u7684include\u548cexclude\u7684\u5185\u5bb9\uff0c\u6765\u5b9e\u65f6\u524a\u51cf\u7f13\u5b58\u7684\u7ec4\u4ef6\u7684\u5185\u5bb9\n this.$watch('include', (val) => {\n pruneCache(this, (name) => matches(val, name))\n })\n this.$watch('exclude', (val) => {\n pruneCache(this, (name) => !matches(val, name))\n })\n },\n}\n```\n\n#### render\u51fd\u6570\n\n1. \u4f1a\u5728 keep-alive \u7ec4\u4ef6\u5185\u90e8\u53bb\u5199\u81ea\u5df1\u7684\u5185\u5bb9\uff0c\u6240\u4ee5\u53ef\u4ee5\u53bb\u83b7\u53d6\u9ed8\u8ba4 slot \u7684\u5185\u5bb9\uff0c\u7136\u540e\u6839\u636e\u8fd9\u4e2a\u53bb\u83b7\u53d6\u7ec4\u4ef6\n2. keep-alive \u53ea\u5bf9\u7b2c\u4e00\u4e2a\u7ec4\u4ef6\u6709\u6548\uff0c\u6240\u4ee5\u83b7\u53d6\u7b2c\u4e00\u4e2a\u5b50\u7ec4\u4ef6\u3002\n3. \u548c keep-alive \u642d\u914d\u4f7f\u7528\u7684\u4e00\u822c\u6709\uff1a`\u52a8\u6001\u7ec4\u4ef6`\u548c`router-view\n\n```js\nrender () {\n //\n function getFirstComponentChild (children: ?Array<VNode>): ?VNode {\n if (Array.isArray(children)) {\n for (let i = 0; i < children.length; i++) {\n const c = children[i]\n if (isDef(c) && (isDef(c.componentOptions) || isAsyncPlaceholder(c))) {\n return c\n }\n }\n }\n }\n const slot = this.$slots.default // \u83b7\u53d6\u9ed8\u8ba4\u63d2\u69fd\n const vnode: VNode = getFirstComponentChild(slot)// \u83b7\u53d6\u7b2c\u4e00\u4e2a\u5b50\u7ec4\u4ef6\n const componentOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions // \u7ec4\u4ef6\u53c2\u6570\n if (componentOptions) { // \u662f\u5426\u6709\u7ec4\u4ef6\u53c2\u6570\n // check pattern\n const name: ?string = getComponentName(componentOptions) // \u83b7\u53d6\u7ec4\u4ef6\u540d\n const { include, exclude } = this\n if (\n // not included\n (include && (!name || !matches(include, name))) ||\n // excluded\n (exclude && name && matches(exclude, name))\n ) {\n // \u5982\u679c\u4e0d\u5339\u914d\u5f53\u524d\u7ec4\u4ef6\u7684\u540d\u5b57\u548cinclude\u4ee5\u53caexclude\n // \u90a3\u4e48\u76f4\u63a5\u8fd4\u56de\u7ec4\u4ef6\u7684\u5b9e\u4f8b\n return vnode\n }\n\n const { cache, keys } = this\n\n // \u83b7\u53d6\u8fd9\u4e2a\u7ec4\u4ef6\u7684key\n const key: ?string = vnode.key == null\n // same constructor may get registered as different local components\n // so cid alone is not enough (#3269)\n ? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')\n : vnode.key\n\n if (cache[key]) {\n // LRU\u7f13\u5b58\u7b56\u7565\u6267\u884c\n vnode.componentInstance = cache[key].componentInstance // \u7ec4\u4ef6\u521d\u6b21\u6e32\u67d3\u7684\u65f6\u5019componentInstance\u4e3aundefined\n\n // make current key freshest\n remove(keys, key)\n keys.push(key)\n // \u6839\u636eLRU\u7f13\u5b58\u7b56\u7565\u6267\u884c\uff0c\u5c06key\u4ece\u539f\u6765\u7684\u4f4d\u7f6e\u79fb\u9664\uff0c\u7136\u540e\u5c06\u8fd9\u4e2akey\u503c\u653e\u5230\u6700\u540e\u9762\n } else {\n // \u5728\u7f13\u5b58\u5217\u8868\u91cc\u9762\u6ca1\u6709\u7684\u8bdd\uff0c\u5219\u52a0\u5165\uff0c\u540c\u65f6\u5224\u65ad\u5f53\u524d\u52a0\u5165\u4e4b\u540e\uff0c\u662f\u5426\u8d85\u8fc7\u4e86max\u6240\u8bbe\u5b9a\u7684\u8303\u56f4\uff0c\u5982\u679c\u662f\uff0c\u5219\u53bb\u9664\n // \u4f7f\u7528\u65f6\u95f4\u95f4\u9694\u6700\u957f\u7684\u4e00\u4e2a\n cache[key] = vnode\n keys.push(key)\n // prune oldest entry\n if (this.max && keys.length > parseInt(this.max)) {\n pruneCacheEntry(cache, keys[0], keys, this._vnode)\n }\n }\n // \u5c06\u7ec4\u4ef6\u7684keepAlive\u5c5e\u6027\u8bbe\u7f6e\u4e3atrue\n vnode.data.keepAlive = true // \u4f5c\u7528\uff1a\u5224\u65ad\u662f\u5426\u8981\u6267\u884c\u7ec4\u4ef6\u7684created\u3001mounted\u751f\u547d\u5468\u671f\u51fd\u6570\n }\n return vnode || (slot && slot[0])\n}\n```\n\nkeep-alive`\u5177\u4f53\u662f\u901a\u8fc7`cache`\u6570\u7ec4\u7f13\u5b58\u6240\u6709\u7ec4\u4ef6\u7684`vnode`\u5b9e\u4f8b\u3002\u5f53`cache`\u5185\u539f\u6709\u7ec4\u4ef6\u88ab\u4f7f\u7528\u65f6\u4f1a\u5c06\u8be5\u7ec4\u4ef6`key`\u4ece`keys`\u6570\u7ec4\u4e2d\u5220\u9664\uff0c\u7136\u540e`push`\u5230`keys`\u6570\u7ec4\u6700\u540e\uff0c\u4ee5\u4fbf\u6e05\u9664\u6700\u4e0d\u5e38\u7528\u7ec4\u4ef6\u3002\n\n#### \u6b65\u9aa4\u603b\u7ed3\n\n1. \u83b7\u53d6 keep-alive \u4e0b\u7b2c\u4e00\u4e2a\u5b50\u7ec4\u4ef6\u7684\u5b9e\u4f8b\u5bf9\u8c61\uff0c\u901a\u8fc7\u4ed6\u53bb\u83b7\u53d6\u8fd9\u4e2a\u7ec4\u4ef6\u7684\u7ec4\u4ef6\u540d\n2. \u901a\u8fc7\u5f53\u524d\u7ec4\u4ef6\u540d\u53bb\u5339\u914d\u539f\u6765 include \u548c exclude\uff0c\u5224\u65ad\u5f53\u524d\u7ec4\u4ef6\u662f\u5426\u9700\u8981\u7f13\u5b58\uff0c\u4e0d\u9700\u8981\u7f13\u5b58\uff0c\u76f4\u63a5\u8fd4\u56de\u5f53\u524d\u7ec4\u4ef6\u7684\u5b9e\u4f8b vNode\n3. \u9700\u8981\u7f13\u5b58\uff0c\u5224\u65ad\u4ed6\u5f53\u524d\u662f\u5426\u5728\u7f13\u5b58\u6570\u7ec4\u91cc\u9762\uff0c\u5b58\u5728\uff0c\u5219\u5c06\u4ed6\u539f\u6765\u4f4d\u7f6e\u4e0a\u7684 key \u7ed9\u79fb\u9664\uff0c\u540c\u65f6\u5c06\u8fd9\u4e2a\u7ec4\u4ef6\u7684 key \u653e\u5230\u6570\u7ec4\u6700\u540e\u9762\uff08LRU\uff09\n4. \u4e0d\u5b58\u5728\uff0c\u5c06\u7ec4\u4ef6 key \u653e\u5165\u6570\u7ec4\uff0c\u7136\u540e\u5224\u65ad\u5f53\u524d key \u6570\u7ec4\u662f\u5426\u8d85\u8fc7 max \u6240\u8bbe\u7f6e\u7684\u8303\u56f4\uff0c\u8d85\u8fc7\uff0c\u90a3\u4e48\u524a\u51cf\u672a\u4f7f\u7528\u65f6\u95f4\u6700\u957f\u7684\u4e00\u4e2a\u7ec4\u4ef6\u7684 key \u503c\n5. \u6700\u540e\u5c06\u8fd9\u4e2a\u7ec4\u4ef6\u7684 keepAlive \u8bbe\u7f6e\u4e3a true\n\n### \u4e09\u3001keep-alive \u672c\u8eab\u7684\u521b\u5efa\u8fc7\u7a0b\u548c patch \u8fc7\u7a0b\n\n\u7f13\u5b58\u6e32\u67d3\u7684\u65f6\u5019\uff0c\u4f1a\u6839\u636e vnode.componentInstance\uff08\u9996\u6b21\u6e32\u67d3 vnode.componentInstance \u4e3a undefined\uff09 \u548c keepAlive \u5c5e\u6027\u5224\u65ad\u4e0d\u4f1a\u6267\u884c\u7ec4\u4ef6\u7684 created\u3001mounted \u7b49\u94a9\u5b50\u51fd\u6570\uff0c\u800c\u662f\u5bf9\u7f13\u5b58\u7684\u7ec4\u4ef6\u6267\u884c patch \u8fc7\u7a0b\uff1a**\u76f4\u63a5\u628a\u7f13\u5b58\u7684 DOM \u5bf9\u8c61\u76f4\u63a5\u63d2\u5165\u5230\u76ee\u6807\u5143\u7d20\u4e2d\uff0c\u5b8c\u6210\u4e86\u6570\u636e\u66f4\u65b0\u7684\u60c5\u51b5\u4e0b\u7684\u6e32\u67d3\u8fc7\u7a0b**\u3002\n\n#### \u9996\u6b21\u6e32\u67d3\n\n- \u7ec4\u4ef6\u7684\u9996\u6b21\u6e32\u67d3\uff1a\u5224\u65ad\u7ec4\u4ef6\u7684 abstract \u5c5e\u6027\uff0c\u624d\u5f80\u7236\u7ec4\u4ef6\u91cc\u9762\u6302\u8f7d DOM\n\n```js\n// core/instance/lifecycle\nfunction initLifecycle (vm: Component) {\n const options = vm.$options\n\n // locate first non-abstract parent\n let parent = options.parent\n if (parent && !options.abstract) { // \u5224\u65ad\u7ec4\u4ef6\u7684abstract\u5c5e\u6027\uff0c\u624d\u5f80\u7236\u7ec4\u4ef6\u91cc\u9762\u6302\u8f7dDOM\n while (parent.$options.abstract && parent.$parent) {\n parent = parent.$parent\n }\n parent.$children.push(vm)\n }\n\n vm.$parent = parent\n vm.$root = parent ? parent.$root : vm\n\n vm.$children = []\n vm.$refs = {}\n\n vm._watcher = null\n vm._inactive = null\n vm._directInactive = false\n vm._isMounted = false\n vm._isDestroyed = false\n vm._isBeingDestroyed = false\n}\n```\n\n- \u5224\u65ad\u5f53\u524d keepAlive \u548c componentInstance \u662f\u5426\u5b58\u5728\u6765\u5224\u65ad\u662f\u5426\u8981\u6267\u884c\u7ec4\u4ef6 prepatch \u8fd8\u662f\u6267\u884c\u521b\u5efa componentInstance\n\n```js\n// core/vdom/create-component\ninit (vnode: VNodeWithData, hydrating: boolean): ?boolean {\n if (\n vnode.componentInstance &&\n !vnode.componentInstance._isDestroyed &&\n vnode.data.keepAlive\n ) { // componentInstance\u5728\u521d\u6b21\u662fundefined!!!\n // kept-alive components, treat as a patch\n const mountedNode: any = vnode // work around flow\n componentVNodeHooks.prepatch(mountedNode, mountedNode) // prepatch\u51fd\u6570\u6267\u884c\u7684\u662f\u7ec4\u4ef6\u66f4\u65b0\u7684\u8fc7\u7a0b\n } else {\n const child = vnode.componentInstance = createComponentInstanceForVnode(\n vnode,\n activeInstance\n )\n child.$mount(hydrating ? vnode.elm : undefined, hydrating)\n }\n },\n```\n\nprepatch \u64cd\u4f5c\u5c31\u4e0d\u4f1a\u5728\u6267\u884c\u7ec4\u4ef6\u7684`mounted`\u548c`created`\u751f\u547d\u5468\u671f\u51fd\u6570\uff0c\u800c\u662f\u76f4\u63a5\u5c06 DOM \u63d2\u5165\n\n### \u56db\u3001LRU (least recently used)\u7f13\u5b58\u7b56\u7565\n\n**LRU \u7f13\u5b58\u7b56\u7565\uff1a** \u4ece\u5185\u5b58\u4e2d\u627e\u51fa\u6700\u4e45\u672a\u4f7f\u7528\u7684\u6570\u636e\u5e76\u7f6e\u6362\u65b0\u7684\u6570\u636e.\n\nLRU\uff08Least rencently used\uff09\u7b97\u6cd5\u6839\u636e\u6570\u636e\u7684\u5386\u53f2\u8bbf\u95ee\u8bb0\u5f55\u6765\u8fdb\u884c\u6dd8\u6c70\u6570\u636e\uff0c\u5176\u6838\u5fc3\u601d\u60f3\u662f\u201c\u5982\u679c\u6570\u636e\u6700\u8fd1\u88ab\u8bbf\u95ee\u8fc7\uff0c\u90a3\u4e48\u5c06\u6765\u88ab\u8bbf\u95ee\u7684\u51e0\u7387\u4e5f\u66f4\u9ad8\u201d\u3002\n\u6700\u5e38\u89c1\u7684\u5b9e\u73b0\u662f\u4f7f\u7528\u4e00\u4e2a\u94fe\u8868\u4fdd\u5b58\u7f13\u5b58\u6570\u636e\uff0c\u8be6\u7ec6\u7b97\u6cd5\u5b9e\u73b0\u5982\u4e0b\uff1a\n\n1. \u65b0\u6570\u636e\u63d2\u5165\u5230\u94fe\u8868\u5934\u90e8\n2. \u6bcf\u5f53\u7f13\u5b58\u547d\u4e2d\uff08\u5373\u7f13\u5b58\u6570\u636e\u88ab\u8bbf\u95ee\uff09\uff0c\u5219\u5c06\u6570\u636e\u79fb\u5230\u94fe\u8868\u5934\u90e8\n3. \u94fe\u8868\u6ee1\u7684\u65f6\u5019\uff0c\u5c06\u94fe\u8868\u5c3e\u90e8\u7684\u6570\u636e\u4e22\u5f03\u3002\n\n\n\n\n\n\n\n", "answer": "", "biz_type": 1, "qid": 71, "subject": "", "title": "\u8bf4\u4e00\u4e0b Vue \u7684 keep-alive \u662f\u5982\u4f55\u5b9e\u73b0\u7684\uff0c\u5177\u4f53\u7f13\u5b58\u7684\u662f\u4ec0\u4e48\uff1f"}, "tech_tag": ["Vue"], "uid": 0, "uname": ""}]
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。