1 line
14 KiB
JavaScript
1 line
14 KiB
JavaScript
"use strict";(self.webpackChunkjjbook=self.webpackChunkjjbook||[]).push([[7544],{3905:function(e,t,r){r.d(t,{Zo:function(){return l},kt:function(){return s}});var n=r(7294);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function u(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?o(Object(r),!0).forEach((function(t){a(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):o(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function p(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var c=n.createContext({}),i=function(e){var t=n.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):u(u({},t),e)),r},l=function(e){var t=i(e.components);return n.createElement(c.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},d=n.forwardRef((function(e,t){var r=e.components,a=e.mdxType,o=e.originalType,c=e.parentName,l=p(e,["components","mdxType","originalType","parentName"]),d=i(r),s=a,h=d["".concat(c,".").concat(s)]||d[s]||m[s]||o;return r?n.createElement(h,u(u({ref:t},l),{},{components:r})):n.createElement(h,u({ref:t},l))}));function s(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=r.length,u=new Array(o);u[0]=d;var p={};for(var c in t)hasOwnProperty.call(t,c)&&(p[c]=t[c]);p.originalType=e,p.mdxType="string"==typeof e?e:a,u[1]=p;for(var i=2;i<o;i++)u[i]=r[i];return n.createElement.apply(null,u)}return n.createElement.apply(null,r)}d.displayName="MDXCreateElement"},4498:function(e,t,r){r.r(t),r.d(t,{frontMatter:function(){return p},contentTitle:function(){return c},metadata:function(){return i},toc:function(){return l},default:function(){return d}});var n=r(7462),a=r(3366),o=(r(7294),r(3905)),u=["components"],p={sidebar_label:"\u6846\u67b6\uff1aVue \u7684 computed \u548c watch \u7684\u533a\u522b",sidebar_position:5},c="Vue \u7684 computed \u548c watch \u7684\u533a\u522b",i={unversionedId:"book1/frame-vue-computed-watch",id:"book1/frame-vue-computed-watch",isDocsHomePage:!1,title:"Vue \u7684 computed \u548c watch \u7684\u533a\u522b",description:"\u76f8\u5173\u95ee\u9898",source:"@site/docs/book1/frame-vue-computed-watch.md",sourceDirName:"book1",slug:"/book1/frame-vue-computed-watch",permalink:"/awesome-interview/book1/frame-vue-computed-watch",tags:[],version:"current",sidebarPosition:5,frontMatter:{sidebar_label:"\u6846\u67b6\uff1aVue \u7684 computed \u548c watch \u7684\u533a\u522b",sidebar_position:5},sidebar:"tutorialSidebar",previous:{title:"\u6846\u67b6\uff1aVue \u7684\u6570\u636e\u7ed1\u5b9a\u673a\u5236",permalink:"/awesome-interview/book1/frame-vue-data-binding"},next:{title:"\u57fa\u7840\uff1a\u95ed\u5305\u7684\u4f5c\u7528\u548c\u539f\u7406",permalink:"/awesome-interview/book1/js-closures"}},l=[{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. \u5b9e\u73b0\u539f\u7406",id:"1-\u5b9e\u73b0\u539f\u7406",children:[]},{value:"2. \u9002\u7528\u573a\u666f",id:"2-\u9002\u7528\u573a\u666f",children:[]},{value:"3. Vue3 \u4e0e Vue2 \u533a\u522b",id:"3-vue3-\u4e0e-vue2-\u533a\u522b",children:[]}]},{value:"\u53c2\u8003\u8d44\u6599",id:"\u53c2\u8003\u8d44\u6599",children:[]}],m={toc:l};function d(e){var t=e.components,r=(0,a.Z)(e,u);return(0,o.kt)("wrapper",(0,n.Z)({},m,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"vue-\u7684-computed-\u548c-watch-\u7684\u533a\u522b"},"Vue \u7684 computed \u548c watch \u7684\u533a\u522b"),(0,o.kt)("h2",{id:"\u76f8\u5173\u95ee\u9898"},"\u76f8\u5173\u95ee\u9898"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},"computed \u548c watch \u7684\u5b9e\u73b0\u539f\u7406"),(0,o.kt)("li",{parentName:"ul"},"computed \u548c watch \u7684\u9002\u7528\u573a\u666f")),(0,o.kt)("h2",{id:"\u56de\u7b54\u5173\u952e\u70b9"},"\u56de\u7b54\u5173\u952e\u70b9"),(0,o.kt)("p",null,(0,o.kt)("inlineCode",{parentName:"p"},"\u54cd\u5e94\u53d8\u5316")," ",(0,o.kt)("inlineCode",{parentName:"p"},"\u5c5e\u6027")," ",(0,o.kt)("inlineCode",{parentName:"p"},"\u4fa6\u542c")),(0,o.kt)("p",null,"computed \u662f\u6a21\u677f\u8868\u8fbe\u5f0f\u7684\u58f0\u660e\u5f0f\u63cf\u8ff0\uff0c\u4f1a",(0,o.kt)("strong",{parentName:"p"},"\u521b\u5efa\u65b0\u7684\u54cd\u5e94\u5f0f\u6570\u636e"),"\u3002\u800c watch \u662f\u54cd\u5e94\u5f0f\u6570\u636e\u7684",(0,o.kt)("strong",{parentName:"p"},"\u81ea\u5b9a\u4e49\u4fa6\u542c\u5668"),"\uff0c\u7528\u4e8e",(0,o.kt)("strong",{parentName:"p"},"\u54cd\u5e94\u6570\u636e\u7684\u53d8\u5316"),"\u3002\u9664\u6b64\u4e4b\u5916\uff0ccomputed \u8fd8\u5177\u6709",(0,o.kt)("strong",{parentName:"p"},"\u53ef\u7f13\u5b58\uff0c\u53ef\u4f9d\u8d56\u591a\u4e2a\u5c5e\u6027\uff0cgetter \u51fd\u6570\u65e0\u526f\u4f5c\u7528"),"\u7b49\u7279\u70b9\u3002watch \u5219\u66f4\u9002\u7528\u4e8e",(0,o.kt)("strong",{parentName:"p"},"\u5f02\u6b65\u6216\u5f00\u9500\u5927\u7684\u64cd\u4f5c"),"\u3002"),(0,o.kt)("h2",{id:"\u77e5\u8bc6\u70b9\u6df1\u5165"},"\u77e5\u8bc6\u70b9\u6df1\u5165"),(0,o.kt)("h3",{id:"1-\u5b9e\u73b0\u539f\u7406"},"1. \u5b9e\u73b0\u539f\u7406"),(0,o.kt)("p",null,"\u5728\u4e86\u89e3 Vue \u6570\u636e\u53cc\u5411\u7ed1\u5b9a\u7684\u57fa\u7840\u4e0a\uff0ccomputed \u7b49\u540c\u4e8e\u4e3a\u5c5e\u6027\u8bbe\u7f6e ",(0,o.kt)("strong",{parentName:"p"},"getter \u51fd\u6570"),"\uff08\u4e5f\u53ef\u8bbe\u7f6e ",(0,o.kt)("a",{parentName:"p",href:"https://cn.vuejs.org/v2/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E7%9A%84-setter"},"setter"),"\uff09\uff0c\u800c watch \u7b49\u540c\u4e8e\u4e3a\u5c5e\u6027\u7684 ",(0,o.kt)("strong",{parentName:"p"},"setter \u8bbe\u7f6e\u56de\u8c03\u51fd\u6570\u3001\u76d1\u542c\u6df1\u5ea6 deep \u53ca\u54cd\u5e94\u901f\u5ea6 immediate"),"\u3002\u4e0b\u9762\u7b80\u5355\u8bb2\u89e3\u4e0b\u4e24\u8005\u7684\u5b9e\u73b0\u539f\u7406\uff0c\u5177\u4f53\u7ec6\u8282\u53ef\u4ee5\u53c2\u8003",(0,o.kt)("a",{parentName:"p",href:"https://github.com/vuejs/vue"},"\u6e90\u7801"),"\u3002"),(0,o.kt)("h4",{id:"11-computed-\u539f\u7406"},"1.1 computed \u539f\u7406"),(0,o.kt)("p",null,"\u4e3b\u8981\u5206\u4e3a\u56db\u4e2a\u9636\u6bb5"),(0,o.kt)("p",null,(0,o.kt)("img",{parentName:"p",src:"https://user-images.githubusercontent.com/12165373/125889331-b97687a3-2037-4bb9-9d4e-8405f5ed271f.png",alt:"computed\u56db\u4e2a\u9636\u6bb5"})),(0,o.kt)("ol",null,(0,o.kt)("li",{parentName:"ol"},(0,o.kt)("strong",{parentName:"li"},"\u521d\u59cb\u5316"),"\uff1a\u4e3a computed \u5c5e\u6027\u521b\u5efa lazy watcher\uff08\u6b64\u5904 watcher \u6307\u53cc\u5411\u7ed1\u5b9a\u4e2d\u7684\u76d1\u542c\u5668\uff0c\u4e0b\u540c\uff09\u3002"),(0,o.kt)("li",{parentName:"ol"},(0,o.kt)("strong",{parentName:"li"},"\u9996\u6b21\u6a21\u677f\u6e32\u67d3"),"\uff1a\u6e32\u67d3 watcher \u68c0\u6d4b\u5230 computed \u5c5e\u6027\u65f6\uff0c\u4f1a\u8c03\u7528 computed \u5c5e\u6027\u7684 getter \u65b9\u6cd5\uff0c\u800c computed \u5c5e\u6027\u7684 getter \u65b9\u6cd5\u4f1a\u8c03\u7528\u4f9d\u8d56\u5c5e\u6027\u7684 getter\uff0c\u4ece\u800c\u5f62\u6210\u94fe\u5f0f\u8c03\u7528\uff0c\u540c\u65f6\u4fdd\u5b58\u5f15\u7528\u5173\u7cfb\u7528\u4e8e\u66f4\u65b0\u3002\u53d6\u5f97\u8ba1\u7b97\u7ed3\u679c\u540e lazy watcher \u4f1a\u5c06\u7ed3\u679c\u7f13\u5b58\uff0c\u5e76\u8fd4\u56de\u7ed9\u6e32\u67d3 watcher \u8fdb\u884c\u6a21\u677f\u6e32\u67d3\u3002"),(0,o.kt)("li",{parentName:"ol"},(0,o.kt)("strong",{parentName:"li"},"\u591a\u6b21\u6a21\u677f\u6e32\u67d3"),"\uff1a\u76f4\u63a5\u53d6 lazy watcher \u4e2d\u7684\u7f13\u5b58\u503c\u7ed9\u5230\u6e32\u67d3 watcher \u8fdb\u884c\u6e32\u67d3\u3002"),(0,o.kt)("li",{parentName:"ol"},(0,o.kt)("strong",{parentName:"li"},"\u4f9d\u8d56\u5c5e\u6027\u66f4\u65b0"),"\uff1a\u6839\u636e\u9996\u6b21\u6a21\u677f\u6e32\u67d3\u9636\u6bb5\u6784\u5efa\u7684\u4f9d\u8d56\u5173\u7cfb\u5411\u4e0a\u901a\u77e5 lazy watcher \u8fdb\u884c\u91cd\u65b0\u8ba1\u7b97\uff0c\u7f13\u5b58\u8ba1\u7b97\u7ed3\u679c\u5e76\u901a\u77e5\u6e32\u67d3 watcher \u91cd\u65b0\u6e32\u67d3\u66f4\u65b0\u9875\u9762\u3002")),(0,o.kt)("h4",{id:"12-watch-\u539f\u7406"},"1.2 watch \u539f\u7406"),(0,o.kt)("p",null,"watch \u672c\u8d28\u4e0a\u662f\u4e3a\u6bcf\u4e2a\u76d1\u542c\u5c5e\u6027 setter \u521b\u5efa\u4e86\u4e00\u4e2a watcher\uff0c\u5f53\u88ab\u76d1\u542c\u7684\u5c5e\u6027\u66f4\u65b0\u65f6\uff0c\u8c03\u7528\u4f20\u5165\u7684\u56de\u8c03\u51fd\u6570\u3002\u5e38\u89c1\u7684\u914d\u7f6e\u9009\u9879\u6709 deep \u548c immediate\uff0c\u5bf9\u5e94\u539f\u7406\u5982\u4e0b\uff1a"),(0,o.kt)("ol",null,(0,o.kt)("li",{parentName:"ol"},(0,o.kt)("strong",{parentName:"li"},"deep"),"\uff1a\u6df1\u5ea6\u76d1\u542c\u5bf9\u8c61\uff0c\u4e3a\u5bf9\u8c61\u7684\u6bcf\u4e00\u4e2a\u5c5e\u6027\u521b\u5efa\u4e00\u4e2a watcher\uff0c\u4ece\u800c\u786e\u4fdd\u5bf9\u8c61\u7684\u6bcf\u4e00\u4e2a\u5c5e\u6027\u66f4\u65b0\u65f6\u90fd\u4f1a\u89e6\u53d1\u4f20\u5165\u7684\u56de\u8c03\u51fd\u6570\u3002\u4e3b\u8981\u539f\u56e0\u5728\u4e8e\u5bf9\u8c61\u5c5e\u4e8e\u5f15\u7528\u7c7b\u578b\uff0c\u5355\u4e2a\u5c5e\u6027\u7684\u66f4\u65b0\u5e76\u4e0d\u4f1a\u89e6\u53d1\u5bf9\u8c61 setter\uff0c\u56e0\u6b64\u5f15\u5165 deep \u80fd\u591f\u5f88\u597d\u5730\u89e3\u51b3\u76d1\u542c\u5bf9\u8c61\u7684\u95ee\u9898\u3002\u540c\u65f6\u4e5f\u4f1a\u5f15\u5165\u5224\u65ad\u673a\u5236\uff0c\u786e\u4fdd\u5728\u591a\u4e2a\u5c5e\u6027\u66f4\u65b0\u65f6\u56de\u8c03\u51fd\u6570\u4ec5\u89e6\u53d1\u4e00\u6b21\uff0c\u907f\u514d\u6027\u80fd\u6d6a\u8d39\u3002"),(0,o.kt)("li",{parentName:"ol"},(0,o.kt)("strong",{parentName:"li"},"immediate"),"\uff1a\u5728\u521d\u59cb\u5316\u65f6\u76f4\u63a5\u8c03\u7528\u56de\u8c03\u51fd\u6570\uff0c\u53ef\u4ee5\u901a\u8fc7\u5728 created \u9636\u6bb5\u624b\u52a8\u8c03\u7528\u56de\u8c03\u51fd\u6570\u5b9e\u73b0\u76f8\u540c\u7684\u6548\u679c\u3002")),(0,o.kt)("h3",{id:"2-\u9002\u7528\u573a\u666f"},"2. \u9002\u7528\u573a\u666f"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},"computed\uff1a\u9700\u8981\u5904\u7406\u590d\u6742\u903b\u8f91\u7684\u6a21\u677f\u8868\u8fbe\u5f0f\u3002"),(0,o.kt)("li",{parentName:"ul"},"watch\uff1a\u9700\u8981\u6267\u884c\u5f02\u6b65\u6216\u5f00\u9500\u8f83\u5927\u7684\u64cd\u4f5c\u3002")),(0,o.kt)("p",null,"\u4ece\u8868\u73b0\u4e0a\u770b\uff0ccomputed \u4f1a\u521b\u5efa",(0,o.kt)("strong",{parentName:"p"},"\u65b0\u7684\u5c5e\u6027"),"\uff0c\u800c watch \u53ef\u4ee5\u901a\u8fc7",(0,o.kt)("strong",{parentName:"p"},"\u5c06\u5c5e\u6027\u8bbe\u7f6e\u5728 data \u4e2d\uff0c\u518d\u76d1\u542c\u4f9d\u8d56\u5c5e\u6027\u53d8\u5316\uff0c\u8c03\u7528 handler \u65b9\u6cd5\u66f4\u65b0\u5c5e\u6027"),"\u7684\u65b9\u5f0f\u8fbe\u5230\u540c\u6837\u7684\u6548\u679c\u3002\u56e0\u6b64\u4e0d\u96be\u5f97\u51fa computed \u7684\u4f7f\u7528\u573a\u666f\u53ef\u4ee5\u88ab watch \u8986\u76d6\u8fd9\u4e00\u7ed3\u8bba\u3002\u4f46\u5728\u5177\u4f53\u7684\u4f7f\u7528\u4e0a\u8fd8\u662f\u4f18\u5148\u8003\u8651 computed\uff0c\u56e0\u4e3a\u76f8\u540c\u573a\u666f\u4e0b watch \u6240\u9700\u7684\u4ee3\u7801\u91cf\u548c\u6027\u80fd\u5f00\u9500\u4e00\u822c\u6765\u8bf4\u4f1a\u6bd4 computed \u5927\uff0c\u5177\u4f53\u53ef\u4ee5\u53c2\u7167 ",(0,o.kt)("a",{parentName:"p",href:"https://cn.vuejs.org/v2/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7-vs-%E4%BE%A6%E5%90%AC%E5%B1%9E%E6%80%A7"},"computed vs watched"),"\u3002\u5728 computed \u65e0\u6cd5\u6ee1\u8db3\u9700\u6c42\u7684\u60c5\u51b5\u4e0b\u518d\u8003\u8651\u4f7f\u7528 watch\uff0c\u4e5f\u53ef\u4ee5\u6709\u6548\u907f\u514d watch \u6ee5\u7528\uff0c\u63d0\u5347\u6027\u80fd\u3002"),(0,o.kt)("h3",{id:"3-vue3-\u4e0e-vue2-\u533a\u522b"},"3. Vue3 \u4e0e Vue2 \u533a\u522b"),(0,o.kt)("p",null,(0,o.kt)("strong",{parentName:"p"},"Vue3 \u4e2d computed \u548c watch \u7684\u539f\u7406\u4ee5\u53ca\u5728 Options API \u4e2d\u7684\u4f7f\u7528\u65b9\u5f0f\u548c Vue2 \u4fdd\u6301\u4e00\u81f4\u3002\u4f46\u5728 Vue3 \u7684\u65b0\u7279\u6027\u7ec4\u5408\u5f0f\uff08Composition\uff09API \u4e2d\uff0c\u4f7f\u7528\u65b9\u5f0f\u548c\u529f\u80fd\u76f8\u6bd4 Vue2 \u6709\u4e86\u660e\u663e\u5dee\u522b"),"\u3002\u4f7f\u7528\u65b9\u5f0f\u7531\u539f\u6765\u5728\u7ec4\u4ef6\u4e2d\u58f0\u660e\u6539\u4e3a\u76f4\u63a5\u4ece Vue \u4e2d\u5bfc\u5165\u4f7f\u7528\uff0c\u5404\u81ea\u7684\u8c03\u7528\u65b9\u5f0f\u548c\u53c2\u6570\u4e5f\u53d1\u751f\u4e86\u6539\u53d8\uff0c\u529f\u80fd\u66f4\u52a0\u591a\u6837\uff0c\u540c\u65f6 Vue3 \u8fd8\u5f15\u5165\u4e86 watchEffect \u4f5c\u4e3a watch \u7684\u8865\u5145\uff0c\u4ee5\u6c42\u7528\u66f4\u7b80\u6d01\u7684\u4ee3\u7801\u6765\u8986\u76d6\u66f4\u5e7f\u7684\u4f7f\u7528\u573a\u666f\u3002\u5177\u4f53\u4f7f\u7528\u53c2\u8003",(0,o.kt)("a",{parentName:"p",href:"https://v3.cn.vuejs.org/guide/reactivity-computed-watchers.html"},"\u5b98\u65b9\u6587\u6863"),"\u3002"),(0,o.kt)("h2",{id:"\u53c2\u8003\u8d44\u6599"},"\u53c2\u8003\u8d44\u6599"),(0,o.kt)("ol",null,(0,o.kt)("li",{parentName:"ol"},(0,o.kt)("a",{parentName:"li",href:"https://cn.vuejs.org/v2/guide/computed.html"},"Vuejs computed")),(0,o.kt)("li",{parentName:"ol"},(0,o.kt)("a",{parentName:"li",href:"https://github.com/vuejs/vue"},"Vuejs \u6e90\u7801")),(0,o.kt)("li",{parentName:"ol"},(0,o.kt)("a",{parentName:"li",href:"https://v3.cn.vuejs.org/guide/composition-api-introduction.html"},"Vue3 \u7ec4\u5408\u5f0f api"))))}d.isMDXComponent=!0}}]); |