{"id":2018,"date":"2021-07-19T16:47:19","date_gmt":"2021-07-19T08:47:19","guid":{"rendered":"https:\/\/www.yusian.com\/blog\/?p=2018"},"modified":"2021-07-19T16:55:04","modified_gmt":"2021-07-19T08:55:04","slug":"mvvm%e6%a8%a1%e5%bc%8f%e4%b8%ad%e5%a6%82%e4%bd%95%e5%ae%9e%e7%8e%b0%e6%95%b0%e6%8d%ae%e7%9b%91%e5%90%ac","status":"publish","type":"post","link":"https:\/\/www.yusian.com\/blog\/javascript\/2021\/07\/19\/1647192018.html","title":{"rendered":"MVVM\u6a21\u5f0f\u4e2d\u5982\u4f55\u5b9e\u73b0\u6570\u636e\u76d1\u542c"},"content":{"rendered":"<h1>Object\u7684defineProperty\u65b9\u6cd5<\/h1>\n<ul>\n<li>\u5982\u4f55\u76d1\u542c\u4e00\u4e2a\u5bf9\u8c61\u7684\u67d0\u4e2a\u5c5e\u6027\u88ab\u8bbf\u95ee\u4e86\u5462\uff1fJavaScript\u63d0\u4f9b\u4e86\u76f8\u5173\u7684\u673a\u5236\u7ed9\u6211\u4eec\u6765\u5b9e\u73b0\uff0c\u90a3\u5c31\u662f\u8bbe\u7f6e\u5bf9\u8c61\u5c5e\u6027\u7684<code>setter<\/code>\u65b9\u6cd5\u53ca<code>getter<\/code>\u65b9\u6cd5\u3002<\/li>\n<\/ul>\n<pre><code class=\"language-javascript line-numbers\">let object = {\n    name: 'sian',\n    age: 18\n}\n\nObject.defineProperty(object, 'name', {\n    get: function() {\n        console.log('\u83b7\u53d6name\u7684\u503c')\n    },\n    set: function(value) {\n        console.log('\u8bbe\u7f6ename\u7684\u503c');\n    }\n})\n<\/code><\/pre>\n<ul>\n<li>\u73b0\u5728\u95ee\u9898\u6765\u4e86\uff0c\u6211\u8be5\u5982\u4f55\u8fd4\u56de\u8fd9\u4e2a\u5c5e\u6027\u7684\u503c\uff1f\u8d4b\u503c\u7684\u65f6\u5019\u6211\u53c8\u8be5\u5982\u4f55\u4fdd\u5b58\u8be5\u5c5e\u6027\u7684\u503c\u5462\uff1f<\/li>\n<\/ul>\n<pre><code class=\"language-javascript line-numbers\">let object = {\n    name: 'sian',\n    age: 18\n}\nlet name;\nObject.defineProperty(object, 'name', {\n    get: function() {\n        console.log('\u83b7\u53d6name\u7684\u503c')\n        return name;\n    },\n    set: function(value) {\n        console.log('\u8bbe\u7f6ename\u7684\u503c');\n        name = value;\n    }\n})\n<\/code><\/pre>\n<p>\u95ee\u9898\u89e3\u51b3\uff01\u5728\u5916\u90e8\u589e\u52a0\u4e00\u4e2a\u53d8\u91cf\u6765\u4fdd\u5b58\u4e0d\u5c31\u53ef\u4ee5\u4e86\u5417\uff1f\u53ef\u8fd9\u6837\u662f\u4e0d\u662f\u5f88\u96be\u770b\uff0c\u5e76\u4e14\u591a\u4e2a\u5c5e\u6027\u6211\u90fd\u5f97\u5728\u5916\u9762\u5b9a\u4e49\u4e00\u4e2a\u53d8\u91cf\u6765\u4fdd\u5b58\uff0c\u8fd9\u5bf9\u5e94\u5173\u7cfb\u5c31\u4f1a\u53d8\u5f97\u975e\u5e38\u6df7\u4e71\uff0c\u7ef4\u62a4\u4e5f\u662f\u4e2a\u95ee\u9898\u3002<\/p>\n<h1>defineReactive<\/h1>\n<pre><code class=\"language-javascript line-numbers\">function defineReactive(data, key, value) {\n    Object.defineProperty(data, key, {\n        get: function() {\n            console.log(`\u83b7\u53d6${key}\u7684\u503c\uff1a`, value);\n            return value;\n        },\n        set: function(newValue) {\n            value = newValue;\n            console.log(`\u8bbe\u7f6e${key}\u7684\u503c\u4e3a\uff1a`, newValue);\n        }\n    })\n}\n\n\/\/ \u6d4b\u8bd5\u4e00\u4e0b\nlet obj = {\n    name:\u3000'sian'\n};\ndefineReactive(obj, 'name', 'sian');\nobj.name = 'jack';\nconsole.log('obj.name: ', obj.name);\n<\/code><\/pre>\n<pre><code class=\"language-console line-numbers\">\u8bbe\u7f6ename\u7684\u503c\u4e3a\uff1a jack\n\u83b7\u53d6name\u7684\u503c\uff1a jack\nobj.name:  jack\n<\/code><\/pre>\n<p>\u5229\u7528\u95ed\u5305\u6765\u89e3\u51b3\u53d8\u91cf\u7684\u95ee\u9898\uff0c\u57fa\u7840\u4e0d\u597d\u7684\u7ae5\u978b\u53ef\u80fd\u4f1a\u6709\u70b9\u6655\u4e86\uff0c\u4e3a\u4ec0\u4e48\u8fd9\u6837\u5c31\u53ef\u4ee5\uff0c\u89e3\u91ca\u8d77\u6765\u4f1a\u6709\u70b9\u590d\u6742\uff0c\u53bb\u7f51\u4e0a\u641c\u7d22\u4e00\u4e0b\u95ed\u5305\u76f8\u5173\u7684\u77e5\u8bc6\u4e86\u89e3\u4e00\u4e0b\u7136\u540e\u518d\u6162\u6162\u4f53\u4f1a\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Object\u7684defineProperty\u65b9\u6cd5 \u5982\u4f55\u76d1\u542c\u4e00\u4e2a\u5bf9\u8c61\u7684\u67d0\u4e2a\u5c5e\u6027\u88ab\u8bbf\u95ee\u4e86\u5462\uff1fJavaScript\u63d0\u4f9b\u4e86\u76f8\u5173\u7684\u673a\u5236\u7ed9\u6211\u4eec\u6765\u5b9e\u73b0\uff0c\u90a3\u5c31\u662f\u8bbe\u7f6e\u5bf9\u8c61\u5c5e\u6027\u7684setter\u65b9\u6cd5\u53cagetter\u65b9\u6cd5\u3002 let object = { name: &#8216;sian&#8217;, age: 18 } Object.defineProperty(object, &#8216;name&#8217;, { get: function() { console.log(&#8216;\u83b7\u53d6name\u7684\u503c&#8217;) }, set: function(value) { console.log(&#8216;\u8bbe\u7f6ename\u7684\u503c&#8217;); } }) \u73b0\u5728\u95ee\u9898\u6765\u4e86\uff0c\u6211\u8be5\u5982\u4f55\u8fd4\u56de\u8fd9\u4e2a\u5c5e\u6027\u7684\u503c\uff1f\u8d4b\u503c\u7684\u65f6\u5019\u6211\u53c8\u8be5\u5982\u4f55\u4fdd\u5b58\u8be5\u5c5e\u6027\u7684\u503c\u5462\uff1f let object = { name: &#8216;sian&#8217;, age: 18 } let name; Object.defineProperty(object, &#8216;name&#8217;, { get: function() { console.log(&#8216;\u83b7\u53d6name\u7684\u503c&#8217;) return name; }, set: function(value) { console.log(&#8216;\u8bbe\u7f6ename\u7684\u503c&#8217;); name = value; } [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28],"tags":[64],"class_list":["post-2018","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-vue"],"_links":{"self":[{"href":"https:\/\/www.yusian.com\/blog\/wp-json\/wp\/v2\/posts\/2018","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.yusian.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.yusian.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.yusian.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yusian.com\/blog\/wp-json\/wp\/v2\/comments?post=2018"}],"version-history":[{"count":0,"href":"https:\/\/www.yusian.com\/blog\/wp-json\/wp\/v2\/posts\/2018\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.yusian.com\/blog\/wp-json\/wp\/v2\/media?parent=2018"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yusian.com\/blog\/wp-json\/wp\/v2\/categories?post=2018"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yusian.com\/blog\/wp-json\/wp\/v2\/tags?post=2018"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}