Vue3 手绘风学习笔记：从 Composition API 到快速上手

Vue3 手绘风学习笔记：从 Composition API 到快速上手

✏️ Vue3 手绘风学习笔记 🎨

主打一个随手记、轻松学，核心知识点+极简示例，新手友好～

📝 前言

Vue3 是目前 Vue 的主流版本，相比 Vue2 重构了核心代码，更轻量、更灵活，还支持 TypeScript 友好开发，最香的是 Composition API（组合式API），终于不用再被选项式API的this绕晕啦～

🚀 核心特性（敲黑板！）

1. 🌟 Composition API（组合式API）

最核心的升级！把零散的代码按功能逻辑聚合，不再局限于 data/methods/watch 这些选项，复用性拉满～

<template>
<div>计数：{{ count }}</div>
<button @click="add">点我+1</button>
</template>

<script setup>
// ✨ 直接写，不用export default，setup语法糖yyds
import { ref } from 'vue'

// 响应式数据（简单类型用ref）
const count = ref(0)

// 方法直接定义
const add = () => {
count.value++ // ref要加.value，模板里不用
}
</script>

2. 🛠️ 响应式原理升级

Vue2 用 Object.defineProperty，只能监听对象属性；Vue3 用 Proxy，能监听整个对象，还支持数组、Map/Set 啦～

<script setup>
import { reactive } from 'vue'

// 复杂类型用reactive
const user = reactive({
name: '手绘君',
hobbies: ['摸鱼', '写Vue'] // 数组响应式直接用，不用再hack啦
})

// 直接改数组，响应式生效！
const addHobby = () => {
user.hobbies.push('学Vue3')
}
</script>

3. 🧩 组件相关升级

（1）组件传值更简洁

<!– 子组件 Child.vue –>
<script setup>
// ✨ 直接defineProps，不用写props选项
const props = defineProps({
msg: {
type: String,
default: '默认手绘消息'
}
})

// 子传父：defineEmits
const emit = defineEmits(['changeMsg'])
const sendMsg = () => {
emit('changeMsg', '来自子组件的手绘消息')
}
</script>

（2）Teleport（瞬移组件）

把组件渲染到任意DOM节点，弹框/遮罩再也不用被父组件样式限制啦～

<template>
<button @click="showModal = true">打开弹窗</button>
<!– 📍 瞬移到body下 –>
<Teleport to="body">
<div v-if="showModal" class="modal">
我是瞬移的弹窗～
<button @click="showModal = false">关闭</button>
</div>
</Teleport>
</template>

<script setup>
import { ref } from 'vue'
const showModal = ref(false)
</script>

4. ⚡ 更轻量、更快

• 体积更小：按需引入，打包后体积比Vue2少约40%

• 编译更快：静态节点提升、PatchFlag标记动态节点，更新DOM更精准

📦 快速上手（极简版）

1. 创建Vue3项目

"># 先装脚手架
npm install -g @vue/cli
# 创建项目（选Vue3）
vue create vue3-handnote
# 或用vite（更快！）&#xA;npm create vite@latest vue3-handnote — –template vue

2. 最简Vue3组件

<script setup>
// setup语法糖是Vue3的标配，不用写setup函数
import { ref, reactive } from 'vue'

// 响应式数据
const title = ref('Vue3手绘笔记')
const info = reactive({
author: '手绘君',
time: '2026.02'
})
</script>

<template>
<h1>{{ title }}</h1>
<p>作者：{{ info.author }} | 时间：{{ info.time }}</p>
</template>

<style scoped>
/* scoped样式只作用于当前组件，不会污染全局 */
h1 {
color: #42b983; /* Vue绿～ */
}
</style>

💡 新手小技巧（避坑！）

📋 常用API速记（手绘小抄）

🎯 总结

📚 其他流行前端框架/库（新手必知）

除了 Vue3，前端还有很多主流工具，按需选择即可，新手优先掌握1-2个框架+常用库就够啦～

1. React（最流行框架之一）

Facebook 开源，组件化思想核心，生态极丰富，适合大型项目、移动端（配合 React Native），新手入门稍难但就业面广～

React 极简示例
<div id="root"></div>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script>
// 简单组件
function Hello() {
return React.createElement('h1', null, 'Hello React!');
}
// 渲染到页面
ReactDOM.render(React.createElement(Hello), document.getElementById('root'));
</script>

2. Angular（企业级首选）

Google 开源，全栈式框架（自带路由、表单、HTTP等），TypeScript 原生支持，适合大型企业项目，学习成本较高，新手可后期接触。

3. Svelte（轻量新贵）

无需虚拟DOM，编译时直接生成原生JS，体积极小、运行极快，语法和Vue类似，新手友好，适合小型项目、性能敏感场景。

4. 常用前端库（配合框架使用）

• 🔧 UI库：Element Plus（Vue3专属）、Ant Design（React/Vue通用）、Vuetify（Vue Material风格）

• 📊 图表库：ECharts（功能全）、Chart.js（轻量简单）

• 🗺️ 路由库：Vue Router（Vue3配套）、React Router（React配套）

• 🔄 状态管理：Pinia（Vue3推荐，替代Vuex）、Redux（React常用）