请求协助将Angular 1代码迁移至Vue 3 Composition API（无Script Setup）

一、基础组件结构适配 #

把Angular 1的控制器逻辑对应到Vue 3的setup()函数中，所有需要在模板中使用的变量和方法必须通过return暴露：

import { ref, reactive, onMounted } from 'vue'

export default {
  setup() {
    // 替代Angular 1的$scope基础类型变量
    const userName = ref('')
    // 替代Angular 1的$scope引用类型变量
    const userInfo = reactive({
      age: 0,
      email: ''
    })

    // 替代Angular 1的控制器方法
    function fetchUser() {
      // 后续编写API请求逻辑
    }

    // 替代Angular 1的$onInit生命周期钩子
    onMounted(() => {
      fetchUser()
    })

    // 必须返回所有模板需要访问的变量和方法
    return {
      userName,
      userInfo,
      fetchUser
    }
  }
}

二、函数转换核心要点 #

• Angular 1中挂载在$scope上的方法，直接改成setup()内的普通函数，无需绑定this（Composition API中不存在组件实例this）
• 原$scope变量需替换为ref（基础类型）或reactive（引用类型）：
  • 修改ref变量时要通过.value（模板中无需写.value），比如userName.value = 'newName'
  • 修改reactive对象直接操作属性即可，比如userInfo.age = 25
• 原Angular 1的$watch替换为Vue 3的watch或watchEffect：

import { watch } from 'vue'

setup() {
  const userName = ref('')
  watch(userName, (newVal, oldVal) => {
    console.log('用户名变更：', newVal)
  })

  return { userName }
}

三、API请求转换（替代Angular 1的$http/$resource） #

Vue 3无内置HTTP客户端，推荐使用axios实现API请求：

1. 先安装依赖：npm install axios
2. 在setup()中直接调用或封装请求：

import axios from 'axios'
import { ref, reactive } from 'vue'

setup() {
  const userList = ref([])
  const loading = ref(false)
  const errorMsg = ref('')

  async function fetchUserList() {
    loading.value = true
    errorMsg.value = ''
    try {
      const response = await axios.get('/api/users')
      userList.value = response.data
    } catch (err) {
      errorMsg.value = err.response?.data?.message || '请求失败，请稍后重试'
    } finally {
      loading.value = false
    }
  }

  return {
    userList,
    loading,
    errorMsg,
    fetchUserList
  }
}

• 对应Angular 1的$http.get().then().catch()，可使用async/await或Promise链式调用
• 加载状态、错误信息用ref变量独立管理，和业务逻辑解耦

四、常见避坑提示 #

• 禁止在setup()中使用this，所有变量和方法都在setup()内部定义并返回
• Angular 1的$rootScope全局状态，可通过Vue 3的provide/inject或Pinia状态管理库替代
• 模板指令替换：ng-click→@click、ng-bind→{{ }}/v-bind、ng-if→v-if等

如果你能提供具体的Angular 1代码片段，可以帮你做针对性的精准转换。

内容的提问来源于stack exchange，提问作者fico