Vue学习笔记

// Vue 组件生命周期
export default {
  created() {
    // 组件创建后 - 类比 @PostConstruct
    console.log('组件实例已创建')
  },
  
  mounted() {
    // DOM 挂载完成 - 类比 init-method
    console.log('可以访问 DOM 了')
  },
  
  unmounted() {
    // 组件销毁 - 类比 @PreDestroy
    console.log('清理资源')
  }
}

// stores/user.js
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    username: '',
    token: ''
  }),
  
  getters: {
    isLoggedIn: (state) => !!state.token  // 类比 getter 方法
  },
  
  actions: {
    async login(username, password) {     // 类比 Service 方法
      const res = await api.login(username, password)
      this.token = res.token
      this.username = username
    }
  }
})

// 在组件中使用（类比 @Autowired）
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()
console.log(userStore.username)
userStore.login('admin', '123456')

// router/index.js
const routes = [
  {
    path: '/user/:id',           // 路径参数
    name: 'UserDetail',
    component: () => import('@/views/UserDetail.vue'),
    meta: { requiresAuth: true } // 元信息，类比注解
  }
]

// 路由守卫（类比拦截器）
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isLoggedIn()) {
    next('/login')  // 重定向到登录页
  } else {
    next()
  }
})

// api/request.js
import axios from 'axios'

const request = axios.create({
  baseURL: '/api',
  timeout: 5000
})

// 请求拦截器（类比 Spring Interceptor）
request.interceptors.request.use(config => {
  const token = localStorage.getItem('token')
  if (token) {
    config.headers['Authorization'] = `Bearer ${token}`
  }
  return config
})

// 响应拦截器
request.interceptors.response.use(
  response => response.data,
  error => {
    console.error('请求失败:', error)
    return Promise.reject(error)
  }
)

export default request

// api/user.js
import request from './request'

export const getUserInfo = (id) => {
  return request.get(`/user/${id}`)  // 类比 restTemplate.getForObject()
}

export const updateUser = (data) => {
  return request.post('/user/update', data)  // 类比 restTemplate.postForObject()
}

// Vue 3 响应式数据（类比 JavaBean）
import { ref, reactive } from 'vue'

// ref - 基本类型（类比 private String name）
const count = ref(0)
console.log(count.value)  // 访问需要 .value
count.value++

// reactive - 对象类型（类比 POJO）
const user = reactive({
  name: '张三',
  age: 25
})
console.log(user.name)  // 直接访问
user.age++

// 组合式 API（Vue 3 推荐）
import { ref, computed, onMounted } from 'vue'

export default {
  setup() {  // 类比 main 方法
    // 响应式数据
    const count = ref(0)
    
    // 计算属性
    const doubleCount = computed(() => count.value * 2)
    
    // 方法
    const increment = () => {
      count.value++
    }
    
    // 生命周期
    onMounted(() => {
      console.log('组件已挂载')
    })
    
    // 返回给模板使用（类比 public 方法）
    return {
      count,
      doubleCount,
      increment
    }
  }
}

// 在组件中调用 API
import { ref, onMounted } from 'vue'
import { getUserInfo } from '@/api/user'

const userInfo = ref(null)
const loading = ref(false)

const fetchData = async () => {
  loading.value = true
  try {
    userInfo.value = await getUserInfo(123)
  } catch (error) {
    console.error('请求失败:', error)
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  fetchData()  // 组件挂载后自动请求
})

import { useRouter } from 'vue-router'

const router = useRouter()

// 编程式导航
router.push('/home')                    // 跳转到首页
router.push({ name: 'UserDetail', params: { id: 123 } })  // 带参数
router.go(-1)                           // 后退

// 1. console.log（最常用）
console.log('当前用户:', user.value)

// 2. debugger 断点
const handleClick = () => {
  debugger  // 在这里暂停
  count.value++
}

// 3. 监听数据变化
watch(count, (newVal, oldVal) => {
  console.log(`count 从 ${oldVal} 变为 ${newVal}`)
})