docs__myblog__frame__vue_02.md.js

(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([[69],{"EQ1+":function(e,n,t){"use strict";t.r(n);var l=t("q1tI"),a=t.n(l),c=t("dEAq"),o=t("H1Ra"),r=a.a.memo((e=>{e.demos;return a.a.createElement(a.a.Fragment,null,a.a.createElement("div",{className:"markdown"},a.a.createElement("h1",{id:"vue3tsvite-\u7ec4\u5408\u5f0f-api-\u77e5\u8bc6\u70b9"},a.a.createElement(c["AnchorLink"],{to:"#vue3tsvite-\u7ec4\u5408\u5f0f-api-\u77e5\u8bc6\u70b9","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"vue3+ts+vite \u7ec4\u5408\u5f0f api \u77e5\u8bc6\u70b9"),a.a.createElement("h2",{id:"1ref-\u548c-reactive"},a.a.createElement(c["AnchorLink"],{to:"#1ref-\u548c-reactive","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"1\u3001ref \u548c reactive"),a.a.createElement("ul",null,a.a.createElement("li",null,a.a.createElement("code",null,"ref"),":\u7528\u6765\u7ed9\u57fa\u672c\u6570\u636e\u7c7b\u578b\u7ed1\u5b9a\u54cd\u5e94\u5f0f\u6570\u636e\uff0c",a.a.createElement("code",null,"script"),"\u91cc\u9762\u8bbf\u95ee\u65f6\u9700\u8981\u901a\u8fc7 ",a.a.createElement("code",null,".value")," \u7684\u5f62\u5f0f\uff0c ",a.a.createElement("code",null,"tamplate"),"\u91cc\u9762\u4f7f\u7528\u7684\u65f6\u5019\u4f1a\u81ea\u52a8\u89e3\u6790,\u4e0d\u9700\u8981",a.a.createElement("code",null,".value")),a.a.createElement("li",null,a.a.createElement("code",null,"reactive"),": \u7528\u6765\u7ed9\u590d\u6742\u6570\u636e\u7c7b\u578b\u7ed1\u5b9a\u54cd\u5e94\u5f0f\u6570\u636e\uff0c\u76f4\u63a5\u8bbf\u95ee\u5373\u53ef;")),a.a.createElement(o["a"],{code:'<template>\n  <p>{{ count }}</p>\n  <a-button @click="handleAdd">\u70b9\u51fb+1</a-button>\n  <p>{{ person.age }}</p>\n  <a-button @click="handleAddAge">\u5e74\u9f84+1</a-button>\n</template>\n<script setup lang="ts">\nimport { ref, Ref, reactive } from "vue";\n\n//\u7528\u63a5\u53e3\u6765\u5b9a\u4e49\u5bf9\u8c61\u7684\u7c7b\u578b\ninterface Person {\n  name: string;\n  age: number;\n  sex?: string;\n}\n\nconst count: Ref<number> = ref(0);\nconst handleAdd = () => {\n  count.value++;\n};\nconst person: Person = reactive({\n  name: "\u674e\u5b50\u6728",\n  age: 18,\n});\nconst handleAddAge = () => {\n  person.age++;\n  console.log(person); //{name: \'\u674e\u5b50\u6728\', age: 24}\n};\n<\/script>\n<style scoped>\n.read-the-docs {\n  color: #888;\n}\n</style>',lang:"js"}),a.a.createElement("p",null,a.a.createElement("strong",null,"ref \u548c reactive \u7684\u533a\u522b")),a.a.createElement("ol",null,a.a.createElement("li",null,"\u4ece\u5b9a\u4e49\u6570\u636e\u65b9\u9762\uff1a",a.a.createElement("ul",null,a.a.createElement("li",null,a.a.createElement("code",null,"ref")," \u901a\u5e38\u7528\u6765\u5b9a\u4e49\u57fa\u672c\u7c7b\u578b\u6570\u636e"),a.a.createElement("li",null,a.a.createElement("code",null,"reactive")," \u7528\u6765\u5b9a\u4e49\uff1a\u5bf9\u8c61\uff08\u6216\u8005\u6570\u7ec4\uff09\u7c7b\u578b\u6570\u636e"),a.a.createElement("li",null,a.a.createElement("code",null,"ref")," \u4e5f\u53ef\u4ee5\u7528\u6765\u5b9a\u4e49\u5bf9\u8c61\u6216\u8005\u6570\u7ec4\u7c7b\u578b\u7684\u6570\u636e\uff0c\u5185\u90e8\u4f1a\u901a\u8fc7 ",a.a.createElement("code",null,"reactive")," \u8f6c\u4e3a\u4ee3\u7406\u5bf9\u8c61"))),a.a.createElement("li",null,"\u4ece\u539f\u7406\u65b9\u9762\uff1a",a.a.createElement("ul",null,a.a.createElement("li",null,a.a.createElement("code",null,"ref")," \u901a\u8fc7 ",a.a.createElement("code",null,"Object.defineProperty()"),"\u7684 ",a.a.createElement("code",null,"get")," \u548c ",a.a.createElement("code",null,"set")," \u5b9e\u73b0\u6570\u636e\u4ee3\u7406\u3002"),a.a.createElement("li",null,a.a.createElement("code",null,"reactive")," \u4f7f\u7528 ",a.a.createElement("code",null,"Proxy")," \u5b9e\u73b0\u6570\u636e\u4ee3\u7406\uff0c\u5e76\u4e14\u901a\u8fc7 ",a.a.createElement("code",null,"Reflect")," \u64cd\u4f5c\u6e90\u5bf9\u8c61\u5185\u90e8\u7684\u6570\u636e\u3002"))),a.a.createElement("li",null,"\u4ece\u4f7f\u7528\u65b9\u9762\uff1a",a.a.createElement("ul",null,a.a.createElement("li",null,a.a.createElement("code",null,"ref")," \u5728",a.a.createElement("code",null,"script"),"\u4e2d\u64cd\u4f5c\u6570\u636e\u9700\u8981",a.a.createElement("code",null,".value"),",\u5728",a.a.createElement("code",null,"template")," \u6a21\u677f\u4e2d\u4e0d\u9700\u8981\u3002"),a.a.createElement("li",null,a.a.createElement("code",null,"reactive")," \u90fd\u4e0d\u9700\u8981",a.a.createElement("code",null,".value")),a.a.createElement("li",null,a.a.createElement("code",null,"ref"),"\u51fd\u6570\u53ea\u80fd\u64cd\u4f5c\u6d45\u5c42\u6b21\u7684\u6570\u636e\uff0c\u628a\u57fa\u672c\u6570\u636e\u7c7b\u578b\u5f53\u4f5c\u81ea\u5df1\u7684\u5c5e\u6027\u503c\uff1b\u6df1\u5c42\u6b21\u4f9d\u8d56\u4e8e ",a.a.createElement("code",null,"reactive"))))),a.a.createElement("h2",{id:"2toreftorefstoraw"},a.a.createElement(c["AnchorLink"],{to:"#2toreftorefstoraw","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"2\u3001toRef\u3001toRefs\u3001toRaw"),a.a.createElement("ul",null,a.a.createElement("li",null,a.a.createElement("p",null,a.a.createElement("code",null,"toRef"),": \u5982\u679c\u539f\u59cb\u5bf9\u8c61\u662f\u975e\u54cd\u5e94\u5f0f\u7684,\u6570\u636e\u4f1a\u53d8,\u4f46\u4e0d\u4f1a\u66f4\u65b0\u89c6\u56fe"),a.a.createElement(o["a"],{code:'<template>\n  <p>{{ state1 }}</p>\n  <a-button @click="handleAddAge1">\u5e74\u9f84+1</a-button>\n</template>\n<script setup lang="ts">\nimport { ref, Ref, reactive, toRef } from "vue";\n\n//\u8fd9\u6837\u5199\u662f\u4e0d\u4f1a\u66f4\u65b0\u89c6\u56fe\u7684\uff0c\u8981\u7528\u4e0b\u9762\u7684\u8fd9\u79cd\u5199\u6cd5\nconst person = {\n  name: "\u674e\u5b50\u6728",\n  age: 18,\n};\nconst handleAddAge = () => {\n  person.age++;\n  console.log(person); //{name: \'\u674e\u5b50\u6728\', age: 24}\n};\n// \u4f7f\u7528toRef\u6765\u8fbe\u5230\u6570\u636e\u66f4\u65b0\u7684\u76ee\u7684\uff0c\u4f46\u662f\u9875\u9762\u89c6\u56fe\u662f\u4e0d\u4f1a\u66f4\u65b0\u7684\nconst person1 = {\n  name: "\u674e\u5b50\u6728",\n  age: 18,\n};\nconst state1 = toRef(person1, "age");\nconst handleAddAge1 = () => {\n  state1.value++;\n  console.log("person1", person1, "state1", state1);\n};\n<\/script>\n<style scoped>\n.read-the-docs {\n  color: #888;\n}\n</style>',lang:"js"}),a.a.createElement("blockquote",null,a.a.createElement("p",null,a.a.createElement("code",null,"toRef")," \u8fd4\u56de\u7684\u503c\u662f\u5426\u5177\u6709\u54cd\u5e94\u6027\u53d6\u51b3\u4e8e\u88ab\u89e3\u6784\u7684\u5bf9\u8c61\u672c\u8eab\u662f\u5426\u5177\u6709\u54cd\u5e94\u6027\u3002\u54cd\u5e94\u5f0f\u6570\u636e\u7ecf\u8fc7 ",a.a.createElement("code",null,"toRef")," \u8fd4\u56de\u7684\u503c\u4ecd\u5177\u6709\u54cd\u5e94\u6027\uff0c\u975e\u54cd\u5e94\u5f0f\u6570\u636e\u7ecf\u8fc7 ",a.a.createElement("code",null,"toRef")," \u8fd4\u56de\u7684\u503c\u4ecd\u6ca1\u6709\u54cd\u5e94\u6027\u3002"))),a.a.createElement("li",null,a.a.createElement("p",null,a.a.createElement("code",null,"toRefs"),": \u76f8\u5f53\u4e8e\u5bf9\u5bf9\u8c61\u5185\u6bcf\u4e2a\u5c5e\u6027\u8c03\u7528 ",a.a.createElement("code",null,"toRef"),",",a.a.createElement("code",null,"toRefs")," \u8fd4\u56de\u7684\u5bf9\u8c61\u5185\u7684\u5c5e\u6027\u4f7f\u7528\u65f6\u9700\u8981\u52a0",a.a.createElement("code",null,".value"),",\u4e3b\u8981\u662f\u65b9\u4fbf\u6211\u4eec\u89e3\u6784\u4f7f\u7528"),a.a.createElement(o["a"],{code:'<template>\n  <p>{{ name }}---{{ age }}</p>\n  <a-button @click="handleAddAge">\u70b9\u51fb+1</a-button>\n</template>\n<script setup lang="ts">\nimport { ref, Ref, reactive, toRefs } from "vue";\nconst person = reactive({\n  name: "\u674e\u5b50\u6728",\n  age: 18,\n});\nlet { name, age } = toRefs(person);\nconst handleAddAge = () => {\n  name.value = "\u674e\u5b50\u67d2";\n  age.value = 19;\n};\n<\/script>\n\n<style scoped>\n  .read-the-docs {\n    color: #888;\n  }\n</style>',lang:"js"}),a.a.createElement("blockquote",null,a.a.createElement("p",null,"\u5bf9\u8c61\u5fc5\u987b\u4e5f\u662f\u54cd\u5e94\u5f0f\u7684\uff0c\u8981\u4e0d\u7136\u89c6\u56fe\u4e5f\u4e0d\u4f1a\u66f4\u65b0"))),a.a.createElement("li",null,a.a.createElement("p",null,a.a.createElement("code",null,"toRaw"),":\u5c06\u54cd\u5e94\u5f0f\u5bf9\u8c61\u4fee\u6539\u4e3a\u666e\u901a\u5bf9\u8c61\uff0c\u4ece\u54cd\u5e94\u5f0f\u6570\u636e\u53d8\u6210\u4e0d\u662f\u54cd\u5e94\u5f0f\u6570\u636e"))),a.a.createElement(o["a"],{code:'<template>\n    <p>{{ data.name }}---{{ data.age }}</p>\n    <a-button @click="handleAddAge">\u70b9\u51fb+1</a-button>\n  </template>\n  <script setup lang="ts">\n  import { ref, Ref, reactive, toRefs, toRaw } from "vue";\n\n  const person = reactive({\n    name: "\u674e\u5b50\u6728",\n    age: 18,\n  });\n  let data = toRaw(person);\n  const handleAddAge = () => {\n    data.name = "\u674e\u5b50\u67d2";\n    data.age = 19;\n    console.log(data);\n  };\n  <\/script>\n  <style scoped>\n  .read-the-docs {\n    color: #888;\n  }\n  </style>',lang:"js"}),a.a.createElement("h2",{id:"3computed"},a.a.createElement(c["AnchorLink"],{to:"#3computed","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"3\u3001computed"),a.a.createElement("p",null,a.a.createElement("code",null,"computed"),"\u5c5e\u6027 ",a.a.createElement("code",null,"vue2")," \u548c ",a.a.createElement("code",null,"vue3")," \u7684\u7528\u6cd5\u5dee\u4e0d\u591a"),a.a.createElement(o["a"],{code:'<template>\n    <p>computed:{{ add }}</p>\n    \x3c!-- <a-button @click="handleAdd">\u70b9\u51fb+1</a-button> --\x3e\n  </template>\n  <script setup lang="ts">\n  import { ref, Ref, computed } from "vue";\n\n  const count: Ref<number> = ref(0);\n  const add = computed(() => {\n    count.value++;\n    return count;\n  });\n  <\/script>\n  <style scoped>\n    .read-the-docs {\n      color: #888;\n    }\n  </style>',lang:"js"}),a.a.createElement("h2",{id:"4watch"},a.a.createElement(c["AnchorLink"],{to:"#4watch","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"4\u3001watch"),a.a.createElement("p",null,a.a.createElement("code",null,"vue3")," ",a.a.createElement("code",null,"watch")," \u7684\u4f5c\u7528\u548c ",a.a.createElement("code",null,"Vue2")," \u4e2d\u7684 ",a.a.createElement("code",null,"watch")," \u4f5c\u7528\u662f\u4e00\u6837\u7684\uff0c\u4ed6\u4eec\u90fd\u662f\u7528\u6765\u76d1\u542c\u54cd\u5e94\u5f0f\u72b6\u6001\u53d1\u751f\u53d8\u5316\u7684\uff0c\u5f53\u54cd\u5e94\u5f0f\u72b6\u6001\u53d1\u751f\u53d8\u5316\u65f6\uff0c\u5c31\u4f1a\u89e6\u53d1\u4e00\u4e2a\u56de\u8c03\u51fd\u6570\u3002"),a.a.createElement("p",null,"\u5f53 ",a.a.createElement("code",null,"watch")," \u76d1\u542c\u7684\u662f\u4e00\u4e2a\u54cd\u5e94\u5f0f\u5bf9\u8c61\u65f6\uff0c\u4f1a\u9690\u5f0f\u5730\u521b\u5efa\u4e00\u4e2a\u6df1\u5c42\u4fa6\u542c\u5668\uff0c\u5373\u8be5\u54cd\u5e94\u5f0f\u5bf9\u8c61\u91cc\u9762\u7684\u4efb\u4f55\u5c5e\u6027\u53d1\u751f\u53d8\u5316\uff0c\u90fd\u4f1a\u89e6\u53d1\u76d1\u542c\u51fd\u6570\u4e2d\u7684\u56de\u8c03\u51fd\u6570\u3002\u5373\u5f53 ",a.a.createElement("code",null,"watch")," \u76d1\u542c\u7684\u662f\u4e00\u4e2a\u54cd\u5e94\u5f0f\u5bf9\u8c61\u65f6\uff0c\u9ed8\u8ba4\u5f00\u542f ",a.a.createElement("code",null,"deep\uff1atrue")),a.a.createElement("ul",null,a.a.createElement("li",null,"\u53ef\u4ee5\u76d1\u542c\u67d0\u4e2a ",a.a.createElement("code",null,"ref")," \u5bf9\u8c61\u3002\u6b64\u65f6 ",a.a.createElement("code",null,"watch")," \u7684\u7b2c\u4e00\u4e2a\u53c2\u6570\u53ef\u4ee5\u76f4\u63a5\u662f ",a.a.createElement("code",null,"ref")),a.a.createElement("li",null,"\u53ef\u4ee5\u76d1\u542c\u67d0\u4e2a ",a.a.createElement("code",null,"reactive")," \u5bf9\u8c61\u3002\u6b64\u65f6 ",a.a.createElement("code",null,"watch")," \u7684\u7b2c\u4e00\u4e2a\u53c2\u6570\u5fc5\u987b\u662f\u4e00\u4e2a\u51fd\u6570"),a.a.createElement("li",null,"\u5bf9\u4e8e ",a.a.createElement("code",null,"props")," \u5bf9\u8c61\u3002\u6211\u4eec\u8fdb\u884c\u76d1\u542c\u7684\u65f6\u5019\u4e5f\u5fc5\u987b\u91c7\u7528\u51fd\u6570\u7684\u5f62\u5f0f\uff0c\u54ea\u6015\u76d1\u542c\u7684\u662f ",a.a.createElement("code",null,"props")," \u4e2d\u67d0\u4e2a\u5bf9\u8c61\u7684\u5c5e\u6027\u3002")),a.a.createElement(o["a"],{code:'<template>\n    <p>\u4ef7\u683c\uff1a<a-input v-model:value="price" /></p>\n    <p>\u6570\u91cf\uff1a<a-input v-model:value="num" /></p>\n    <p>\u603b\u4ef7\uff1a{{ total }}</p>\n    \x3c!-- <a-button @click="handleAdd">\u70b9\u51fb+1</a-button> --\x3e\n  </template>\n  <script setup lang="ts">\n  import { ref, Ref, computed, watch } from "vue";\n\n  const price: Ref<string> = ref("");\n  const num: Ref<string> = ref("");\n  let total: Ref<number> = ref(0);\n  //\u53f3\u8fb9\u7684\u5c5e\u6027\u5fc5\u987b\u8f6c\u6362\u6210\u5de6\u8fb9\u7684\u5c5e\u6027\uff0c\u8981\u4e0d\u7136ts\u5c31\u4f1a\u62a5\u7ea2\u8272\u8b66\u544a\n  watch([price, num], (val) => {\n    total.value = +val[0] * +val[1];\n  });\n  <\/script>\n  <style scoped>\n  .read-the-docs {\n    color: #888;\n  }\n  </style>',lang:"js"}),a.a.createElement("h2",{id:"5watcheffect"},a.a.createElement(c["AnchorLink"],{to:"#5watcheffect","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"5\u3001WatchEffect"),a.a.createElement("p",null,"\u4f1a\u7acb\u5373\u6267\u884c\u4f20\u5165\u7684\u4e00\u4e2a\u51fd\u6570\uff0c\u540c\u65f6\u54cd\u5e94\u5f0f\u8ffd\u8e2a\u5176\u4f9d\u8d56\uff0c\u5e76\u5728\u5176\u4f9d\u8d56\u53d8\u66f4\u65f6\u91cd\u65b0\u8fd0\u884c\u8be5\u51fd\u6570\u3002\uff08\u6709\u70b9\u50cf\u8ba1\u7b97\u5c5e\u6027\uff09 \u5982\u679c\u7528\u5230 a \u5c31\u53ea\u4f1a\u76d1\u542c a, \u5c31\u662f\u7528\u5230\u51e0\u4e2a\u76d1\u542c\u51e0\u4e2a \u800c\u4e14\u662f\u975e\u60f0\u6027,\u4f1a\u9ed8\u8ba4\u8c03\u7528\u4e00\u6b21"),a.a.createElement("ul",null,a.a.createElement("li",null,a.a.createElement("p",null,"\u505c\u6b62\u76d1\u542c \u5f53 ",a.a.createElement("code",null,"watchEffect")," \u5728\u7ec4\u4ef6\u7684 ",a.a.createElement("code",null,"setup()")," \u51fd\u6570\u6216\u751f\u547d\u5468\u671f\u94a9\u5b50\u88ab\u8c03\u7528\u65f6\uff0c\u4fa6\u542c\u5668\u4f1a\u88ab\u94fe\u63a5\u5230\u8be5\u7ec4\u4ef6\u7684\u751f\u547d\u5468\u671f\uff0c\u5e76\u5728\u7ec4\u4ef6\u5378\u8f7d\u65f6\u81ea\u52a8\u505c\u6b62\u3002\u4f46\u662f\u6211\u4eec\u91c7\u7528\u5f02\u6b65(\u4f8b\u5982\u5728",a.a.createElement("code",null,"setTimeout"),"\u91cc\u9762)\u7684\u65b9\u5f0f\u521b\u5efa\u4e86\u4e00\u4e2a\u76d1\u542c\u5668\uff0c\u8fd9\u4e2a\u65f6\u5019\u76d1\u542c\u5668\u6ca1\u6709\u4e0e\u5f53\u524d\u7ec4\u4ef6\u7ed1\u5b9a\uff0c\u6240\u4ee5\u5373\u4f7f\u7ec4\u4ef6\u9500\u6bc1\u4e86\uff0c\u76d1\u542c\u5668\u4f9d\u7136\u5b58\u5728\u3002"),a.a.createElement(o["a"],{code:"<script setup lang=\"ts\">\n    import { watchEffect } from 'vue';\n    // \u5b83\u4f1a\u81ea\u52a8\u505c\u6b62\n    watchEffect(() => {});\n    // ...\u8fd9\u4e2a\u5219\u4e0d\u4f1a\uff01\n    setTimeout(() => {\n      watchEffect(() => {});\n    }, 100);\n\n    const stop = watchEffect(() => {\n      /* ... */\n    });\n\n    // \u663e\u5f0f\u8c03\u7528\n    stop();\n    <\/script>",lang:"js"})),a.a.createElement("li",null,a.a.createElement("p",null,"\u6e05\u9664\u526f\u4f5c\u7528\uff08onInvalidate\uff09",a.a.createElement("code",null,"watchEffect")," \u7684\u7b2c\u4e00\u4e2a\u53c2\u6570\u2014\u2014",a.a.createElement("code",null,"effect")," \u51fd\u6570\u2014\u2014\u53ef\u4ee5\u63a5\u6536\u4e00\u4e2a\u53c2\u6570\uff1a\u53eb ",a.a.createElement("code",null,"onInvalidate"),"\uff0c\u4e5f\u662f\u4e00\u4e2a\u51fd\u6570\uff0c\u7528\u4e8e\u6e05\u9664 ",a.a.createElement("code",null,"effect")," \u4ea7\u751f\u7684\u526f\u4f5c\u7528\u5c31\u662f\u5728\u89e6\u53d1\u76d1\u542c\u4e4b\u524d\u4f1a\u8c03\u7528\u4e00\u4e2a\u51fd\u6570\u53ef\u4ee5\u5904\u7406\u4f60\u7684\u903b\u8f91\uff0c\u4f8b\u5982\u9632\u6296"),a.a.createElement(o["a"],{code:"import { ref, watchEffect } from 'vue';\nlet num = ref(0);\n\n//3s\u540e\u6539\u53d8\u503c\nsetTimeout(() => {\n  num.value++;\n}, 3000);\n\nwatchEffect(onInvalidate => {\n  console.log(num.value);\n  onInvalidate(() => {\n    console.log('\u6267\u884c');\n  });\n});\n//\u6267\u884c\u987a\u5e8f0 \u6267\u884c 1",lang:"js"})),a.a.createElement("li",null,a.a.createElement("p",null,"\u914d\u7f6e\u9009\u9879",a.a.createElement("code",null,"watchEffect")," \u7684\u7b2c\u4e8c\u4e2a\u53c2\u6570\uff0c\u7528\u6765\u5b9a\u4e49\u526f\u4f5c\u7528\u5237\u65b0\u65f6\u673a\uff0c\u53ef\u4ee5\u4f5c\u4e3a\u4e00\u4e2a\u8c03\u8bd5\u5668\u6765\u4f7f\u7528"),a.a.createElement("p",null,a.a.createElement("strong",null,"flush(\u66f4\u65b0\u65f6\u673a)\uff1a")),a.a.createElement("ol",null,a.a.createElement("li",null,a.a.createElement("code",null,"pre"),"\uff1a\u7ec4\u4ef6\u66f4\u65b0\u524d\u6267\u884c"),a.a.createElement("li",null,a.a.createElement("code",null,"sync"),"\uff1a\u5f3a\u5236\u6548\u679c\u59cb\u7ec8\u540c\u6b65\u89e6\u53d1"),a.a.createElement("li",null,a.a.createElement("code",null,"post"),"\uff1a\u7ec4\u4ef6\u66f4\u65b0\u540e\u6267\u884c")),a.a.createElement(o["a"],{code:'<script setup lang="ts">\n  import { ref, watchEffect } from "vue";\n  let num = ref(0)\n\n  //3s\u540e\u6539\u53d8\u503c\n  setTimeout(() => {\n    num.value++\n  }, 3000)\n\n  watchEffect((onInvalidate) => {\n    console.log(num.value)\n    onInvalidate(() => {\n      console.log(\'\u6267\u884c\');\n    });\n  }, {\n    flush: "post", //\u6b64\u65f6\u8fd9\u4e2a\u51fd\u6570\u4f1a\u5728\u7ec4\u4ef6\u66f4\u65b0\u4e4b\u540e\u53bb\u6267\u884c\n    onTrigger(e) { //\u4f5c\u4e3a\u4e00\u4e2a\u8c03\u8bd5\u5de5\u5177\uff0c\u53ef\u5728\u5f00\u53d1\u4e2d\u65b9\u4fbf\u8c03\u8bd5\n      console.log(\'\u89e6\u53d1\', e);\n    },\n  })\n  <\/script>',lang:"js"}))),a.a.createElement("h2",{id:"6\u751f\u547d\u5468\u671f"},a.a.createElement(c["AnchorLink"],{to:"#6\u751f\u547d\u5468\u671f","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"6\u3001\u751f\u547d\u5468\u671f"),a.a.createElement("img",{src:t("cRHV")}),a.a.createElement("h2",{id:"7\u7236\u5b50\u7ec4\u4ef6\u4f20\u53c2\u548c\u56de\u8c03\u4ee5\u53ca\u8c03\u7528\u5b50\u7ec4\u4ef6\u7684\u65b9\u6cd5\u548c\u5c5e\u6027"},a.a.createElement(c["AnchorLink"],{to:"#7\u7236\u5b50\u7ec4\u4ef6\u4f20\u53c2\u548c\u56de\u8c03\u4ee5\u53ca\u8c03\u7528\u5b50\u7ec4\u4ef6\u7684\u65b9\u6cd5\u548c\u5c5e\u6027","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"7\u3001\u7236\u5b50\u7ec4\u4ef6\u4f20\u53c2\u548c\u56de\u8c03\u4ee5\u53ca\u8c03\u7528\u5b50\u7ec4\u4ef6\u7684\u65b9\u6cd5\u548c\u5c5e\u6027"),a.a.createElement("ul",null,a.a.createElement("li",null,a.a.createElement("code",null,"defineProps")," \u6765\u63a5\u6536\u7236\u7ec4\u4ef6\u4f20\u9012\u7684\u503c\uff0c ",a.a.createElement("code",null,"defineProps"),"\u662f\u65e0\u987b\u5f15\u5165\u7684\u76f4\u63a5\u4f7f\u7528\u5373\u53ef"),a.a.createElement("li",null,a.a.createElement("code",null,"withDefaults")," \u5b9a\u4e49\u9ed8\u8ba4\u503c"),a.a.createElement("li",null,a.a.createElement("code",null,"defineEmits")," \u5b50\u7ec4\u4ef6\u6d3e\u53d1\u4e8b\u4ef6"),a.a.createElement("li",null,a.a.createElement("code",null,"defineExpose")," \u83b7\u53d6\u5b50\u7ec4\u4ef6\u7684\u5b9e\u4f8b\u548c\u5185\u90e8\u5c5e\u6027\uff0c\u5fc5\u987b\u5728\u5b50\u7ec4\u4ef6\u7528\u6539\u51fd\u6570\u66b4\u9732\u51fa\u6765")),a.a.createElement(o["a"],{code:'//\u7236\u7ec4\u4ef6\n  <template>\n    <HelloWorld\n      ref="childRef"\n      msg="Vite + Vue"\n      :count="0"\n      :list="list"\n      @callback="hanldeGetParams"\n    />\n  </template>\n  <script setup lang="ts">\n  import { ref, onMounted, reactive, nextTick } from "vue";\n  import HelloWorld from "./components/HelloWorld.vue";\n  const list = reactive<number[]>([1, 2, 3]);\n  const hanldeGetParams = (val: string) => {\n    console.log(val);\n  };\n  const childRef = ref<InstanceType<typeof HelloWorld>>();\n  onMounted(() => {\n    console.log(childRef.value?.num);\n  });\n  <\/script>\n\n  <style scoped>\n  .logo {\n    height: 6em;\n    padding: 1.5em;\n    will-change: filter;\n    transition: filter 300ms;\n  }\n  .logo:hover {\n    filter: drop-shadow(0 0 2em #646cffaa);\n  }\n  .logo.vue:hover {\n    filter: drop-shadow(0 0 2em #42b883aa);\n  }\n  </style>\n\n\n//\u5b50\u7ec4\u4ef6HelloWorld\u63a5\u6536\n  <template>\n    <div>{{ msg }}--{{ count }}</div>\n    {{ list }} {{ num }}\n    <a-button @click="handleParent">\u7ed9\u7236\u7ec4\u4ef6\u8fd4\u56de\u53c2\u6570</a-button>\n  </template>\n  <script setup lang="ts">\n  import { ref, Ref, watchEffect } from "vue";\n  //\u83b7\u53d6\u53c2\u6570\n  type Props = {\n    msg: string;\n    count: number;\n    list: Array<number>;\n  };\n  const num: Ref<number> = ref(0);\n  //\u9ed8\u8ba4\u53c2\u6570\n  withDefaults(defineProps<Props>(), {\n    msg: "1222",\n  });\n  //\u5b50\u7ec4\u4ef6\u4e8b\u4ef6\u6d3e\u53d1\n  const emits = defineEmits(["callback"]);\n  const handleParent = () => {\n    emits("callback", "\u8fd9\u662f\u5b50\u7ec4\u4ef6\u7ed9\u7236\u7ec4\u4ef6\u7684\u53c2\u6570");\n  };\n  //\u66b4\u9732\u5b50\u7ec4\u4ef6\u65b9\u6cd5\n  defineExpose({\n    num,\n  });\n  <\/script>\n  <style scoped>\n  .read-the-docs {\n    color: #888;\n  }\n  </style>',lang:"js"}),a.a.createElement("h2",{id:"8\u63d2\u69fd"},a.a.createElement(c["AnchorLink"],{to:"#8\u63d2\u69fd","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"8\u3001\u63d2\u69fd"),a.a.createElement(o["a"],{code:'//\u7236\u7ec4\u4ef6\n<HelloWorld>\n  <template v-slot:content="{ msg }">\n    <div>{{ msg }}</div>\n  </template>\n</HelloWorld>\n//\u5b50\u7ec4\u4ef6\n<div>\n  <slot name="content" msg="hello!"></slot>\n</div>',lang:"js"}),a.a.createElement("h2",{id:"9keep-alive-\u7f13\u5b58\u7ec4\u4ef6"},a.a.createElement(c["AnchorLink"],{to:"#9keep-alive-\u7f13\u5b58\u7ec4\u4ef6","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"9\u3001keep-alive \u7f13\u5b58\u7ec4\u4ef6"),a.a.createElement("ul",null,a.a.createElement("li",null,"\u4f5c\u7528\u548c ",a.a.createElement("code",null,"vue2")," \u4e00\u81f4\uff0c\u53ea\u662f\u751f\u547d\u5468\u671f\u540d\u79f0\u6709\u6240\u66f4\u6539"),a.a.createElement("li",null,"\u521d\u6b21\u8fdb\u5165\u65f6\uff1a",a.a.createElement("code",null,"onMounted> onActivated")),a.a.createElement("li",null,"\u9000\u51fa\u540e\u89e6\u53d1 ",a.a.createElement("code",null,"deactivated")),a.a.createElement("li",null,"\u518d\u6b21\u8fdb\u5165\uff1a\u53ea\u4f1a\u89e6\u53d1 ",a.a.createElement("code",null,"onActivated"))),a.a.createElement("blockquote",null,a.a.createElement("p",null,"\u4e8b\u4ef6\u6302\u8f7d\u7684\u65b9\u6cd5\u7b49\uff0c\u53ea\u6267\u884c\u4e00\u6b21\u7684\u653e\u5728 ",a.a.createElement("code",null,"onMounted")," \u4e2d\uff1b\u7ec4\u4ef6\u6bcf\u6b21\u8fdb\u53bb\u6267\u884c\u7684\u65b9\u6cd5\u653e\u5728 ",a.a.createElement("code",null,"onActivated")," \u4e2d")),a.a.createElement("h2",{id:"10provideinject"},a.a.createElement(c["AnchorLink"],{to:"#10provideinject","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"10\u3001provide/inject"),a.a.createElement("p",null,a.a.createElement("code",null,"provide")," \u53ef\u4ee5\u5728\u7956\u5148\u7ec4\u4ef6\u4e2d\u6307\u5b9a\u6211\u4eec\u60f3\u8981\u63d0\u4f9b\u7ed9\u540e\u4ee3\u7ec4\u4ef6\u7684\u6570\u636e\u6216\u65b9\u6cd5\uff0c\u800c\u5728\u4efb\u4f55\u540e\u4ee3\u7ec4\u4ef6\u4e2d\uff0c\u6211\u4eec\u90fd\u53ef\u4ee5\u4f7f\u7528 ",a.a.createElement("code",null,"inject")," \u6765\u63a5\u6536 ",a.a.createElement("code",null,"provide")," \u63d0\u4f9b\u7684\u6570\u636e\u6216\u65b9\u6cd5\u3002"),a.a.createElement(o["a"],{code:"//\u7236\u7ec4\u4ef6\n  <template>\n    <Children></Children>\n  </template>\n\n  <script setup lang=\"ts\">\n  import { ref, provide } from 'vue'\n  import Children from \"./Children.vue\"\n\n  const msg = ref('hello,\u5c0f\u674e')\n\n  provide('msg', msg)\n  <\/script>\n//\u5b50\u7ec4\u4ef6\n  <template>\n    <div>\n      <p>msg\uff1a{{msg}}</p>\n      <button @click=\"onChangeMsg\">\u6539\u53d8msg</button>\n    </div>\n  </template>\n\n  <script setup lang=\"ts\">\n  import { inject, Ref, ref } from 'vue'\n\n  const list = inject<Ref<number[]>>(\"list\", ref([]));\n  const onChangeMsg = () => {\n    msg.value = 'shuge'\n  }\n  <\/script>",lang:"js"}),a.a.createElement("h2",{id:"11v-model-\u53d8\u66f4"},a.a.createElement(c["AnchorLink"],{to:"#11v-model-\u53d8\u66f4","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"11\u3001v-model \u53d8\u66f4"),a.a.createElement("p",null,"v-model \u6539\u52a8\u8fd8\u662f\u4e0d\u5c11\u7684\uff0c\u6211\u4eec\u90fd\u77e5\u9053\uff0c",a.a.createElement("code",null,"v-model")," \u662f ",a.a.createElement("code",null,"props")," \u548c ",a.a.createElement("code",null,"emit")," \u7ec4\u5408\u800c\u6210\u7684\u8bed\u6cd5\u7cd6,",a.a.createElement("code",null,"vue3")," \u4e2d ",a.a.createElement("code",null,"v-model")," \u6709\u4ee5\u4e0b\u6539\u52a8"),a.a.createElement("ul",null,a.a.createElement("li",null,"\u53d8\u66f4\uff1a",a.a.createElement("code",null,"value => modelValue")),a.a.createElement("li",null,"\u53d8\u66f4\uff1a",a.a.createElement("code",null,"update:input => update:modelValue")),a.a.createElement("li",null,"\u65b0\u589e\uff1a\u4e00\u4e2a\u7ec4\u4ef6\u53ef\u4ee5\u8bbe\u7f6e\u591a\u4e2a ",a.a.createElement("code",null,"v-model")),a.a.createElement("li",null,"\u65b0\u589e\uff1a\u5f00\u53d1\u8005\u53ef\u4ee5\u81ea\u5b9a\u4e49 ",a.a.createElement("code",null,"v-model")," \u4fee\u9970\u7b26"),a.a.createElement("li",null,a.a.createElement("code",null,"v-bind")," \u7684 ",a.a.createElement("code",null,".sync")," \u4fee\u9970\u7b26\u548c\u7ec4\u4ef6\u7684 ",a.a.createElement("code",null,"model")," \u9009\u9879\u5df2\u79fb\u9664")),a.a.createElement(o["a"],{code:'//\u7236\u7ec4\u4ef6\n  <template>\n    <HelloWorld v-model="msg" v-model:msg="msg1"> </HelloWorld>\n    \u62ff\u5230\u6700\u65b0\u7684\u6570\u636e:{{ msg }} {{ msg1 }}\n  </template>\n  <script setup lang="ts">\n  import { ref, Ref, onMounted, reactive, provide } from "vue";\n  import HelloWorld from "./components/HelloWorld.vue";\n\n  const msg: Ref<string> = ref("11");\n  const msg1: Ref<string> = ref("222");\n  <\/script>\n//\u5b50\u7ec4\u4ef6\n  <template>\n    <div>\n      {{ msg }} {{ modelValue }}\n      <a-button @click="handleAdd">\u70b9\u51fb</a-button>\n      <slot name="content" msg="hello!"></slot>\n    </div>\n  </template>\n  <script setup lang="ts">\n  import { ref, Ref, inject, reactive } from "vue";\n\n  type Props = {\n    modelValue: string;\n    msg: string;\n  };\n  defineProps<Props>();\n\n  const emit = defineEmits(["update:modelValue", "update:msg"]);\n  const handleAdd = () => {\n    emit("update:modelValue", "qqqqq");\n    emit("update:msg", "123");\n  };\n  <\/script>\n  <style scoped>\n  .read-the-docs {\n    color: #888;\n  }\n  </style>',lang:"js"}),a.a.createElement("h2",{id:"12teleport-\u4f20\u9001\u7ec4\u4ef6"},a.a.createElement(c["AnchorLink"],{to:"#12teleport-\u4f20\u9001\u7ec4\u4ef6","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"12\u3001Teleport \u4f20\u9001\u7ec4\u4ef6"),a.a.createElement("h2",{id:"13\u81ea\u5b9a\u4e49-hooks"},a.a.createElement(c["AnchorLink"],{to:"#13\u81ea\u5b9a\u4e49-hooks","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"13\u3001\u81ea\u5b9a\u4e49 hooks"),a.a.createElement("p",null,"\u6211\u4eec\u90fd\u77e5\u9053\u5728 ",a.a.createElement("code",null,"vue2")," \u4e2d\u6709\u4e2a\u4e1c\u897f\u53eb ",a.a.createElement("code",null,"mixins"),"\uff0c\u4ed6\u53ef\u4ee5\u5c06\u591a\u4e2a\u7ec4\u4ef6\u4e2d\u76f8\u540c\u7684\u903b\u8f91\u62bd\u79bb\u51fa\u6765\uff0c\u5b9e\u73b0\u4e00\u6b21\u5199\u4ee3\u7801\uff0c\u591a\u7ec4\u4ef6\u53d7\u76ca\u7684\u6548\u679c\u3002 \u4f46\u662f ",a.a.createElement("code",null,"mixins")," \u7684\u526f\u4f5c\u7528\u5c31\u662f\u5f15\u7528\u7684\u591a\u4e86\u53d8\u91cf\u7684\u6765\u6e90\u5c31\u4e0d\u6e05\u6670\u4e86\uff0c\u800c\u4e14\u8fd8\u4f1a\u6709\u53d8\u91cf\u6765\u6e90\u4e0d\u660e\u786e,\u4e0d\u5229\u4e8e\u9605\u8bfb\uff0c\u5bb9\u6613\u4f7f\u4ee3\u7801\u53d8\u5f97\u96be\u4ee5\u7ef4\u62a4\u3002"),a.a.createElement("ul",null,a.a.createElement("li",null,a.a.createElement("code",null,"Vue3")," \u7684 ",a.a.createElement("code",null,"hook\u51fd\u6570")," \u76f8\u5f53\u4e8e ",a.a.createElement("code",null,"vue2")," \u7684 ",a.a.createElement("code",null,"mixin"),", \u4e0d\u540c\u7684\u662f ",a.a.createElement("code",null,"hooks")," \u662f\u51fd\u6570"),a.a.createElement("li",null,a.a.createElement("code",null,"Vue3")," \u7684 ",a.a.createElement("code",null,"hook\u51fd\u6570")," \u53ef\u4ee5\u5e2e\u52a9\u6211\u4eec\u63d0\u9ad8\u4ee3\u7801\u7684\u590d\u7528\u6027, \u8ba9\u6211\u4eec\u80fd\u5728\u4e0d\u540c\u7684\u7ec4\u4ef6\u4e2d\u90fd\u5229\u7528 ",a.a.createElement("code",null,"hooks")," \u51fd\u6570")),a.a.createElement(o["a"],{code:"//useWindowResize.ts\nimport { onMounted, onUnmounted, ref } from 'vue';\n\nfunction useWindowResize() {\n  const width = ref(0);\n  const height = ref(0);\n  function onResize() {\n    width.value = window.innerWidth;\n    height.value = window.innerHeight;\n  }\n  onMounted(() => {\n    window.addEventListener('resize', onResize);\n    onResize();\n  });\n  onUnmounted(() => {\n    window.removeEventListener('resize', onResize);\n  });\n  return {\n    width,\n    height,\n  };\n}\n\nexport default useWindowResize;\n\n//\u4f7f\u7528\n<template>\n  <h3>\u5c4f\u5e55\u5c3a\u5bf8</h3>\n  <div>\u5bbd\u5ea6\uff1a{{ width }}</div>\n  <div>\u9ad8\u5ea6\uff1a{{ height }}</div>\n</template>\n\n<script setup lang=\"ts\">\nimport useWindowResize from \"./hooks/useWindowResize.ts\";\nconst { width, height } = useWindowResize();\n<\/script>",lang:"js"}),a.a.createElement("h2",{id:"14\u81ea\u5b9a\u4e49\u6307\u4ee4"},a.a.createElement(c["AnchorLink"],{to:"#14\u81ea\u5b9a\u4e49\u6307\u4ee4","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"14\u3001\u81ea\u5b9a\u4e49\u6307\u4ee4"),a.a.createElement("p",null,"\u5728 ",a.a.createElement("code",null,"<script setup>")," \u4e2d\uff0c\u4efb\u4f55\u4ee5",a.a.createElement("code",null,"v"),"\u5f00\u5934\u7684\u9a7c\u5cf0\u5f0f\u547d\u540d\u7684\u53d8\u91cf\u90fd\u53ef\u4ee5\u88ab\u7528\u4f5c\u4e00\u4e2a\u81ea\u5b9a\u4e49\u6307\u4ee4\u3002\u5728\u4e0a\u9762\u7684\u4f8b\u5b50\u4e2d\uff0c",a.a.createElement("code",null,"vFocus")," \u5373\u53ef\u4ee5\u5728\u6a21\u677f\u4e2d\u4ee5 ",a.a.createElement("code",null,"v-focus")," \u7684\u5f62\u5f0f\u4f7f\u7528\u3002"),a.a.createElement("p",null,"\u5728\u6ca1\u6709\u4f7f\u7528 ",a.a.createElement("code",null,"<script setup>")," \u7684\u60c5\u51b5\u4e0b\uff0c\u81ea\u5b9a\u4e49\u6307\u4ee4\u9700\u8981\u901a\u8fc7 ",a.a.createElement("code",null,"directives")," \u9009\u9879\u6ce8\u518c\uff1a"),a.a.createElement("p",null,a.a.createElement("strong",null,"\u81ea\u5b9a\u4e49\u6307\u4ee4\u7684\u751f\u547d\u5468\u671f")),a.a.createElement("ul",null,a.a.createElement("li",null,a.a.createElement("code",null,"created")," \u5143\u7d20\u521d\u59cb\u5316\u7684\u65f6\u5019"),a.a.createElement("li",null,a.a.createElement("code",null,"beforeMount")," \u6307\u4ee4\u7ed1\u5b9a\u5230\u5143\u7d20\u540e\u8c03\u7528 \u53ea\u8c03\u7528\u4e00\u6b21"),a.a.createElement("li",null,a.a.createElement("code",null,"mounted")," \u5143\u7d20\u63d2\u5165\u7236\u7ea7 ",a.a.createElement("code",null,"dom")," \u8c03\u7528"),a.a.createElement("li",null,a.a.createElement("code",null,"beforeUpdate")," \u5143\u7d20\u88ab\u66f4\u65b0\u4e4b\u524d\u8c03\u7528"),a.a.createElement("li",null,a.a.createElement("code",null,"update")," \u8fd9\u4e2a\u5468\u671f\u65b9\u6cd5\u88ab\u79fb\u9664 \u6539\u7528",a.a.createElement("code",null,"updated")),a.a.createElement("li",null,a.a.createElement("code",null,"beforeUnmount")," \u5728\u5143\u7d20\u88ab\u79fb\u9664\u524d\u8c03\u7528"),a.a.createElement("li",null,a.a.createElement("code",null,"unmounted")," \u6307\u4ee4\u88ab\u79fb\u9664\u540e\u8c03\u7528 \u53ea\u8c03\u7528\u4e00\u6b21")),a.a.createElement(o["a"],{code:'<template>\n  <div v-move class="box">\n    <div class="header"></div>\n    <div>\u5185\u5bb9</div>\n  </div>\n</template>\n\n<script setup lang="ts">\nimport { Directive } from "vue";\nconst vMove: Directive = {\n  mounted(el: HTMLElement) {\n    let moveEl = el.firstElementChild as HTMLElement;\n    const mouseDown = (e: MouseEvent) => {\n      //\u9f20\u6807\u70b9\u51fb\u7269\u4f53\u90a3\u4e00\u523b\u76f8\u5bf9\u4e8e\u7269\u4f53\u5de6\u4fa7\u8fb9\u6846\u7684\u8ddd\u79bb=\u70b9\u51fb\u65f6\u7684\u4f4d\u7f6e\u76f8\u5bf9\u4e8e\u6d4f\u89c8\u5668\u6700\u5de6\u8fb9\u7684\u8ddd\u79bb-\u7269\u4f53\u5de6\u8fb9\u6846\u76f8\u5bf9\u4e8e\u6d4f\u89c8\u5668\u6700\u5de6\u8fb9\u7684\u8ddd\u79bb\n      console.log(e.clientX, e.clientY, "\u8d77\u59cb\u4f4d\u7f6e", el.offsetLeft);\n      let X = e.clientX - el.offsetLeft;\n      let Y = e.clientY - el.offsetTop;\n      const move = (e: MouseEvent) => {\n        el.style.left = e.clientX - X + "px";\n        el.style.top = e.clientY - Y + "px";\n        console.log(e.clientX, e.clientY, "\u4f4d\u7f6e\u6539\u53d8");\n      };\n      document.addEventListener("mousemove", move);\n      document.addEventListener("mouseup", () => {\n        document.removeEventListener("mousemove", move);\n      });\n    };\n    moveEl.addEventListener("mousedown", mouseDown);\n  },\n};\n\n<\/script>\n\n<style>\n.box {\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: 200px;\n  height: 200px;\n  border: 1px solid #ccc;\n}\n\n.header {\n  height: 20px;\n  background: black;\n  cursor: move;\n}\n</style>',lang:"js"}),a.a.createElement("p",null,"\u5168\u5c40\u6ce8\u518c"),a.a.createElement(o["a"],{code:"// \u4f7f v-focus \u5728\u6240\u6709\u7ec4\u4ef6\u4e2d\u90fd\u53ef\u7528\napp.directive('focus', {\n  /* ... */\n});",lang:"js"}),a.a.createElement("blockquote",null,a.a.createElement("p",null,"\u53ea\u6709\u5f53\u6240\u9700\u529f\u80fd\u53ea\u80fd\u901a\u8fc7\u76f4\u63a5\u7684 ",a.a.createElement("code",null,"DOM")," \u64cd\u4f5c\u6765\u5b9e\u73b0\u65f6\uff0c\u624d\u5e94\u8be5\u4f7f\u7528\u81ea\u5b9a\u4e49\u6307\u4ee4\u3002\u5176\u4ed6\u60c5\u51b5\u4e0b\u5e94\u8be5\u5c3d\u53ef\u80fd\u5730\u4f7f\u7528 ",a.a.createElement("code",null,"v-bind")," \u8fd9\u6837\u7684\u5185\u7f6e\u6307\u4ee4\u6765\u58f0\u660e\u5f0f\u5730\u4f7f\u7528\u6a21\u677f\uff0c\u8fd9\u6837\u66f4\u9ad8\u6548\uff0c\u4e5f\u5bf9\u670d\u52a1\u7aef\u6e32\u67d3\u66f4\u53cb\u597d\u3002")),a.a.createElement("h2",{id:"15style-v-bind-css-\u53d8\u91cf\u6ce8\u5165"},a.a.createElement(c["AnchorLink"],{to:"#15style-v-bind-css-\u53d8\u91cf\u6ce8\u5165","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"15\u3001style v-bind CSS \u53d8\u91cf\u6ce8\u5165"),a.a.createElement(o["a"],{code:"<template>\n  <span> style v-bind CSS\u53d8\u91cf\u6ce8\u5165</span>\n</template>\n<script lang=\"ts\" setup>\n  import { ref } from 'vue'\n  const color = ref('f00')\n<\/script>\n<style scoped>\n  span {\n    /* \u4f7f\u7528v-bind\u7ed1\u5b9a\u7ec4\u4ef6\u4e2d\u5b9a\u4e49\u7684\u53d8\u91cf */\n    color: v-bind('color');\n  }\n</style>",lang:"js"}),a.a.createElement("h2",{id:"\u5728\u4f7f\u7528-vue3-\u7684\u65f6\u5019\u63a5\u89e6\u7684-ts-\u7684\u77e5\u8bc6\u70b9"},a.a.createElement(c["AnchorLink"],{to:"#\u5728\u4f7f\u7528-vue3-\u7684\u65f6\u5019\u63a5\u89e6\u7684-ts-\u7684\u77e5\u8bc6\u70b9","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"\u5728\u4f7f\u7528 vue3 \u7684\u65f6\u5019\u63a5\u89e6\u7684 ts \u7684\u77e5\u8bc6\u70b9"),a.a.createElement("h3",{id:"type-\u548c-interface-\u7684\u533a\u522b"},a.a.createElement(c["AnchorLink"],{to:"#type-\u548c-interface-\u7684\u533a\u522b","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"type \u548c interface \u7684\u533a\u522b"),a.a.createElement("p",null,a.a.createElement("code",null,"type"),"(\u7c7b\u578b\u522b\u540d)\u4f1a\u7ed9\u4e00\u4e2a\u7c7b\u578b\u8d77\u4e2a\u65b0\u540d\u5b57\u3002 ",a.a.createElement("code",null,"type")," \u6709\u65f6\u548c ",a.a.createElement("code",null,"interface")," \u5f88\u50cf\uff0c\u4f46\u662f\u53ef\u4ee5\u4f5c\u7528\u4e8e\u539f\u59cb\u503c\uff08\u57fa\u672c\u7c7b\u578b\uff09\uff0c\u8054\u5408\u7c7b\u578b\uff0c\u5143\u7ec4\u4ee5\u53ca\u5176\u5b83\u4efb\u4f55\u4f60\u9700\u8981\u624b\u5199\u7684\u7c7b\u578b\u3002\u8d77\u522b\u540d\u4e0d\u4f1a\u65b0\u5efa\u4e00\u4e2a\u7c7b\u578b - \u5b83\u521b\u5efa\u4e86\u4e00\u4e2a\u65b0\u540d\u5b57\u6765\u5f15\u7528\u90a3\u4e2a\u7c7b\u578b\u3002\u7ed9\u57fa\u672c\u7c7b\u578b\u8d77\u522b\u540d\u901a\u5e38\u6ca1\u4ec0\u4e48\u7528\uff0c\u5c3d\u7ba1\u53ef\u4ee5\u505a\u4e3a\u6587\u6863\u7684\u4e00\u79cd\u5f62\u5f0f\u4f7f\u7528\u3002"),a.a.createElement("p",null,a.a.createElement("strong",null,"\u76f8\u540c\u70b9")),a.a.createElement("ul",null,a.a.createElement("li",null,a.a.createElement("p",null,"\u63a5\u53e3\u548c\u7c7b\u578b\u522b\u540d\u90fd\u53ef\u4ee5\u7528\u6765\u63cf\u8ff0\u5bf9\u8c61\u6216\u51fd\u6570\u7684\u7c7b\u578b\uff0c\u53ea\u662f\u8bed\u6cd5\u4e0d\u540c"),a.a.createElement(o["a"],{code:"type MyTYpe = {\n  name: string,\n  say(): void,\n};\n\ninterface MyInterface {\n  name: string;\n  say(): void;\n}",lang:"js"})),a.a.createElement("li",null,a.a.createElement("p",null,"\u90fd\u5141\u8bb8\u6269\u5c55,",a.a.createElement("code",null,"interface")," \u7528 ",a.a.createElement("code",null,"extends")," \u6765\u5b9e\u73b0\u6269\u5c55,",a.a.createElement("code",null,"type")," \u4f7f\u7528 ",a.a.createElement("code",null,"&")," \u5b9e\u73b0\u6269\u5c55"),a.a.createElement(o["a"],{code:"//interface\u7684\u4f7f\u7528\ninterface MyInterface {\n  name: string;\n  say(): void;\n}\n\ninterface MyInterface2 extends MyInterface {\n  sex: string;\n}\n\nlet person: MyInterface2 = {\n  name: '\u5c0f\u674e',\n  sex: '\u7537',\n  say(): void {\n    console.log('hello,\u5c0f\u674e\uff01');\n  },\n};\n\u5c0f\u674e;\n//type\u7684\u4f7f\u7528\ntype MyType = {\n  name: string,\n  say(): void,\n};\ntype MyType2 = MyType & {\n  sex: string,\n};\nlet value: MyType2 = {\n  name: '\u5c0f\u674e',\n  sex: '\u7537',\n  say(): void {\n    console.log('hello \u554a\uff0c\u5c0f\u674e\uff01');\n  },\n};",lang:"js"}))),a.a.createElement("p",null,a.a.createElement("strong",null,"\u4e0d\u540c\u70b9")),a.a.createElement("ul",null,a.a.createElement("li",null,a.a.createElement("code",null,"type")," \u53ef\u4ee5\u58f0\u660e\u57fa\u672c\u6570\u636e\u7c7b\u578b\u522b\u540d/\u8054\u5408\u7c7b\u578b/\u5143\u7ec4\u7b49\uff0c\u800c ",a.a.createElement("code",null,"interface")," \u4e0d\u884c"),a.a.createElement("li",null,a.a.createElement("code",null,"interface")," \u80fd\u591f\u5408\u5e76\u58f0\u660e\uff0c\u800c ",a.a.createElement("code",null,"type")," \u4e0d\u884c")),a.a.createElement(o["a"],{code:"",lang:"unknown"})))}));n["default"]=e=>{var n=a.a.useContext(c["context"]),t=n.demos;return a.a.useEffect((()=>{var n;null!==e&&void 0!==e&&null!==(n=e.location)&&void 0!==n&&n.hash&&c["AnchorLink"].scrollToAnchor(decodeURIComponent(e.location.hash.slice(1)))}),[]),a.a.createElement(r,{demos:t})}},cRHV:function(e,n,t){e.exports=t.p+"static/smzq.7506cbfb.png"}}]);