{"id":102,"date":"2021-01-18T20:27:39","date_gmt":"2021-01-18T12:27:39","guid":{"rendered":"http:\/\/gjweb.top\/?p=102"},"modified":"2021-01-18T20:27:41","modified_gmt":"2021-01-18T12:27:41","slug":"vue%e7%9a%84%e6%95%b0%e6%8d%ae%e5%93%8d%e5%ba%94%e5%bc%8f%e5%8e%9f%e7%90%86","status":"publish","type":"post","link":"https:\/\/gjweb.top\/?p=102","title":{"rendered":"vue\u7684\u6570\u636e\u54cd\u5e94\u5f0f\u539f\u7406"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Vue\u6570\u636e\u54cd\u5e94\u5f0f<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>const  myData = {\n    n : 0\n}\nconsole.log(myData) \/\/ {n:10}\nconst vm = new Vue({\n    data: myData,\n    template:`\n        &lt;div&gt;{{n}}&lt;\/div&gt;\n    `\n}).$mount('#app')\nsetTimeout(()=&gt;{\n    myData.n += 10;\n    console.log(myData) \/\/ {n:(...)}\n    console.log(vm)\n},3000)<\/code><\/pre>\n\n\n\n<p>{n:10}\u548c{n:(\u2026)}\u53d1\u751f\u4e86\u4ec0\u4e48?<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u4e86\u89e3Es6\u7684 getter \u548c setter<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>let obj = {\n    \u59d3:\"\u5c0f\",\n    \u540d:\"\u660e\",\n    \u59d3\u540d(){\n        return this.\u59d3 + this.\u540d\n    },\n    age:18    \n}\nconsole.log(\"\u9700\u6c42\u4e00\"+obj1.\u59d3\u540d());\n\/\/ \u59d3\u540d\u540e\u9762\u7684\u62ec\u53f7\u80fd\u5220\u6389\u5417? \u4e0d\u80fd\u56e0\u4e3a\u4ed6\u662f\u51fd\u6570\n\/\/ \u600e\u4e48\u53bb\u6389\u62ec\u53f7\n\nlet obj2 = {\n    \u59d3:\"\u5c0f\",\n    \u540d:\"\u660e\",\n    get \u59d3\u540d(){\n        return this.\u59d3 + this.\u540d\n    },\n    age:18    \n}\nconsole.log(\"\u9700\u6c42\u4e8c\" + obj2.\u59d3\u540d)\n\n\/\/ \u603b\u7ed3: gtter \u5c31\u662f\u4e0d\u52a0\u62ec\u53f7\u7684\u51fd\u6570,\u4ec5\u6b64\u800c\u5df2\n\n\/\/ \u9700\u6c42\u4e09: \u59d3\u540d\u53ef\u4ee5\u88ab\u5199\nlet obj3 = {\n    \u59d3:\"\u5c0f\",\n    \u540d:\"\u660e\",\n    get \u59d3\u540d(){\n        return this.\u59d3 + this.\u540d\n    },\n    set \u59d3\u540d(xxx){\n        this.\u59d3 = xxx&#91;0],\n        this.\u540d = xxx.substring(1)\n    }\n    age:18    \n}\nobj3.\u59d3\u540d = \"\u9ad8\u5a9b\u5a9b\"\nconsole.log(`\u9700\u6c42\u4e09: \u59d3${obj3.\u59d3},\u540d${obj3.\u540d}`)\nconsole.log(obj3)\n\/\/ \u603b\u7ed3: setter \u5c31\u662f\u8fd9\u6837\u7528\u7684,\u7528 .xxx \u89e6\u53d1 get \u51fd\u6570\n\/\/ \u786e\u5b9e\u53ef\u4ee5\u5bf9\u59d3\u540d\u8fdb\u884c\u8bfb\u548c\u5199,\u4f46\u662f\u5e76\u4e0d\u5b58\u5728\u59d3\u540d\u8fd9\u4e2a\u5c5e\u6027,\u83b7\u53d6\u548c\u4fee\u6539\u662f\u901a\u8fc7get\u548cset\u5b8c\u6210\u7684<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Object.defineProperty()\u7684\u7528\u6cd5<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>\/*\u5411obj3\u6dfb\u52a0\u865a\u62df\u5c5e\u6027*\/\nlet obj3 = {\n    \u59d3:\"\u5c0f\",\n    \u540d:\"\u660e\",\n    get \u59d3\u540d(){\n        return this.\u59d3 + this.\u540d\n    },\n    set \u59d3\u540d(xxx){\n        this.\u59d3 = xxx&#91;0],\n        this.\u540d = xxx.substring(1)\n    }\n    age:18    \n}\nlet _xxx = 0;\nObject.defineProperty(obj3,\"xxx\",{\n    get(){\n        return  _xxx\n    },\n    set(value){\n        _xxx = value\n    } \n})<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u4ee3\u7406\u548c\u76d1\u542c<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u9700\u6c42\u4e00<\/h3>\n\n\n\n<p>\u7528 Object.defineProperty \u5b9a\u4e49 n<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let data1 = {}\nObject.definProperty(data1,'n',{\n    value:0\n})\nconsole.log(`\u9700\u6c42\u4e00:${data1.n}`) \/\/ 0<\/code><\/pre>\n\n\n\n<p>\u4e0a\u9762\u7684\u4ee3\u7801,\u4e0d\u662f\u628a\u7b80\u5355\u95ee\u9898\u590d\u6742\u5316\u4e86\u5417?<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\u9700\u6c42\u4e8c<\/h3>\n\n\n\n<p>n \u4e0d\u80fd\u5c0f\u4e8e 0;\u5373 data2.n = -1 \u5e94\u8be5\u65e0\u6548,\u4f46 data2.n = 1 \u6709\u6548<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let data2 = {};\ndata2._n = 0; \/\/ \u53c8\u6765\u5077\u5077\u7684\u5b58\u50a8n\u7684\u503c,\u9ed8\u8ba4\u662f\u4e00\u4e2a0;\nObject.defineProperty(data2,'n',{\n    get(){\n        return this._n \/\/ \u8fd9\u91cc\u7684this\u5c31\u662fdata2,\u5f53\u524d\u7684\u5bf9\u8c61\n    },\n    set(value){\n        if(value&lt;0) return;\n        this._n = value\n    }\n})\nconsole.log(`\u9700\u6c42\u4e8c: ${data2.n}`)\ndata2.n = -1;\nconsole.log(`\u9700\u6c42\u4e8c:${data2.n} \u8bbe\u7f6e\u4e3a -1 \u5931\u8d25`)\ndata2.n = 1;\nconsole.log(`\u9700\u6c42\u4e8c: ${data2.n} \u8bbe\u7f6e\u4e3a 1 \u6210\u529f`)<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>\u7f3a\u70b9<\/li><li>\u5982\u679c\u76f4\u63a5\u4f7f\u7528data2._n,\u662f\u9632\u4e0d\u4f4f\u7684<\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\u9700\u6c42\u4e09<\/h3>\n\n\n\n<p>\u200b \u4f7f\u7528\u4ee3\u7406<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let data3 = proxy({data:{n:0}});\nfunction proxy({data}){ \n    const obj  = {\n        \/\/ \u8fd9\u91cc\u7684 'n' \u5199\u6b7b\u4e86,\u7406\u8bba\u4e0a\u904d\u5386data\u6240\u6709key,\u8fd9\u91cc\u505a\u4e86\u7b80\u5316\n       Object.definProperty(obj,'n',{\n            get(){\n                return data.n\n            },\n            set(value){\n                if(value &lt; 0) return;\n                data.n = value\n            }\n       })\n       return obj \/\/ obj \u5c31\u662f\u4ee3\u7406\n    }    \n}\nconsole.log(`\u9700\u6c42\u4e09: ${data3.n}`)\ndata3.n = -1;\nconsole.log(`\u9700\u6c42\u4e09: ${data3.n} , \u8bbe\u7f6e\u4e3a -1 \u5931\u6548`)\ndata3.n = 1;\nconsole.log(`\u9700\u6c42\u4e09: ${data3.n} , \u8bbe\u7f6e\u4e3a 1 \u6210\u529f`)<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>\u7f3a\u70b9<\/li><li>\u5982\u679c\u62ec\u53f7\u91cc\u4e0d\u662f\u533f\u540d\u5bf9\u8c61,\u5c31\u65e0\u6cd5\u5224\u65ad<\/li><li><code>javascript let myData = {n:0} letdata4 = proxy({data: myData}) console.log(`\u7f3a\u70b9: ${data4.n}`) myData.n = -1; console.log(`\u7f3a\u70b9: ${data4.n}, \u8bbe\u7f6e\u4e3a -1 \u5931\u8d25\u5417 !?`)<\/code><\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\u9700\u6c42\u4e94<\/h3>\n\n\n\n<p>\u5c31\u7b97\u7528\u6237\u64c5\u81ea\u4fee\u6539myData,\u4e5f\u8981\u62e6\u622a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let  myData5 = {n:0};\nlet data^ = proxy2({data:myData5})\nfunction  proxy2(data){\n    let valye = data.n\n    Object.defineProperty(data,'n',{\n        get(){\n            return value\n        },\n        set(newValue){\n            if(newValue &lt; 0)return\n            value = newValue\n        }\n    })\n    \/\/ \u5c31\u52a0\u4e0a\u4e0a\u9762\u51e0\u53e5,\u8fd9\u51e0\u53e5\u4f1a\u76d1\u542cdata\n    const obj = {};\n    Object.definProperty(obj,'n',{\n        get(){\n            return data.n\n        },\n        set(value){\n            if(value &lt; 0) return\n            data.n = value\n        }\n    })\n}<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u603b\u7ed3<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Object.defineProperty<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>\u53ef\u4ee5\u7ed9\u5bf9\u8c61\u6dfb\u52a0\u5c5e\u6027value<\/li><li>\u53ef\u4ee5\u7ed9\u5bf9\u8c61\u6dfb\u52a0getter\u3001setter<\/li><li>getter\u3001setter \u7528\u4e8e\u5bf9\u5c5e\u6027\u7684\u8bfb\u5199\u8fdb\u884c\u76d1\u63a7<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\u5565\u662f\u4ee3\u7406\uff08\u8bbe\u8ba1\u6a21\u5f0f\uff09<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>\u5bf9myData\u5bf9\u8c61\u7684\u5c5e\u6027\u8bfb\u5199\uff0c\u5168\u6743\u7531\u53e6\u4e00\u4e2a\u5bf9\u8c61vm\u8d1f\u8d23<\/li><li>\u90a3\u4e48vm\u5c31\u662fmydata\u7684\u4ee3\u7406\uff08\u7c7b\u6bd4\u623f\u4e1c\u79df\u623f\uff09<\/li><li>\u6bd4\u5982myData.n\u4e0d\u7528,\u504f\u8981\u7528vm.n\u6765\u64cd\u4f5cmyData.n<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Vm = new Vue({data:myData})<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>\u4f1a\u8ba9vm\u7f16\u7a0bmyData \u7684\u4ee3\u7406(proxy)<\/li><li>\u4f1a\u8ba9myData\u7684\u6240\u6709\u5c5e\u6027\u8fdb\u884c\u76d1\u63a7<\/li><li>\u4e3a\u4ec0\u4e48\u8981\u76d1\u63a7,\u4e3a\u4e86\u9632\u6b62myData\u7684\u5c5e\u6027\u53d8\u4e86,vm\u4e0d\u77e5\u9053<\/li><li>vm\u77e5\u9053\u4e86\u53c8\u5982\u4f55? \u77e5\u9053\u5c5e\u6027\u53d8\u4e86\u5c31\u53ef\u4ee5\u8c03\u7528render(data)\u5440!<\/li><li>UI = render(data)<\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n","protected":false},"excerpt":{"rendered":"<p>Vue\u6570\u636e\u54cd\u5e94\u5f0f {n:10}\u548c{n:(\u2026)}\u53d1\u751f\u4e86\u4ec0\u4e48? \u4e86\u89e3Es6\u7684 getter \u548c setter Ob [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"class_list":["post-102","post","type-post","status-publish","format-standard","hentry","category-vue"],"_links":{"self":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/102","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=102"}],"version-history":[{"count":0,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/102\/revisions"}],"wp:attachment":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=102"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=102"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=102"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}