1"use strict";(self.webpackChunkcode_fictionist=self.webpackChunkcode_fictionist||[]).push([[5001],{28453:(e,n,c)=>{c.d(n,{R:()=>l,x:()=>i});var d=c(96540);const s={},r=d.createContext(s);function l(e){const n=d.useContext(r);return d.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:l(e.components),d.createElement(r.Provider,{value:n},e.children)}},35564:(e,n,c)=>{c.r(n),c.d(n,{assets:()=>t,contentTitle:()=>i,default:()=>h,frontMatter:()=>l,metadata:()=>d,toc:()=>o});const d=JSON.parse('{"id":"notes/Web_Dev/Vue/reactive","title":"[Vue3] \u97ff\u61c9\u5f0f\u8cc7\u6599","description":"\u5efa\u7acb Vue3 \u5c08\u6848","source":"@site/docs/notes/Web_Dev/Vue/01-reactive.mdx","sourceDirName":"notes/Web_Dev/Vue","slug":"/notes/Web_Dev/Vue/reactive","permalink":"/docs/notes/Web_Dev/Vue/reactive","draft":false,"unlisted":false,"tags":[{"inline":true,"label":"vue3","permalink":"/docs/tags/vue-3"},{"inline":true,"label":"ref","permalink":"/docs/tags/ref"},{"inline":true,"label":"reactive","permalink":"/docs/tags/reactive"},{"inline":true,"label":"computed","permalink":"/docs/tags/computed"}],"version":"current","lastUpdatedAt":1766374113000,"sidebarPosition":1,"frontMatter":{"title":"[Vue3] \u97ff\u61c9\u5f0f\u8cc7\u6599","sidebar_label":"[Vue3] \u97ff\u61c9\u5f0f\u8cc7\u6599","tags":["vue3","ref","reactive","computed"],"keywords":["vue3","ref","reactive","computed"]},"sidebar":"notes","previous":{"title":"Vue3","permalink":"/docs/category/vue3"},"next":{"title":"[Vue3] \u5143\u4ef6\u8207\u8cc7\u6599\u50b3\u905e","permalink":"/docs/notes/Web_Dev/Vue/data_transfer"}}');var s=c(74848),r=c(28453);const l={title:"[Vue3] \u97ff\u61c9\u5f0f\u8cc7\u6599",sidebar_label:"[Vue3] \u97ff\u61c9\u5f0f\u8cc7\u6599",tags:["vue3","ref","reactive","computed"],keywords:["vue3","ref","reactive","computed"]},i=void 0,t={},o=[{value:"\u5efa\u7acb Vue3 \u5c08\u6848",id:"\u5efa\u7acb-vue3-\u5c08\u6848",level:2},{value:"\u8a9e\u6cd5",id:"\u8a9e\u6cd5",level:2},{value:"\u6587\u672c\u63d2\u503c",id:"\u6587\u672c\u63d2\u503c",level:3},{value:"Raw HTML",id:"raw-html",level:3},{value:"Attribute Bindings",id:"attribute-bindings",level:3},{value:"\u97ff\u61c9\u5f0f\u8cc7\u6599",id:"\u97ff\u61c9\u5f0f\u8cc7\u6599",level:2},{value:"<code>ref</code>",id:"ref",level:3},{value:"<code>reactive</code>",id:"reactive",level:3},{value:"<code>ref</code> \u8207 <code>reactive</code> \u4e4b\u9593\u7684\u5dee\u7570",id:"ref-\u8207-reactive-\u4e4b\u9593\u7684\u5dee\u7570",level:3},{value:"<code>computed</code>",id:"computed",level:3},{value:"method \u8207 <code>computed</code> \u7684\u5dee\u7570",id:"method-\u8207-computed-\u7684\u5dee\u7570",level:3},{value:"Reference",id:"reference",level:2}];function a(e){const n={a:"a",admonition:"admonition",br:"br",code:"code",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",...(0,r.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h2,{id:"\u5efa\u7acb-vue3-\u5c08\u6848",children:"\u5efa\u7acb Vue3 \u5c08\u6848"}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsx)(n.li,{children:"\u900f\u904e npm \u5efa\u7acb\u4e00\u500b Vue3 \u5c08\u6848\uff0c\u6307\u4ee4\u5982\u4e0b\uff1a"}),"\n"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-powershell",children:"npm create vue@latest\n"})}),"\n",(0,s.jsxs)(n.ol,{start:"2",children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"cd"})," \u5230\u5c08\u6848\u4f4d\u7f6e\uff0c\u57f7\u884c\u4ee5\u4e0b\u6307\u4ee4\uff1a"]}),"\n"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-powershell",children:"npm install\n"})}),"\n",(0,s.jsxs)(n.ol,{start:"3",children:["\n",(0,s.jsxs)(n.li,{children:["\u57f7\u884c ",(0,s.jsx)(n.code,{children:"npm run dev"})," \u5373\u53ef\u555f\u52d5\u5c08\u6848\u3002"]}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"\u8a9e\u6cd5",children:"\u8a9e\u6cd5"}),"\n",(0,s.jsxs)(n.p,{children:["Vue3 \u63d0\u4f9b\u4e86\u5f37\u5927\u7684\u8a9e\u6cd5 - ",(0,s.jsx)(n.code,{children:"composition api"}),"\uff0c\u9019\u548c Vue2 \u7684 ",(0,s.jsx)(n.code,{children:"options api"})," \u6709\u5f88\u5927\u7684\u4e0d\u540c\u3002",(0,s.jsx)(n.br,{}),"\n","\u96d6\u7136\u4ecd\u7136\u53ef\u4ee5\u5728 Vue3 \u4e2d\u4f7f\u7528 options api\uff0c\u4f46\u9019\u901a\u5e38\u53ea\u6703\u5728\u9
10a3\u4e9b Vue3 \u525b\u51fa\u4f86\u7684\u5c08\u6848\u4e2d\u770b\u5230\u3002\u6240\u4ee5\u672c\u7bc7\u7b46\u8a18\u6703\u4ee5 ",(0,s.jsx)(n.code,{children:"composition api"})," \u70ba\u4e3b\u3002"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-xml",metastring:"title='composition api'",children:"<script setup>\n\x3c!-- put all your methods and variables here --\x3e\n<\/script>\n\n<template>\n \x3c!-- the HTML structure --\x3e\n</template>\n\n<style scoped>\n\x3c!-- css style, use `scope` let the css command only work in this component \u200b --\x3e\n</style>\n"})}),"\n",(0,s.jsx)(n.h3,{id:"\u6587\u672c\u63d2\u503c",children:"\u6587\u672c\u63d2\u503c"}),"\n",(0,s.jsxs)(n.p,{children:["\u5728 ",(0,s.jsx)(n.code,{children:"template"})," \u4e2d\u82e5\u8981\u4f7f\u7528\u8b8a\u6578\uff0c\u53ef\u4ee5\u4f7f\u7528 ",(0,s.jsx)(n.code,{children:"{{...}}"}),"\uff0c\u5982\u4e0b\uff1a"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-xml",children:"<span>Message: {{ msg }}</span>\n"})}),"\n",(0,s.jsx)(n.h3,{id:"raw-html",children:"Raw HTML"}),"\n",(0,s.jsxs)(n.p,{children:["\u5982\u679c\u8b8a\u6578\u5305\u542b HTML \u5167\u5bb9\uff0c\u5247\u4e0d\u61c9\u4f7f\u7528 ",(0,s.jsx)(n.code,{children:"{{...}}"}),"\uff0c\u56e0\u70ba\u5b83\u6703\u5c07\u8b8a\u6578\u7684\u5167\u5bb9\u8996\u70ba\u7d14\u6587\u672c\u3002\u9019\u6642\u61c9\u4f7f\u7528 ",(0,s.jsx)(n.code,{children:"v-html"})," \u6307\u4ee4\u63d2\u5165 HTML \u5167\u5bb9\uff1a"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-xml",children:'\x3c!-- rawHtml = <span style="color: red">This should be red.</span> --\x3e\n<p>Using v-html directive: <span v-html="rawHtml"></span></p>\n'})}),"\n",(0,s.jsx)(n.h3,{id:"attribute-bindings",children:"Attribute Bindings"}),"\n",(0,s.jsxs)(n.p,{children:["\u5982\u679c\u8981\u7d81\u5b9a\u8b8a\u6578\u5230 ",(0,s.jsx)(n.code,{children:"attribute"})," \u4e0a\uff0c\u53ef\u4ee5\u4f7f\u7528 ",(0,s.jsx)(n.code,{children:"v-bind"}),"\u3002\u4f8b\u5982\uff1a"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-xml",children:'<h1 v-bind:class="{addColor: changed}">I will change my color</h1>\n'})}),"\n",(0,s.jsxs)(n.p,{children:["\u9019\u500b\u7bc4\u4f8b\u8868\u793a\u7576 ",(0,s.jsx)(n.code,{children:"changed"})," \u70ba ",(0,s.jsx)(n.code,{children:"true"})," \u6642\uff0c",(0,s.jsx)(n.code,{children:"<h1>"})," \u6703\u52a0\u4e0a ",(0,s.jsx)(n.code,{children:"addColor"})," \u9019\u500b class\u3002",(0,s.jsx)(n.br,{}),"\n","\u4e5f\u53ef\u4ee5\u4f7f\u7528 ",(0,s.jsx)(n.code,{children:"v-bind"})," \u7684\u7c21\u5beb\u65b9\u5f0f\uff1a"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-xml",children:'<h1 :class="{addColor: changed}">I will change my color</h1>\n'})}),"\n",(0,s.jsxs)(n.admonition,{type:"info",children:[(0,s.jsx)(n.p,{children:"Vue \u9084\u63d0\u4f9b\u5f88\u591a\u5f88\u597d\u7528\u7684\u6307\u4ee4\uff0c\u4f8b\u5982\uff1a"}),(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"v-for"}),": \u9019\u662f\u7528\u4f86\u5728 ",(0,s.jsx)(n.code,{children:"template"})," \u4e2d\u505a\u8fed\u4ee3\u7684\u6307\u4ee4"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"v-if"})," or ",(0,s.jsx)(n.code,{children:"v-show"}),": \u9019\u662f\u7528\u4f86\u5728 ",(0,s.jsx)(n.code,{children:"template"})," \u4e2d\u505a\u689d\u4ef6\u5224\u65b7\u7684\u6307\u4ee4"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"v-on"}),": \u9019\u662f\u7528\u4f86\u5728 ",(0,s.jsx)(n.code,{children:"template"})," \u4e2d\u505a\u4e8b\u4ef6\u7d81\u5b9a\u7684\u6307\u4ee4"]}),"\n"]})]}),"\n",(0,s.jsx)(n.h2,{id:"\u97ff\u61c9\u5f0f\u8cc7\u6599",children:"\u97ff\u61c9\u5f0f\u8cc7\u6599"}),"\n",(0,s.jsxs)(n.p,{children:["\u97ff\u61c9\u5f0f\u662f Vue \u4e2d\u7684\u4e00\u500b\u91cd\u8981\u6982\u5ff5\u3002\u5728 React \u4e2d\u6703\u7528 ",(0,s.jsx)(n.code,{children:"useState"})," \u4f86\u7ba1\u7406\u97ff\u61c9\u5f0f\u6578\u64da\u3002\u4f46\u5728 Vue3 \u4e2d\uff0c\u5247\u4f7f\u7528 ",(0,s.jsx)(n.code,{children:"ref"}),"\u3001",(0,s.jsx)(n.code,{children:"reactive"})," \u548c ",(0,s.jsx)(n.code,{children:"computed"})," \u4f86\u9054\u5230\u97ff\u61c9\u5f0f\u72c0\u614b\u7684\u7ba1\u7406\u3002"]}),"\n",(0,s.jsx)(n.h3,{id:"ref",children:(0,s.jsx)(n.code,{children:"ref"})}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"ref"})," \u53ef\u4ee5\u5132\u5b58\u4efb\u4f55\u985e\u578b\u7684\u6578\u64da\u3002\u4f46\u6709\u4e9b\u4eba\u6703\u504f\u597d\u628a object \u6216 array \u4ea4\u7d66 ",(0,s.jsx)(n.code,{children:"reactive"})," \u4f86\u7ba1\u7406\uff0c\u4f46\u9019\u88e1\u9084\u662f\u5148\u4f86\u8b1b ",(0,s.jsx)(n.code,{children:"ref"}),"\u3002",(0,s.jsx)(n.br,{}),"\n",(0,s.jsx)(n.code,{children:"ref"})," \u7684\u4f7f\u7528\u4e0a\uff0c\u7576\u5728 ",(0,s.jsx)(n.code,{children:"<script setup>"})," \u4e2d\u4f7f\u7528 ",(0,s.jsx)(n.code,{children:"ref"})," \u7684\u503c\u6642\uff0c\u61c9\u8a72\u5728\u5176\u5f8c\u52a0\u4e0a ",(0,s.jsx)(n.code,{children:".value"}),"\u3002\u800c\u5728 ",(0,s.jsx)(n.code,{children:"<template>"})," \u4e2d\uff0c\u5247\u53ef\u4ee5\u76f4\u63a5\u4f7f\u7528 ",(0,s.jsx)(n.code,{children:"{{ref}}"})," \u4f86\u53d6\u5f97\u503c\u3002"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-xml",children:'<script setup>\nimport { ref } from \'vue\';\nconst num = ref(0)\n\x3c!-- highlight-next-line --\x3e\nconst changeNum = () => num.value += 1\n<\/script>\n\n<template>\n \x3c!-- highlight-next-line --\x3e\n <h1>{{ num }}</h1>\n \x3c!-- these two lines of code do the same thing --\x3e\n <button @click="changeNum">Add one</button>\n <button @click="num++">Add one</button>\n</template>\n'})}),"\n",(0,s.jsx)(n.admonition,{type:"warning",children:(0,s.jsxs)(n.p,{children:["\u6ce8\u610f\u5fc5\u9808\u4f7f\u7528 ",(0,s.jsx)(n.code,{children:"const"})," \u4f86\u5ba3\u544a ",(0,s.jsx)(n.code,{children:"ref"}),"\uff0c\u4e0d\u53ef\u4f7f\u7528 ",(0,s.jsx)(n.code,{children:"let"})," \u6216 ",(0,s.jsx)(n.code,{children:"var"}),"\uff01"]})}),"\n",(0,s.jsx)(n.h3,{id:"reactive",children:(0,s.jsx)(n.code,{children:"reactive"})}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"reactive"})," \u53ef\u4ee5\u5132\u5b58 object \u6216 array\u3002",(0,s.jsx)(n.br,{}),"\n","\u4f7f\u7528 ",(0,s.jsx)(n.code,{children:"reactive"})," \u7684\u503c\u6642\uff0c\u4e0d\u9700\u8981\u5728\u5176\u5f8c\u52a0\u4e0a ",(0,s.jsx)(n.code,{children:".value"}),"\u3002"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-xml",children:"<script setup>\nimport { reactive } from 'vue';\nconst people2 = reactive({\n name: 'Jeremy',\n gender: 'Male',\n age: 20\n})\n\nconst changePeople2 = () => {\n people2.name = 'Lucy'\n console.log('people2 changed')\n}\n<\/script>\n\n<template>\n <h1>{{ people2.name }} / {{ people2.gender }}</h1>\n <button @click=\"changePeople2\">Change!</button>\n</template>\n"})}),"\n",(0,s.jsxs)(n.admonition,{type:"info",children:[(0,s.jsxs)(n.h3,{id:"ref-\u8207-reactive-\u4e4b\u9593\u7684\u5dee\u7570",children:[(0,s.jsx)(n.code,{children:"ref"})," \u8207 ",(0,s.jsx)(n.code,{children:"reactive"})," \u4e4b\u9593\u7684\u5dee\u7570"]}),(0,s.jsxs)(n.p,{children:["\u9019\u5169\u8005\u4e4b\u9593\u7684\u5dee\u7570\u4e0d\u53ea\u9ad4\u73fe\u5728\u662f\u5426\u53d6\u503c\u6642\u9700\u8981\u52a0\u4e0a ",(0,s.jsx)(n.code,{children:".value"}),"\u3002",(0,s.jsx)(n.br,{}),"\n","\u7576 ",(0,s.jsx)(n.code,{children:"ref"})," \u7528\u4f86\u5132\u5b58 object \u6642\uff0cobject \u5167\u90e8\u7684\u5c6c\u6027\u8b8a\u5316\u53ef\u80fd\u4e0d\u6703\u88ab ",(0,s.jsx)(n.code,{children:"watch"})," \u6aa2\u6e2c\u5230\uff0c\u56e0\u70ba ",(0,s.jsx)(n.code,{children:"ref"})," \u4e3b\u8981\u662f\u7528\u4f86\u8ffd\u8e64\u76f4\u63a5\u5c0d\u5176\u503c\u7684\u8ce6\u503c\u3002\u53cd\u4e4b\uff0c\u4f7f\u7528 ",(0,s.jsx)(n.code,{children:"reactive"})," \u4f7f\u5f97 object \u5167\u90e8\u5c6c\u6027\u7684\u8b8a\u5316\u66f4\u5bb9\u6613\u88ab\u6aa2\u6e2c\u5230\u3002"]}),(0,s.jsxs)(n.p,{children:["\u4f46\u662f\u4f46\u662f~ \u5be6\u52d9\u4e0a\u9084\u662f\u5f88\u559c\u6b61\u76f4\u63a5\u7121\u8166\u7528 ",(0,s.jsx)(n.code,{children:"ref"})," \u4f86\u5b58 object \u6216 array\uff0c\u53c8\u60f3\u8981 ",(0,s.jsx)(n.code,{children:"watch"})," \u80fd\u5920\u5075\u6e2c\u5230 object \u5167\u90e8\u5c6c\u6027\u7684\u8b8a\u5316\u600e\u9ebc\u8fa6\uff1f",(0,s.jsx)(n.br,{}),"\n","\u9019\u6642\u53ef\u4ee5\u5728\u4f7f\u7528 ",(0,s.jsx)(n.code,{children:"watch"})," \u6642\u52a0\u4e0a\u7b2c\u4e09\u500b\u53c3\u6578 ",(0,s.jsx)(n.code,{children:"deep: true"}),"\uff0c\u9019\u6a23 ",(0,s.jsx)(n.code,{children:"watch"})," \u5c31\u80fd\u5920\u5075\u6e2c\u5230 ",(0,s.jsx)(n.code,{children:"ref"})," object \u5167\u90e8\u5c6c\u6027\u7684\u8b8a\u5316\u4e86\u3002"]}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:"watch(people1, () => {\n console.log('something changed')\n}, {deep : true})\n"})})]}),"\n",(0,s.jsx)(n.h3,{id:"computed",children:(0,s.jsx)(n.code,{children:"computed"})}),"\n",(0,s.jsxs)(n.p,{children:["Vue \u9084\u63d0\u4f9b\u4e86 ",(0,s.jsx)(n.code,{children:"computed"})," \u9019\u500b\u5c6c\u6027\uff0c",(0,s.jsx)(n.code,{children:"computed"})," \u6703\u5728\u5176\u4f9d\u8cf4\u7684\u6578\u64da\u767c\u751f\u8b8a\u5316\u6642\u81ea\u52d5\u91cd\u65b0\u8a08\u7b97\u3002",(0,s.jsx)(n.br,{}),"\n",(0,s.jsx)(n.code,{children:"computed"})," \u901a\u5e38\u7528\u65bc\u9700\u8981\u6839\u64da\u67d0\u4e9b\u6578\u64da\u81ea\u52d5\u66f4\u65b0\u7684\u8907\u96dc\u908f\u8f2f\uff0c\u5be6\u52d9\u4e0a\u4e5f\u633a\u5e38\u7528\u5728 i18n \u5207\u63db\u8a9e\u7cfb\u3002",(0,s.jsx)(n.br,{}),"\n","\u4ee5\u4e0b\u7bc4\u4f8b\u793a\u7bc4\u672a\u4f7f\u7528 ",(0,s.jsx)(n.code,{children:"computed"})," \u548c\u4f7f\u7528 ",(0,s.jsx)(n.code,{children:"computed"})," \u7684\u5dee\u7570\uff1a"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-xml",metastring:"title='Before use computed'",children:"<script setup>\nimport { ref } from 'vue';\nconst num1 = ref(1)\nconst num2 = ref(2)\n<\/script>\n\n<template>\n <h1>Num1: {{ num1 }}</h1>\n <h1>Num2: {{ num2 }}</h1>\n <h1>Num1 + Num2 = {{ num1 + num2 }}</h1>\n</template>\n"})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-xml",metastring:"title='After use computed'",children:"<script setup>\nimport { ref, computed } from 'vue';\nconst num1 = ref(1)\nconst num2 = ref(2)\n\nconst numPlus = computed(()=>{\n return num1.value + num2.value\n})\n<\/script>\n\n<template>\n <h1>Num1: {{ num1 }}</h1>\n <h1>Num2: {{ num2 }}</h1>\n <h1>Num1 + Num2 = {{ numPlus }}</h1>\n</template>\n"})}),"\n",(0,s.jsxs)(n.p,{children:["\u53ef\u4ee5\u5f9e\u4e0a\u9762\u7684\u7bc4\u4f8b\u4e2d\u89c0\u5bdf\u5230\uff0c\u4f7f\u7528 ",(0,s.jsx)(n.code,{children:"computed"})," \u5f8c\u53ef\u4ee5\u628a\u6240\u6709\u908f\u8f2f\u90fd\u653e\u5728 ",(0,s.jsx)(n.code,{children:"<script setup>"})," \u4e2d\u3002"]}),"\n",(0,s.jsxs)(n.admonition,{type:"info",children:[(0,s.jsxs)(n.h3,{id:"method-\u8207-computed-\u7684\u5dee\u7570",children:["method \u8207 ",(0,s.jsx)(n.code,{children:"computed"})," \u7684\u5dee\u7570"]}),(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"computed"})," \u53ea\u6709\u5728\u5176\u4f9d\u8cf4\u7684\u6578\u64da\u767c\u751f\u8b8a\u5316\u6642\u624d\u6703\u57f7\u884c\u3002"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"computed"}
1)," \u4e0d\u53ef\u4ee5\u50b3\u53c3\u6578\u3002"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"computed"})," \u9810\u8a2d\u53ea\u6709 ",(0,s.jsx)(n.code,{children:"getter"}),"\u3002"]}),"\n"]})]}),"\n",(0,s.jsx)(n.h2,{id:"reference",children:"Reference"}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"https://cn.vuejs.org/guide/quick-start.html",children:"Vue.js"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"https://www.youtube.com/watch?v=rNQIA0Fe9KQ",children:"Vue3 + Vite \u5feb\u901f\u4e0a\u624b Get Startrd EP1 - \u521d\u63a2 Vite \u5c08\u6848 / Vue3 \u521d\u5b78\u8005\u61c9\u8a72\u8981\u5148\u77e5\u9053\u7684\u6771\u897f / \u525b\u958b\u59cb\u5beb Composition API \u6703\u72af\u7684\u932f\u8aa4 !"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"https://www.youtube.com/watch?v=gJF5Cf2fz1A",children:"Vue3 + Vite \u5feb\u901f\u4e0a\u624b Get Startrd EP2 - \u5b9a\u7fa9\u8cc7\u6599 ref\u3001reactive\u3001computed \u6df1\u5ea6\u63a2\u8a0e"})}),"\n"]})]})}function h(e={}){const{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(a,{...e})}):a(e)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.