我用Vue2写了五年，转Vue3后悔了吗？

// Vue2的日常
export default {
  data() {
    return {
      user: { name: '张三' }
    }
  },
  methods: {
    addAge() {
      // ❌ 这样写不会触发更新
      this.user.age = 25

      // ✅ 必须用$set
      this.$set(this.user, 'age', 25)
    },
    updateList() {
      // ❌ 这样改数组也不会更新
      this.list[0] = 'new value'

      // ✅ 还是得用$set
      this.$set(this.list, 0, 'new value')
    }
  }
}

export default {
  data() {
    return {
      keyword: '',        // 搜索关键词在这
      results: [],        // 搜索结果在这
      loading: false      // 加载状态在这
    }
  },
  computed: {
    hasResults() {        // 计算属性在这
      return this.results.length > 0
    }
  },
  methods: {
    async search() {      // 搜索方法在这
      this.loading = true
      this.results = await api.search(this.keyword)
      this.loading = false
    }
  },
  watch: {
    keyword(newVal) {     // 监听器在这
      this.debouncedSearch()
    }
  },
  created() {             // 生命周期在这
    this.debouncedSearch = debounce(this.search, 300)
  }
}

// userMixin.js
export default {
  data() {
    return {
      user: null,
      loading: false
    }
  },
  methods: {
    fetchUser() { /* ... */ }
  }
}

// 组件中使用
export default {
  mixins: [userMixin, permissionMixin, logMixin],
  data() {
    return {
      loading: true  // 这个loading和mixin里的冲突了，谁赢？
    }
  }
}

// Vue3，直接写就完事了
const user = reactive({ name: '张三' })

// ✅ 新增属性，能响应
user.age = 25

// ✅ 删除属性，也能响应
delete user.name

// ✅ 数组索引，照样响应
const list = reactive(['a', 'b', 'c'])
list[0] = 'new value'

<script setup>
import { ref, computed, watch } from 'vue'
import { useDebounceFn } from '@vueuse/core'

// 搜索相关的代码全在一起
const keyword = ref('')
const results = ref([])
const loading = ref(false)
const hasResults = computed(() => results.value.length > 0)

async function search() {
  loading.value = true
  results.value = await api.search(keyword.value)
  loading.value = false
}

const debouncedSearch = useDebounceFn(search, 300)
watch(keyword, debouncedSearch)
</script>

// useSearch.js
export function useSearch(apiFn) {
  const keyword = ref('')
  const results = ref([])
  const loading = ref(false)

  async function search() {
    loading.value = true
    results.value = await apiFn(keyword.value)
    loading.value = false
  }

  const debouncedSearch = useDebounceFn(search, 300)
  watch(keyword, debouncedSearch)

  return { keyword, results, loading, search }
}

<script setup>
import { useSearch } from './useSearch'

// 一行搞定，来源清晰
const { keyword, results, loading } = useSearch(api.searchUsers)
</script>

<script setup lang="ts">
interface User {
  id: number
  name: string
  age?: number
}

// props有完整类型提示
const props = defineProps<{
  user: User
  readonly?: boolean
}>()

// emit也有类型约束
const emit = defineEmits<{
  (e: 'update', user: User): void
  (e: 'delete', id: number): void
}>()

// ref自动推导类型
const count = ref(0)  // Ref<number>
const user = ref<User | null>(null)  // Ref<User | null>
</script>

<template>
  <button @click="showModal = true">打开弹窗</button>

  <!-- 内容传送到body下，但逻辑还在这个组件里 -->
  <Teleport to="body">
    <div v-if="showModal" class="modal">
      <h2>我是弹窗</h2>
      <button @click="showModal = false">关闭</button>
    </div>
  </Teleport>
</template>

<!-- Vue2：必须有根节点 -->
<template>
  <div>
    <header>头部</header>
    <main>内容</main>
    <footer>底部</footer>
  </div>
</template>

<!-- Vue3：多个根节点OK -->
<template>
  <header>头部</header>
  <main>内容</main>
  <footer>底部</footer>
</template>

<script>
// 这种写法在Vue3里完全没问题
export default {
  data() {
    return { count: 0 }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>