{"id":553,"date":"2023-12-21T10:34:00","date_gmt":"2023-12-21T02:34:00","guid":{"rendered":"http:\/\/ericw.top\/?p=553"},"modified":"2024-01-02T09:27:05","modified_gmt":"2024-01-02T01:27:05","slug":"computed-%e8%ae%a1%e7%ae%97%e5%b1%9e%e6%80%a7","status":"publish","type":"post","link":"http:\/\/ericw.top\/?p=553","title":{"rendered":"computed \u8ba1\u7b97\u5c5e\u6027"},"content":{"rendered":"\n

computed \u8ba1\u7b97\u5c5e\u6027<\/h1>\n\n\n\n

\u6982\u5ff5\uff1a<\/strong>\u57fa\u4e8e\u73b0\u6709\u7684\u6570\u636e<\/strong>\uff0c\u8ba1\u7b97\u51fa\u6765\u7684\u65b0\u5c5e\u6027<\/strong>\u3002 \u4f9d\u8d56<\/strong>\u7684\u6570\u636e\u53d8\u5316\uff0c\u81ea\u52a8<\/strong>\u91cd\u65b0\u8ba1\u7b97\u3002 <\/p>\n\n\n\n

\u8bed\u6cd5\uff1a<\/strong> <\/p>\n\n\n\n

\u2460 \u58f0\u660e\u5728 computed \u914d\u7f6e\u9879<\/strong>\u4e2d\uff0c\u4e00\u4e2a\u8ba1\u7b97\u5c5e\u6027\u5bf9\u5e94\u4e00\u4e2a\u51fd\u6570 <\/p>\n\n\n\n

\u2461 \u4f7f\u7528\u8d77\u6765\u548c\u666e\u901a\u5c5e\u6027\u4e00\u6837\u4f7f\u7528 {{ \u8ba1\u7b97\u5c5e\u6027\u540d }}<\/code> <\/p>\n\n\n\n

\u8ba1\u7b97\u5c5e\u6027 \u2192 \u53ef\u4ee5\u5c06\u4e00\u6bb5 \u6c42\u503c\u7684\u4ee3\u7801<\/strong> \u8fdb\u884c\u5c01\u88c5<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

\u4f8b\uff1a\u8ba1\u7b97\u793c\u7269\u7684\u603b\u6570<\/p>\n\n\n\n

    <!-- \u76ee\u6807\uff1a\u7edf\u8ba1\u6c42\u548c\uff0c\u6c42\u5f97\u793c\u7269\u603b\u6570 -->\n    <p>\u793c\u7269\u603b\u6570\uff1a{{ totalCount }} \u4e2a<\/p>\n  <\/div>\n  <script src=".\/vue.js"><\/script>\n  <script>\n    const app = new Vue({\n      el: '#app',\n      data: {\n        \/\/ \u73b0\u6709\u7684\u6570\u636e\n        list: [\n          { id: 1, name: '\u7bee\u7403', num: 100 },\n          { id: 2, name: '\u73a9\u5177', num: 22 },\n          { id: 3, name: '\u94c5\u7b14', num: 57 },\n        ]\n      },\n      computed: {\n        totalCount() {\n          \/\/ \u57fa\u4e8e\u73b0\u6709\u6570\u636e\uff0c\u7f16\u5199\u6c42\u503c\u903b\u8f91\n          \/\/ \u8ba1\u7b97\u5c5e\u6027\u51fd\u6570\u5185\u90e8\uff0c\u53ef\u4ee5\u901a\u8fc7 this \u8bbf\u95ee\u5230\u5b9e\u4f8b\n          \/\/ \u8ba1\u7b97\u5c5e\u6027\u51fd\u6570\u7684\u8fd4\u56de\u503c\uff0c\u4f1a\u4f5c\u4e3a\u8ba1\u7b97\u5c5e\u6027\u7684\u503c\n          let total = this.list.reduce((sum, item) => sum + item.num, 0)\n          return total\n        }\n      }\n    })\n  <\/script><\/code><\/pre>\n\n\n\n
computed \u8ba1\u7b97\u5c5e\u6027  VS  methods\u65b9\u6cd5<\/h2>\n\n\n\n
computed \u8ba1\u7b97\u5c5e\u6027\uff1a<\/strong> <\/p>\n\n\n\n
\u4f5c\u7528\uff1a<\/strong>\u5c01\u88c5\u4e86\u4e00\u6bb5\u5bf9\u4e8e\u6570\u636e\u7684\u5904\u7406\uff0c\u6c42\u5f97\u4e00\u4e2a\u7ed3\u679c\u3002 <\/p>\n\n\n\n
\u8bed\u6cd5\uff1a<\/strong> <\/p>\n\n\n\n
\u2460 \u5199\u5728 computed \u914d\u7f6e\u9879\u4e2d <\/p>\n\n\n\n
\u2461 \u4f5c\u4e3a\u5c5e\u6027\uff0c\u76f4\u63a5\u4f7f\u7528 \u2192 this.\u8ba1\u7b97\u5c5e\u6027 {{ \u8ba1\u7b97\u5c5e\u6027 }} <\/p>\n\n\n\n
methods \u65b9\u6cd5\uff1a<\/strong> <\/p>\n\n\n\n
\u4f5c\u7528\uff1a<\/strong>\u7ed9\u5b9e\u4f8b\u63d0\u4f9b\u4e00\u4e2a\u65b9\u6cd5\uff0c\u8c03\u7528\u4ee5\u5904\u7406\u4e1a\u52a1\u903b\u8f91\u3002 <\/p>\n\n\n\n
\u8bed\u6cd5\uff1a<\/strong> <\/p>\n\n\n\n
\u2460 \u5199\u5728 methods \u914d\u7f6e\u9879\u4e2d <\/p>\n\n\n\n
\u2461 \u4f5c\u4e3a\u65b9\u6cd5\uff0c\u9700\u8981\u8c03\u7528 \u2192 this.\u65b9\u6cd5\u540d( ) {{ \u65b9\u6cd5\u540d() }} @\u4e8b\u4ef6\u540d=\"\u65b9\u6cd5\u540d\" <\/p>\n\n\n\n
\u7f13\u5b58\u7279\u6027<\/strong>\uff08\u63d0\u5347\u6027\u80fd\uff09\uff1a <\/p>\n\n\n\n
\u8ba1\u7b97\u5c5e\u6027\u4f1a\u5bf9\u8ba1\u7b97\u51fa\u6765\u7684\u7ed3\u679c\u7f13\u5b58\uff0c\u518d\u6b21\u4f7f\u7528\u76f4\u63a5\u8bfb\u53d6\u7f13\u5b58\uff0c <\/p>\n\n\n\n
\u4f9d\u8d56\u9879\u53d8\u5316\u4e86\uff0c\u4f1a\u81ea\u52a8\u91cd\u65b0\u8ba1\u7b97 \u2192 \u5e76\u518d\u6b21\u7f13\u5b58<\/p>\n\n\n\n
\u8ba1\u7b97\u5c5e\u6027\u7684\u5b8c\u6574\u5199\u6cd5<\/h2>\n\n\n\n
\u8ba1\u7b97\u5c5e\u6027\u9ed8\u8ba4\u7684\u7b80\u5199\uff0c\u53ea\u80fd\u8bfb\u53d6\u8bbf\u95ee\uff0c\u4e0d\u80fd \"\u4fee\u6539\"<\/strong>\u3002
\n\u5982\u679c\u8981 \"\u4fee\u6539\"<\/strong> \u2192 \u9700\u8981\u5199\u8ba1\u7b97\u5c5e\u6027\u7684\u5b8c\u6574\u5199\u6cd5<\/strong>\u3002<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
  <div id="app">\n    \u59d3\uff1a<input type="text" v-model="firstName"><br>\n    \u540d\uff1a<input type="text" v-model="lastName"><br>\n    <p>\u59d3\u540d\uff1a{{ firstName+lastName }}<\/p>\n    <button @click="changeName">\u4fee\u6539\u59d3\u540d<\/button>\n  <\/div>\n  <script src=".\/vue.js"><\/script>\n  <script>\n    const app = new Vue({\n      el: '#app',\n      data: {\n        firstName: '\u5f20',\n        lastName: '\u4e09'\n      },\n      computed: {\n        \/\/ \u5b8c\u6574\u5199\u6cd5\uff1a\u83b7\u53d6 + \u8bbe\u7f6e\n        fullName: {\n          get() {\n            return this.firstName + this.lastName\n          },\n          set() {\n            this.firstName = value.slice(0, 1),\n              this.lastName = value.slice(1)\n          }\n        }\n      },\n      methods: {\n        changeName() {\n          \/\/ \u4fee\u6539\u6570\u636e\n          this.fullName = '\u674e\u56db'\n        }\n      }\n    })\n  <\/script><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
computed \u8ba1\u7b97\u5c5e\u6027 \u6982\u5ff5\uff1a\u57fa\u4e8e\u73b0\u6709\u7684\u6570\u636e\uff0c\u8ba1\u7b97\u51fa\u6765\u7684\u65b0\u5c5e\u6027\u3002 \u4f9d\u8d56\u7684\u6570\u636e\u53d8\u5316\uff0c\u81ea\u52a8\u91cd\u65b0\u8ba1\u7b97\u3002 \u8bed\u6cd5\uff1a  […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,5],"tags":[],"_links":{"self":[{"href":"http:\/\/ericw.top\/index.php?rest_route=\/wp\/v2\/posts\/553"}],"collection":[{"href":"http:\/\/ericw.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/ericw.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/ericw.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/ericw.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=553"}],"version-history":[{"count":4,"href":"http:\/\/ericw.top\/index.php?rest_route=\/wp\/v2\/posts\/553\/revisions"}],"predecessor-version":[{"id":591,"href":"http:\/\/ericw.top\/index.php?rest_route=\/wp\/v2\/posts\/553\/revisions\/591"}],"wp:attachment":[{"href":"http:\/\/ericw.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=553"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/ericw.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=553"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/ericw.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=553"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}