🐱 猫娘的前端开发日记：从零开始学习 Vue3

作为一只爱学习的小猫咪娘，最近开始深入学习 Vue3 啦！之前一直使用 Vue2，这次升级到 Vue3 感觉真的变化很大呢。今天来分享一下我在学习过程中的心得体会，希望能帮助到同样在学习的小伙伴们喵~

🌸 一、Vue3 的新特性

Vue3 带来了很多激动人心的新特性，其中我最喜欢的就是 Composition API！它让代码的组织方式更加灵活，逻辑复用也变得更加容易。

小猫咪娘小贴士：Composition API 不是替代 Options API，而是补充！你可以根据项目需要选择使用哪种方式喵~

1.1 Composition API 基础

使用 setup 函数可以让我们的代码更加简洁：

// Vue3 Composition API 示例
import { ref, computed, onMounted } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const doubleCount = computed(() => count.value * 2)

    const increment = () => {
      count.value++
    }

    onMounted(() => {
      console.log('组件已挂载喵~')
    })

    return {
      count,
      doubleCount,
      increment
    }
  }
}

1.2 响应式原理的改变

Vue3 使用了 Proxy 代替 Vue2 的 Object.defineProperty，这解决了 Vue2 中响应式的一些痛点，比如：

✅ 可以监听对象属性的动态添加和删除
✅ 可以监听数组索引的直接修改
✅ 性能更好，内存占用更少

🍡 二、实用的开发技巧

在实际开发中，我总结了一些实用的技巧，分享给大家喵~

2.1 使用组合式函数复用逻辑

将可复用的逻辑封装成组合式函数，可以让代码更加清晰：

// 可复用的鼠标位置监听函数
import { ref, onMounted, onUnmounted } from 'vue'

export function useMousePosition() {
  const x = ref(0)
  const y = ref(0)

  const updatePosition = (e) => {
    x.value = e.clientX
    y.value = e.clientY
  }

  onMounted(() => {
    window.addEventListener('mousemove', updatePosition)
  })

  onUnmounted(() => {
    window.removeEventListener('mousemove', updatePosition)
  })

  return { x, y }
}

2.2 合理使用 computed 和 watch

computed 适合用于需要缓存的计算属性，而 watch 适合用于执行副作用操作。记得区分使用场景哦！

💡 小猫咪娘的经验法则：能用 computed 就不要用 watch， computed 更高效，因为它有缓存机制喵~

🌟 三、项目实战建议

学习了基础知识之后，最重要的就是多练习！我建议可以从以下几个小项目开始：

📝 Todo List 待办事项应用
🌤 天气查询小程序
📊 数据可视化仪表盘
🛒 简易购物车

🐾 四、学习资源推荐

最后推荐一些我觉得不错的学习资源给大家：

📚 Vue3 官方文档：vuejs.org
🎥 B站教程视频搜索"Vue3"
📖 《Vue.js 设计与实现》书籍
💻 GitHub 上的优秀开源项目

💕 写在最后

学习新技术最重要的是保持热情和耐心喵~ 虽然一开始可能会觉得有些困难，但只要坚持下去，一定会有所收获的！加油呀，所有正在学习的小伙伴们！

🐱🐾🌸 喵~ 我们下次再见啦！🌸🐾🐱