\u4e3b\u6253\u4e00\u4e2a\u968f\u624b\u8bb0\u3001\u8f7b\u677e\u5b66，\u6838\u5fc3\u77e5\u8bc6\u70b9+\u6781\u7b80\u793a\u4f8b，\u65b0\u624b\u53cb\u597d～<\/p>\n
Vue3 \u662f\u76ee\u524d Vue \u7684\u4e3b\u6d41\u7248\u672c，\u76f8\u6bd4 Vue2 \u91cd\u6784\u4e86\u6838\u5fc3\u4ee3\u7801，\u66f4\u8f7b\u91cf\u3001\u66f4\u7075\u6d3b，\u8fd8\u652f\u6301 TypeScript \u53cb\u597d\u5f00\u53d1，\u6700\u9999\u7684\u662f Composition API（\u7ec4\u5408\u5f0fAPI），\u7ec8\u4e8e\u4e0d\u7528\u518d\u88ab\u9009\u9879\u5f0fAPI\u7684this\u7ed5\u6655\u5566～<\/p>\n
\u6700\u6838\u5fc3\u7684\u5347\u7ea7！\u628a\u96f6\u6563\u7684\u4ee3\u7801\u6309\u529f\u80fd\u903b\u8f91\u805a\u5408，\u4e0d\u518d\u5c40\u9650\u4e8e data\/methods\/watch \u8fd9\u4e9b\u9009\u9879，\u590d\u7528\u6027\u62c9\u6ee1～<\/p>\n
<template>
\n <div>\u8ba1\u6570：{{ count }}<\/div>
\n <button @click="add">\u70b9\u6211+1<\/button>
\n<\/template><\/p>\n
<script setup>
\n\/\/ \u2728 \u76f4\u63a5\u5199，\u4e0d\u7528export default，setup\u8bed\u6cd5\u7cd6yyds
\nimport { ref } from 'vue'<\/p>\n
\/\/ \u54cd\u5e94\u5f0f\u6570\u636e（\u7b80\u5355\u7c7b\u578b\u7528ref）
\nconst count = ref(0)<\/p>\n
\/\/ \u65b9\u6cd5\u76f4\u63a5\u5b9a\u4e49
\nconst add = () => {
\n count.value++ \/\/ ref\u8981\u52a0.value，\u6a21\u677f\u91cc\u4e0d\u7528
\n}
\n<\/script><\/p>\n
Vue2 \u7528 Object.defineProperty，\u53ea\u80fd\u76d1\u542c\u5bf9\u8c61\u5c5e\u6027；Vue3 \u7528 Proxy，\u80fd\u76d1\u542c\u6574\u4e2a\u5bf9\u8c61，\u8fd8\u652f\u6301\u6570\u7ec4\u3001Map\/Set \u5566～<\/p>\n
<script setup>
\nimport { reactive } from 'vue'<\/p>\n
\/\/ \u590d\u6742\u7c7b\u578b\u7528reactive
\nconst user = reactive({
\n name: '\u624b\u7ed8\u541b',
\n hobbies: ['\u6478\u9c7c', '\u5199Vue'] \/\/ \u6570\u7ec4\u54cd\u5e94\u5f0f\u76f4\u63a5\u7528，\u4e0d\u7528\u518dhack\u5566
\n})<\/p>\n
\/\/ \u76f4\u63a5\u6539\u6570\u7ec4，\u54cd\u5e94\u5f0f\u751f\u6548！
\nconst addHobby = () => {
\n user.hobbies.push('\u5b66Vue3')
\n}
\n<\/script><\/p>\n
<!– \u5b50\u7ec4\u4ef6 Child.vue –>
\n<script setup>
\n\/\/ \u2728 \u76f4\u63a5defineProps，\u4e0d\u7528\u5199props\u9009\u9879
\nconst props = defineProps({
\n msg: {
\n type: String,
\n default: '\u9ed8\u8ba4\u624b\u7ed8\u6d88\u606f'
\n }
\n})<\/p>\n
\/\/ \u5b50\u4f20\u7236：defineEmits
\nconst emit = defineEmits(['changeMsg'])
\nconst sendMsg = () => {
\n emit('changeMsg', '\u6765\u81ea\u5b50\u7ec4\u4ef6\u7684\u624b\u7ed8\u6d88\u606f')
\n}
\n<\/script><\/p>\n
\u628a\u7ec4\u4ef6\u6e32\u67d3\u5230\u4efb\u610fDOM\u8282\u70b9，\u5f39\u6846\/\u906e\u7f69\u518d\u4e5f\u4e0d\u7528\u88ab\u7236\u7ec4\u4ef6\u6837\u5f0f\u9650\u5236\u5566～<\/p>\n
<template>
\n <button @click="showModal = true">\u6253\u5f00\u5f39\u7a97<\/button>
\n <!– 📍 \u77ac\u79fb\u5230body\u4e0b –>
\n <Teleport to="body">
\n <div v-if="showModal" class="modal">
\n \u6211\u662f\u77ac\u79fb\u7684\u5f39\u7a97～
\n <button @click="showModal = false">\u5173\u95ed<\/button>
\n <\/div>
\n <\/Teleport>
\n<\/template><\/p>\n
<script setup>
\nimport { ref } from 'vue'
\nconst showModal = ref(false)
\n<\/script><\/p>\n
\u4f53\u79ef\u66f4\u5c0f：\u6309\u9700\u5f15\u5165，\u6253\u5305\u540e\u4f53\u79ef\u6bd4Vue2\u5c11\u7ea640%<\/p>\n<\/li>\n
\u7f16\u8bd1\u66f4\u5feb：\u9759\u6001\u8282\u70b9\u63d0\u5347\u3001PatchFlag\u6807\u8bb0\u52a8\u6001\u8282\u70b9，\u66f4\u65b0DOM\u66f4\u7cbe\u51c6<\/p>\n<\/li>\n<\/ul>\n
"># \u5148\u88c5\u811a\u624b\u67b6
\nnpm install -g @vue\/cli
\n# \u521b\u5efa\u9879\u76ee（\u9009Vue3）
\nvue create vue3-handnote
\n# \u6216\u7528vite（\u66f4\u5feb！）
npm create vite@latest vue3-handnote — –template vue<\/p>\n
<script setup>
\n\/\/ setup\u8bed\u6cd5\u7cd6\u662fVue3\u7684\u6807\u914d，\u4e0d\u7528\u5199setup\u51fd\u6570
\nimport { ref, reactive } from 'vue'<\/p>\n
\/\/ \u54cd\u5e94\u5f0f\u6570\u636e
\nconst title = ref('Vue3\u624b\u7ed8\u7b14\u8bb0')
\nconst info = reactive({
\n author: '\u624b\u7ed8\u541b',
\n time: '2026.02'
\n})
\n<\/script><\/p>\n
<template>
\n <h1>{{ title }}<\/h1>
\n <p>\u4f5c\u8005：{{ info.author }} | \u65f6\u95f4：{{ info.time }}<\/p>
\n<\/template><\/p>\n
<style scoped>
\n\/* scoped\u6837\u5f0f\u53ea\u4f5c\u7528\u4e8e\u5f53\u524d\u7ec4\u4ef6，\u4e0d\u4f1a\u6c61\u67d3\u5168\u5c40 *\/
\nh1 {
\n color: #42b983; \/* Vue\u7eff～ *\/
\n}
\n<\/style><\/p>\n
🚨 ref\u5728\u6a21\u677f\u91cc\u4e0d\u7528.value，JS\u91cc\u5fc5\u987b\u52a0！<\/p>\n<\/li>\n
📌 reactive\u53ea\u80fd\u7ed1\u5bf9\u8c61\/\u6570\u7ec4，\u7b80\u5355\u7c7b\u578b\u7528ref（ref\u66f4\u901a\u7528～）<\/p>\n<\/li>\n
\u2728 <script setup> \u91cc\u5b9a\u4e49\u7684\u53d8\u91cf\/\u65b9\u6cd5，\u6a21\u677f\u91cc\u76f4\u63a5\u7528，\u4e0d\u7528return<\/p>\n<\/li>\n
🛑 Vue3\u79fb\u9664\u4e86Vue2\u7684filter，\u7528\u8ba1\u7b97\u5c5e\u6027\u66ff\u4ee3\u5c31\u597d<\/p>\n<\/li>\n
| ref<\/td>\n | \u7b80\u5355\u7c7b\u578b\u54cd\u5e94\u5f0f<\/td>\n | const num = ref(0)<\/td>\n<\/tr>\n |
| reactive<\/td>\n | \u590d\u6742\u7c7b\u578b\u54cd\u5e94\u5f0f<\/td>\n | const obj = reactive({a:1})<\/td>\n<\/tr>\n |
| computed<\/td>\n | \u8ba1\u7b97\u5c5e\u6027<\/td>\n | const double = computed(() => num.value*2)<\/td>\n<\/tr>\n |
| watch<\/td>\n | \u76d1\u542c\u6570\u636e\u53d8\u5316<\/td>\n | watch(num, (newVal) => {})<\/td>\n<\/tr>\n |
| onMounted<\/td>\n | \u7ec4\u4ef6\u6302\u8f7d\u540e\u6267\u884c<\/td>\n | onMounted(() => {})<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n🎯 \u603b\u7ed3<\/h3>\nVue3 \u6838\u5fc3\u662f Composition API，\u7528 <script setup> \u5199\u4ee3\u7801\u66f4\u7b80\u6d01；<\/p>\n<\/li>\n \u54cd\u5e94\u5f0f\u5206 ref（\u7b80\u5355\u7c7b\u578b）\u548c reactive（\u590d\u6742\u7c7b\u578b），\u8bb0\u4f4f ref \u8981\u52a0.value；<\/p>\n<\/li>\n \u76f8\u6bd4 Vue2，Vue3 \u66f4\u8f7b\u3001\u66f4\u5feb\u3001\u66f4\u7075\u6d3b，\u8fd8\u5b8c\u7f8e\u9002\u914dTS，\u65b0\u624b\u76f4\u63a5\u5b66Vue3\u5c31\u5bf9\u4e86～<\/p>\n<\/li>\n 📚 \u5176\u4ed6\u6d41\u884c\u524d\u7aef\u6846\u67b6\/\u5e93（\u65b0\u624b\u5fc5\u77e5）<\/h3>\n\u9664\u4e86 Vue3，\u524d\u7aef\u8fd8\u6709\u5f88\u591a\u4e3b\u6d41\u5de5\u5177，\u6309\u9700\u9009\u62e9\u5373\u53ef，\u65b0\u624b\u4f18\u5148\u638c\u63e11-2\u4e2a\u6846\u67b6+\u5e38\u7528\u5e93\u5c31\u591f\u5566～<\/p>\n 1. React（\u6700\u6d41\u884c\u6846\u67b6\u4e4b\u4e00）<\/h4>\nFacebook \u5f00\u6e90，\u7ec4\u4ef6\u5316\u601d\u60f3\u6838\u5fc3，\u751f\u6001\u6781\u4e30\u5bcc，\u9002\u5408\u5927\u578b\u9879\u76ee\u3001\u79fb\u52a8\u7aef（\u914d\u5408 React Native），\u65b0\u624b\u5165\u95e8\u7a0d\u96be\u4f46\u5c31\u4e1a\u9762\u5e7f～<\/p>\n React \u6781\u7b80\u793a\u4f8b 2. Angular（\u4f01\u4e1a\u7ea7\u9996\u9009）<\/h4>\nGoogle \u5f00\u6e90，\u5168\u6808\u5f0f\u6846\u67b6（\u81ea\u5e26\u8def\u7531\u3001\u8868\u5355\u3001HTTP\u7b49），TypeScript \u539f\u751f\u652f\u6301，\u9002\u5408\u5927\u578b\u4f01\u4e1a\u9879\u76ee，\u5b66\u4e60\u6210\u672c\u8f83\u9ad8，\u65b0\u624b\u53ef\u540e\u671f\u63a5\u89e6\u3002<\/p>\n 3. Svelte（\u8f7b\u91cf\u65b0\u8d35）<\/h4>\n\u65e0\u9700\u865a\u62dfDOM，\u7f16\u8bd1\u65f6\u76f4\u63a5\u751f\u6210\u539f\u751fJS，\u4f53\u79ef\u6781\u5c0f\u3001\u8fd0\u884c\u6781\u5feb，\u8bed\u6cd5\u548cVue\u7c7b\u4f3c，\u65b0\u624b\u53cb\u597d，\u9002\u5408\u5c0f\u578b\u9879\u76ee\u3001\u6027\u80fd\u654f\u611f\u573a\u666f\u3002<\/p>\n 4. \u5e38\u7528\u524d\u7aef\u5e93（\u914d\u5408\u6846\u67b6\u4f7f\u7528）<\/h4>\n🔧 UI\u5e93：Element Plus（Vue3\u4e13\u5c5e）\u3001Ant Design（React\/Vue\u901a\u7528）\u3001Vuetify（Vue Material\u98ce\u683c）<\/p>\n<\/li>\n 📊 \u56fe\u8868\u5e93：ECharts（\u529f\u80fd\u5168）\u3001Chart.js（\u8f7b\u91cf\u7b80\u5355）<\/p>\n<\/li>\n 🗺\ufe0f \u8def\u7531\u5e93：Vue Router（Vue3\u914d\u5957）\u3001React Router（React\u914d\u5957）<\/p>\n<\/li>\n 🔄 \u72b6\u6001\u7ba1\u7406：Pinia（Vue3\u63a8\u8350，\u66ff\u4ee3Vuex）\u3001Redux（React\u5e38\u7528）<\/p>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":" Vue3 \u624b\u7ed8\u98ce\u5b66\u4e60\u7b14\u8bb0：\u4ece Composition API \u5230\u5feb\u901f\u4e0a\u624b |