1 line
17 KiB
JavaScript
1 line
17 KiB
JavaScript
"use strict";(self.webpackChunkjjbook=self.webpackChunkjjbook||[]).push([[6756],{3905:function(e,t,n){n.d(t,{Zo:function(){return c},kt:function(){return m}});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?l(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):l(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function u(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},l=Object.keys(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=r.createContext({}),o=function(e){var t=r.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},c=function(e){var t=o(e.components);return r.createElement(p.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},s=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,l=e.originalType,p=e.parentName,c=u(e,["components","mdxType","originalType","parentName"]),s=o(n),m=a,k=s["".concat(p,".").concat(m)]||s[m]||d[m]||l;return n?r.createElement(k,i(i({ref:t},c),{},{components:n})):r.createElement(k,i({ref:t},c))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var l=n.length,i=new Array(l);i[0]=s;var u={};for(var p in t)hasOwnProperty.call(t,p)&&(u[p]=t[p]);u.originalType=e,u.mdxType="string"==typeof e?e:a,i[1]=u;for(var o=2;o<l;o++)i[o]=n[o];return r.createElement.apply(null,i)}return r.createElement.apply(null,n)}s.displayName="MDXCreateElement"},8995:function(e,t,n){n.r(t),n.d(t,{frontMatter:function(){return u},contentTitle:function(){return p},metadata:function(){return o},toc:function(){return c},default:function(){return s}});var r=n(7462),a=n(3366),l=(n(7294),n(3905)),i=["components"],u={sidebar_label:"\u6846\u67b6\uff1aVue \u7684\u6570\u636e\u7ed1\u5b9a\u673a\u5236",sidebar_position:4},p="Vue \u7684\u6570\u636e\u7ed1\u5b9a\u673a\u5236",o={unversionedId:"book1/frame-vue-data-binding",id:"book1/frame-vue-data-binding",isDocsHomePage:!1,title:"Vue \u7684\u6570\u636e\u7ed1\u5b9a\u673a\u5236",description:"\u76f8\u5173\u95ee\u9898",source:"@site/docs/book1/frame-vue-data-binding.md",sourceDirName:"book1",slug:"/book1/frame-vue-data-binding",permalink:"/awesome-interview/book1/frame-vue-data-binding",tags:[],version:"current",sidebarPosition:4,frontMatter:{sidebar_label:"\u6846\u67b6\uff1aVue \u7684\u6570\u636e\u7ed1\u5b9a\u673a\u5236",sidebar_position:4},sidebar:"tutorialSidebar",previous:{title:"\u5de5\u7a0b\u5316\uff1aWebpack \u5de5\u4f5c\u6d41\u7a0b",permalink:"/awesome-interview/book1/engineer-webpack-workflow"},next:{title:"\u6846\u67b6\uff1aVue \u7684 computed \u548c watch \u7684\u533a\u522b",permalink:"/awesome-interview/book1/frame-vue-computed-watch"}},c=[{value:"\u76f8\u5173\u95ee\u9898",id:"\u76f8\u5173\u95ee\u9898",children:[]},{value:"\u56de\u7b54\u5173\u952e\u70b9",id:"\u56de\u7b54\u5173\u952e\u70b9",children:[]},{value:"\u77e5\u8bc6\u70b9\u6df1\u5165",id:"\u77e5\u8bc6\u70b9\u6df1\u5165",children:[{value:"1. \u524d\u7f6e\u6982\u5ff5",id:"1-\u524d\u7f6e\u6982\u5ff5",children:[]},{value:"2. \u5b9e\u73b0\u539f\u7406",id:"2-\u5b9e\u73b0\u539f\u7406",children:[]},{value:"3. \u65e0\u6cd5\u76d1\u542c\u5230\u7684\u53d8\u5316",id:"3-\u65e0\u6cd5\u76d1\u542c\u5230\u7684\u53d8\u5316",children:[]},{value:"4. Vue2 \u4e0e Vue3 \u7684\u5dee\u5f02",id:"4-vue2-\u4e0e-vue3-\u7684\u5dee\u5f02",children:[]}]},{value:"\u53c2\u8003\u8d44\u6599",id:"\u53c2\u8003\u8d44\u6599",children:[]}],d={toc:c};function s(e){var t=e.components,n=(0,a.Z)(e,i);return(0,l.kt)("wrapper",(0,r.Z)({},d,n,{components:t,mdxType:"MDXLayout"}),(0,l.kt)("h1",{id:"vue-\u7684\u6570\u636e\u7ed1\u5b9a\u673a\u5236"},"Vue \u7684\u6570\u636e\u7ed1\u5b9a\u673a\u5236"),(0,l.kt)("h2",{id:"\u76f8\u5173\u95ee\u9898"},"\u76f8\u5173\u95ee\u9898"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Vue \u662f\u5982\u4f55\u5b9e\u73b0\u6570\u636e\u52ab\u6301\u7684"),(0,l.kt)("li",{parentName:"ul"},"Vue \u662f\u5982\u4f55\u5b9e\u73b0\u53cc\u5411\u7ed1\u5b9a\u7684"),(0,l.kt)("li",{parentName:"ul"},"MVVM \u662f\u4ec0\u4e48")),(0,l.kt)("h2",{id:"\u56de\u7b54\u5173\u952e\u70b9"},"\u56de\u7b54\u5173\u952e\u70b9"),(0,l.kt)("p",null,(0,l.kt)("inlineCode",{parentName:"p"},"\u54cd\u5e94\u5f0f\u5bf9\u8c61")," ",(0,l.kt)("inlineCode",{parentName:"p"},"\u6570\u636e\u52ab\u6301")," ",(0,l.kt)("inlineCode",{parentName:"p"},"\u53cc\u5411\u7ed1\u5b9a")," ",(0,l.kt)("inlineCode",{parentName:"p"},"MVVM\uff08Model-View-ViewModel\uff09")," ",(0,l.kt)("inlineCode",{parentName:"p"},"\u53d1\u5e03/\u8ba2\u9605\u6a21\u5f0f\uff08publish-subscribe pattern\uff09")),(0,l.kt)("p",null,(0,l.kt)("strong",{parentName:"p"},"\u54cd\u5e94\u5f0f\u5bf9\u8c61")),(0,l.kt)("p",null,"Vue2 \u901a\u8fc7 ",(0,l.kt)("inlineCode",{parentName:"p"},"Object.defineProperty"),"\uff0cVue3 \u901a\u8fc7 Proxy \u6765\u52ab\u6301 state \u4e2d\u5404\u4e2a\u5c5e\u6027\u7684 setter\u3001getter\uff0c\u901a\u8fc7 getter \u6536\u96c6\u4f9d\u8d56\u3002\u5f53 state \u4e2d\u7684\u6570\u636e\u53d1\u751f\u53d8\u52a8\u4e4b\u540e\u53d1\u5e03\u901a\u77e5\u7ed9\u8ba2\u9605\u8005\u66f4\u65b0\u6570\u636e\u3002"),(0,l.kt)("p",null,(0,l.kt)("strong",{parentName:"p"},"\u53cc\u5411\u7ed1\u5b9a")),(0,l.kt)("p",null,"Vue \u901a\u8fc7 ",(0,l.kt)("inlineCode",{parentName:"p"},"v-model")," \u5b9e\u73b0\u53cc\u5411\u7ed1\u5b9a\u3002",(0,l.kt)("inlineCode",{parentName:"p"},"v-model")," \u5b9e\u9645\u662f ",(0,l.kt)("inlineCode",{parentName:"p"},"v-bind:xxx")," \u548c ",(0,l.kt)("inlineCode",{parentName:"p"},"v-on:xxx")," \u7684\u8bed\u6cd5\u7cd6\u3002\u5f53\u89e6\u53d1\u5143\u7d20\u5bf9\u5e94\u7684\u4e8b\u4ef6\uff08\u5982 input\u3001change \u7b49\uff09\u65f6\u66f4\u65b0\u6570\u636e\uff08ViewModel\uff09\uff0c\u5f53\u6570\u636e\uff08ViewModel\uff09\u66f4\u65b0\u65f6\u540c\u6b65\u66f4\u65b0\u5230\u5143\u7d20\u7684\u5bf9\u5e94\u5c5e\u6027\uff08View\uff09\u4e0a\u3002"),(0,l.kt)("p",null,(0,l.kt)("strong",{parentName:"p"},"MVVM\uff08Model-View-ViewModel\uff09")),(0,l.kt)("p",null,"MVVM \u6a21\u5f0f\u662f\u4e00\u79cd\u8f6f\u4ef6\u67b6\u6784\u6a21\u5f0f\uff0c\u76f8\u6bd4 MVC \u6a21\u5f0f\u591a\u4e86\u4e00\u4e2a ViewModel \u5c42\u3002\u6709\u52a9\u4e8e\u5c06\u56fe\u5f62\u7528\u6237\u754c\u9762\u7684\u5f00\u53d1\u4e0e\u4e1a\u52a1\u903b\u8f91\u6216\u540e\u7aef\u903b\u8f91\uff08\u6570\u636e\u6a21\u578b\uff09\u7684\u5f00\u53d1\u5206\u79bb\u5f00\u6765\u3002"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Model\uff1a\u6a21\u578b\u5c42\uff0c\u8d1f\u8d23\u5904\u7406\u4e1a\u52a1\u903b\u8f91\u4ee5\u53ca\u548c\u670d\u52a1\u5668\u7aef\u8fdb\u884c\u4ea4\u4e92\u3002"),(0,l.kt)("li",{parentName:"ul"},"View\uff1a\u89c6\u56fe\u5c42\uff0c\u5c06\u6570\u636e\u901a\u8fc7 UI \u5c55\u73b0\u51fa\u6765\u3002"),(0,l.kt)("li",{parentName:"ul"},"ViewModel\uff1a\u89c6\u56fe\u6a21\u578b\u5c42\uff0c\u8fde\u63a5 Model \u5c42\u548c View \u5c42\u3002")),(0,l.kt)("h2",{id:"\u77e5\u8bc6\u70b9\u6df1\u5165"},"\u77e5\u8bc6\u70b9\u6df1\u5165"),(0,l.kt)("h3",{id:"1-\u524d\u7f6e\u6982\u5ff5"},"1. \u524d\u7f6e\u6982\u5ff5"),(0,l.kt)("p",null,"\u5728\u8be6\u7ec6\u8bf4\u660e\u539f\u7406\u4e4b\u524d\uff0c\u9700\u8981\u5bf9\u4ee5\u4e0b\u6982\u5ff5\u6709\u4e00\u5b9a\u7684\u8ba4\u77e5\uff1a"),(0,l.kt)("ol",null,(0,l.kt)("li",{parentName:"ol"},"Dep\uff1a\u5b9e\u73b0\u53d1\u5e03\u8ba2\u9605\u6a21\u5f0f\u7684\u6a21\u5757\u3002"),(0,l.kt)("li",{parentName:"ol"},"Watcher\uff1a\u8ba2\u9605\u66f4\u65b0\u548c\u89e6\u53d1\u89c6\u56fe\u66f4\u65b0\u7684\u6a21\u5757\u3002")),(0,l.kt)("h3",{id:"2-\u5b9e\u73b0\u539f\u7406"},"2. \u5b9e\u73b0\u539f\u7406"),(0,l.kt)("p",null,(0,l.kt)("img",{parentName:"p",src:"https://user-images.githubusercontent.com/3984824/132991936-828bba61-2c87-4ee2-acf0-ffef294760fb.png",alt:"image"})),(0,l.kt)("p",null,"\u4e0a\u56fe\u662f Vue \u5b98\u7f51\u63cf\u8ff0 Vue \u5185\u6570\u636e\u53d8\u5316\u4e0e\u53d1\u5e03\u66f4\u65b0\u7684\u6d41\u7a0b\uff0c\u6211\u4eec\u4ee5\u54cd\u5e94\u5f0f\u5bf9\u8c61\u3001\u4f9d\u8d56\u6536\u96c6\u3001\u6570\u636e\u66f4\u65b0\u7684\u987a\u5e8f\u8be6\u7ec6\u8bf4\u660e\u6574\u4e2a\u8fc7\u7a0b\u3002"),(0,l.kt)("h4",{id:"21-\u54cd\u5e94\u5f0f\u5bf9\u8c61"},"2.1 \u54cd\u5e94\u5f0f\u5bf9\u8c61"),(0,l.kt)("p",null,"Vue2 \u901a\u8fc7 ",(0,l.kt)("inlineCode",{parentName:"p"},"Object.defineProperty"),"\uff0cVue3 \u901a\u8fc7 Proxy \u6765\u52ab\u6301 state \u4e2d\u5404\u4e2a\u5c5e\u6027\u7684 getter\u3001setter\u3002\u5176\u4e2d getter \u4e2d\u4e3b\u8981\u662f\u901a\u8fc7 Dep \u6536\u96c6\u4f9d\u8d56\u8fd9\u4e2a\u5c5e\u6027\u7684\u8ba2\u9605\u8005\uff0csetter \u4e2d\u5219\u662f\u5728\u5c5e\u6027\u53d8\u5316\u540e\u901a\u77e5 Dep \u6536\u96c6\u5230\u7684\u8ba2\u9605\u8005\uff0c\u6d3e\u53d1\u66f4\u65b0\u3002"),(0,l.kt)("p",null,"\u4ee5\u4e0b\u662f Dep \u7684\u4f2a\u4ee3\u7801\uff1a"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-typescript"},"export default class Dep {\n static target?: Watcher;\n subs: Array<Watcher>;\n\n constructor () {\n this.subs = []\n }\n\n /**\n * \u6dfb\u52a0\u8ba2\u9605\u8005\uff08watcher\uff09\n **/\n addSub (sub: Watcher) {\n this.subs.push(sub)\n }\n\n /**\n * \u79fb\u9664\u8ba2\u9605\u8005\uff08watcher\uff09\n **/\n removeSub (sub: Watcher) {\n remove(this.subs, sub)\n }\n\n /**\n * \u6dfb\u52a0\u8ba2\u9605\uff08\u8c03\u7528\u8ba2\u9605\u8005\u4e0a\u7684 addDep \u65b9\u6cd5\uff09\n **/\n depend () {\n if (Dep.target) {\n Dep.target.addDep(this)\n }\n }\n\n /**\n * \u904d\u5386\u901a\u77e5\u8ba2\u9605\u8005\u66f4\u65b0\n **/\n notify () {\n const subs = this.subs.slice()\n for (let i = 0, l = subs.length; i < l; i++) {\n subs[i].update()\n }\n }\n}\n\nDep.target = null\n")),(0,l.kt)("p",null,"\u4ee5\u4e0b\u662f\u751f\u6210\u54cd\u5e94\u5f0f\u5bf9\u8c61\u7684\u4f2a\u4ee3\u7801\uff1a"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-typescript"},"/**\n * \u751f\u6210\u54cd\u5e94\u5f0f\u5bf9\u8c61\n * \u4e3a\u4e86\u65b9\u4fbf\u7406\u89e3\uff0c\u4ee5\u4e0b\u4ee3\u7801\u7565\u6709\u4fee\u6539\uff0c\u7701\u7565\u4e86\u90e8\u5206\u4e0d\u76f8\u5173\u5185\u5bb9\n */\nexport function defineReactive (\n obj: Object,\n key: string,\n val: any,\n) {\n const dep = new Dep()\n Object.defineProperty(obj, key, {\n enumerable: true,\n configurable: true,\n get: function reactiveGetter () {\n // \u6bcf\u6b21 get \u65f6\u5982\u679c\u6709\u8ba2\u9605\u8005\u5219\u6dfb\u52a0\u8ba2\u9605\n if (Dep.target) {\n dep.depend()\n }\n return val\n },\n set: function reactiveSetter (newVal) {\n val = newVal\n // \u6bcf\u6b21\u66f4\u65b0\u6570\u636e\u4e4b\u540e\u5e7f\u64ad\u66f4\u65b0\n dep.notify()\n }\n })\n}\n")),(0,l.kt)("h4",{id:"22-\u4f9d\u8d56\u6536\u96c6"},"2.2 \u4f9d\u8d56\u6536\u96c6"),(0,l.kt)("p",null,"Vue \u4f1a\u5728\u9700\u8981\u4f7f\u7528\u5230\u5c5e\u6027\u7684\u5730\u65b9\u65b0\u5efa\u4e00\u4e2a Watcher \u7684\u5b9e\u4f8b watcher\uff0cwatcher \u5b9e\u4f8b\u5316\u65f6\u4f1a\u8bfb\u53d6\u5bf9\u5e94\u5c5e\u6027\u7684\u5185\u5bb9\uff0c\u4ece\u800c\u89e6\u53d1 1.1 \u4e2d\u7684 getter\uff0c\u5c06 watcher \u6ce8\u518c\u8fdb Dep \u4e2d\u3002"),(0,l.kt)("p",null,"\u4ee5\u4e0b\u662f Watcher \u7684\u4f2a\u4ee3\u7801\uff1a"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-typescript"},"/**\n * \u4e3a\u4e86\u65b9\u4fbf\u7406\u89e3\uff0c\u4ee5\u4e0b\u4ee3\u7801\u7565\u6709\u4fee\u6539\uff0c\u7701\u7565\u4e86\u90e8\u5206\u4e0d\u76f8\u5173\u5185\u5bb9\n */\nexport default class Watcher {\n vm: Component;\n getter: Function;\n value: any;\n cb: Function;\n\n constructor (\n vm: Component,\n exp: string\n ) {\n this.vm = vm\n this.cb = cb\n // \u83b7\u53d6\u8868\u8fbe\u5f0f\u5bf9\u5e94\u7684\u5c5e\u6027\u7684 getter\n this.getter = parsePath(exp)\n this.value = this.get()\n }\n\n /**\n * \u83b7\u53d6\u6700\u65b0\u7684\u503c\n **/\n get () {\n // \u5c06 Dep \u7684\u5f53\u524d\u8ba2\u9605\u8005\u6307\u5411\u5f53\u524d watcher\n Dep.target = this\n let value\n const vm = this.vm\n // \u83b7\u53d6\u5bf9\u5e94\u5c5e\u6027\u503c\n value = this.getter.call(vm, vm)\n // \u6e05\u7a7a Dep \u5f53\u524d\u8ba2\u9605\u8005\n Dep.target = null\n return value\n }\n\n /**\n * \u8ba2\u9605\n **/\n addDep (dep: Dep) {\n // \u5c06\u5f53\u524d watcher \u6dfb\u52a0\u5230 Dep \u7684\u8ba2\u9605\u8005\u5217\u8868\u4e2d\n dep.addSub(this)\n }\n\n /**\n * \u66f4\u65b0\u89c6\u56fe\n **/\n update () {\n const value = this.get()\n const oldValue = this.value\n // \u8c03\u7528 callback \u66f4\u65b0\u89c6\u56fe\n this.cb.call(this.vm, value, oldValue)\n }\n}\n")),(0,l.kt)("h4",{id:"23-\u6570\u636e\u66f4\u65b0"},"2.3 \u6570\u636e\u66f4\u65b0"),(0,l.kt)("p",null,"state \u5c5e\u6027\u66f4\u65b0\u65f6\u4f1a\u89e6\u53d1\u5c5e\u6027\u7684 setter\uff0csetter \u4e2d\u4f1a\u89e6\u53d1 Dep \u7684\u66f4\u65b0\uff0cDep \u901a\u77e5 1.2 \u4e2d\u6536\u96c6\u5230\u7684 watcher \u66f4\u65b0\uff0cwatcher \u83b7\u53d6\u5230\u66f4\u65b0\u7684\u6570\u636e\u4e4b\u540e\u89e6\u53d1\u66f4\u65b0\u89c6\u56fe\u3002"),(0,l.kt)("h3",{id:"3-\u65e0\u6cd5\u76d1\u542c\u5230\u7684\u53d8\u5316"},"3. \u65e0\u6cd5\u76d1\u542c\u5230\u7684\u53d8\u5316"),(0,l.kt)("p",null,"\u7531\u4e8e\u53d7\u5230 JavaScript \u8bbe\u8ba1\u7684\u9650\u5236\uff0cVue2 \u4f7f\u7528\u7684 ",(0,l.kt)("inlineCode",{parentName:"p"},"Object.defineProperty")," \u5e76\u4e0d\u80fd\u5b8c\u5168\u52ab\u6301\u6240\u6709\u6570\u636e\u7684\u53d8\u5316\uff0c\u4ee5\u4e0b\u662f\u51e0\u79cd\u65e0\u6cd5\u6b63\u5e38\u52ab\u6301\u7684\u53d8\u5316\uff1a"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"\u65e0\u6cd5\u52ab\u6301\u65b0\u521b\u5efa\u7684\u5c5e\u6027\uff0c\u4e3a\u4e86\u89e3\u51b3\u8fd9\u4e2a\u95ee\u9898\uff0cVue \u63d0\u4f9b\u4e86 ",(0,l.kt)("inlineCode",{parentName:"li"},"Vue.set")," \u4ee5\u521b\u5efa\u65b0\u5c5e\u6027\u3002"),(0,l.kt)("li",{parentName:"ul"},"\u65e0\u6cd5\u52ab\u6301\u6570\u7ec4\u7684\u53d8\u5316\uff0c\u4e3a\u4e86\u89e3\u51b3\u8fd9\u4e2a\u95ee\u9898\uff0cVue \u5bf9\u6570\u7ec4\u539f\u751f\u65b9\u6cd5\u8fdb\u884c\u4e86\u52ab\u6301\u3002"),(0,l.kt)("li",{parentName:"ul"},"\u65e0\u6cd5\u52ab\u6301\u5229\u7528\u7d22\u5f15\u4fee\u6539\u6570\u7ec4\u5143\u7d20\uff0c\u8fd9\u4e2a\u95ee\u9898\u540c\u6837\u53ef\u4ee5\u7528 ",(0,l.kt)("inlineCode",{parentName:"li"},"Vue.set")," \u89e3\u51b3\u3002")),(0,l.kt)("h3",{id:"4-vue2-\u4e0e-vue3-\u7684\u5dee\u5f02"},"4. Vue2 \u4e0e Vue3 \u7684\u5dee\u5f02"),(0,l.kt)("p",null,"Vue2 \u4e0e Vue3 \u6570\u636e\u7ed1\u5b9a\u673a\u5236\u7684\u4e3b\u8981\u5dee\u5f02\u662f\u52ab\u6301\u65b9\u5f0f\u3002Vue2 \u4f7f\u7528\u7684\u662f ",(0,l.kt)("inlineCode",{parentName:"p"},"Object.defineProperty")," \u800c Vue3 \u4f7f\u7528\u7684\u662f ",(0,l.kt)("inlineCode",{parentName:"p"},"Proxy"),"\u3002",(0,l.kt)("inlineCode",{parentName:"p"},"Proxy")," \u53ef\u4ee5\u521b\u5efa\u4e00\u4e2a\u5bf9\u8c61\u7684\u4ee3\u7406\uff0c\u4ece\u800c\u5b9e\u73b0\u5bf9\u8fd9\u4e2a\u5bf9\u8c61\u57fa\u672c\u64cd\u4f5c\u7684\u62e6\u622a\u548c\u81ea\u5b9a\u4e49\u3002"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:null},"\u7279\u6027"),(0,l.kt)("th",{parentName:"tr",align:null},"defineProperty"),(0,l.kt)("th",{parentName:"tr",align:null},"Proxy"))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},"\u52ab\u6301\u65b0\u521b\u5efa\u5c5e\u6027"),(0,l.kt)("td",{parentName:"tr",align:null},"\u5426"),(0,l.kt)("td",{parentName:"tr",align:null},"\u662f")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},"\u52ab\u6301\u6570\u7ec4\u53d8\u5316"),(0,l.kt)("td",{parentName:"tr",align:null},"\u5426"),(0,l.kt)("td",{parentName:"tr",align:null},"\u662f")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},"\u52ab\u6301\u7d22\u5f15\u4fee\u6539\u6570\u7ec4\u5143\u7d20"),(0,l.kt)("td",{parentName:"tr",align:null},"\u5426"),(0,l.kt)("td",{parentName:"tr",align:null},"\u662f")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},"\u517c\u5bb9\u6027"),(0,l.kt)("td",{parentName:"tr",align:null},"IE8\u53ca\u4ee5\u4e0a"),(0,l.kt)("td",{parentName:"tr",align:null},"\u4e0d\u652f\u6301IE")))),(0,l.kt)("h2",{id:"\u53c2\u8003\u8d44\u6599"},"\u53c2\u8003\u8d44\u6599"),(0,l.kt)("ol",null,(0,l.kt)("li",{parentName:"ol"},(0,l.kt)("a",{parentName:"li",href:"https://vuejs.org/"},"Vuejs \u5b98\u7f51")),(0,l.kt)("li",{parentName:"ol"},(0,l.kt)("a",{parentName:"li",href:"https://github.com/vuejs/vue"},"Vuejs \u6e90\u7801"))))}s.isMDXComponent=!0}}]); |