Vue入门到精通七之关键字const

Vue中使用JavaScript的const关键字声明常量。

一、基本语法

1. 声明常量

javascript 复制代码

// 声明一个常量
const PI = 3.14159
const API_URL = 'https://api.example.com'

// ❌ 不能重新赋值
PI = 3.14  // TypeError: Assignment to constant variable

2. 在Vue中使用

javascript 复制代码

export default {
  data() {
    return {
      // ❌ 错误：data中不能用const
      // const count: 0  // 这是错误的
      
      count: 0  // ✅ 正确：直接赋值
    }
  },
  
  // ✅ 常量定义在组件顶层
  API_BASE_URL: 'https://api.example.com',
  MAX_RETRY: 3,
  
  methods: {
    fetchData() {
      // ✅ 在方法中使用常量
      const url = `${this.API_BASE_URL}/users`
      axios.get(url)
    }
  }
}

二、const vs let vs var

特性	const	let	var
作用域	块级作用域	块级作用域	函数作用域
重新赋值	❌ 不允许	✅ 允许	✅ 允许
变量提升	❌ 不存在（暂存死区）	❌ 不存在（暂存死区）	✅ 存在（undefined）
重复声明	❌ 不允许	❌ 不允许	✅ 允许
全局属性	❌ 不创建全局属性	❌ 不创建全局属性	✅ 创建全局属性

三、const与对象/数组

1. 对象属性可修改

javascript 复制代码

const user = {
  name: '张三',
  age: 25
}

// ✅ 可以修改对象属性
user.name = '李四'
user.age = 26

// ❌ 不能重新赋值整个对象
user = { name: '王五' }  // TypeError

2. 数组元素可修改

javascript 复制代码

const list = [1, 2, 3]

// ✅ 可以添加、删除、修改元素
list.push(4)     // [1, 2, 3, 4]
list.pop()       // [1, 2, 3]
list[0] = 10     // [10, 2, 3]

// ❌ 不能重新赋值整个数组
list = [4, 5, 6]  // TypeError

3. 冻结对象（完全不可变）

javascript 复制代码

const config = Object.freeze({
  api: 'https://api.example.com',
  timeout: 5000
})

// ❌ 所有属性都不可修改
config.timeout = 10000  // 静默失败（严格模式报错）
config.newProp = 'test' // 静默失败

四、Vue中的最佳实践

1. 组件常量

javascript 复制代码

export default {
  // 组件级常量
  COMPONENT_NAME: 'UserList',
  
  data() {
    return {
      // data中的属性不能用const
      userList: [],
      loading: false
    }
  },
  
  methods: {
    async fetchUsers() {
      // ✅ 方法中定义临时常量
      const response = await this.$http.get('/api/users')
      const { code, data } = response.data
      
      if (code === 200) {
        this.userList = data.list
      }
    }
  }
}

2. 使用枚举

javascript 复制代码

export default {
  // 定义状态枚举
  STATUS: {
    ACTIVE: 1,
    INACTIVE: 0,
    DELETED: -1
  },
  
  data() {
    return {
      status: this.STATUS.ACTIVE
    }
  },
  
  computed: {
    statusText() {
      const { ACTIVE, INACTIVE, DELETED } = this.STATUS
      
      const map = {
        [ACTIVE]: '激活',
        [INACTIVE]: '未激活',
        [DELETED]: '已删除'
      }
      
      return map[this.status] || '未知'
    }
  }
}

3. 配置常量

javascript 复制代码

// config/constants.js
export const API_CONFIG = {
  BASE_URL: process.env.VUE_APP_BASE_URL,
  TIMEOUT: 10000,
  RETRY_COUNT: 3
}

export const TABLE_CONFIG = {
  PAGE_SIZE: 10,
  PAGE_NO: 1
}

export const STATUS_MAP = {
  1: { label: '激活', color: 'green' },
  0: { label: '未激活', color: 'red' }
}

javascript 复制代码

// 在组件中使用
import { API_CONFIG, STATUS_MAP } from '@/config/constants'

export default {
  data() {
    return {
      status: 1
    }
  },
  
  computed: {
    statusColor() {
      return STATUS_MAP[this.status]?.color || 'default'
    }
  },
  
  methods: {
    async fetchData() {
      const url = `${API_CONFIG.BASE_URL}/users`
      await axios.get(url, {
        timeout: API_CONFIG.TIMEOUT
      })
    }
  }
}

五、Vue 3中的const

1. Composition API

复制代码

<script setup>
// ✅ 使用const声明响应式数据
import { ref, reactive, computed } from 'vue'

// 基本类型使用ref
const count = ref(0)

// 对象类型使用reactive
const user = reactive({
  name: '张三',
  age: 25
})

// 计算属性使用const
const doubleCount = computed(() => count.value * 2)

// 常量使用const
const MAX_COUNT = 100

function increment() {
  if (count.value < MAX_COUNT) {
    count.value++
  }
}
</script>

2. 响应式数据的const使用

复制代码

<script setup>
import { ref, reactive, readonly } from 'vue'

// 响应式引用（可以重新赋值）
const count = ref(0)
count.value = 1  // ✅ 可以修改.value

// 只读响应式对象
const state = reactive({
  count: 0
})

// 创建只读副本
const readonlyState = readonly(state)

state.count = 1      // ✅ 可以修改原对象
readonlyState.count = 2  // ❌ 警告：不能修改只读对象
</script>

六、常见使用场景

1. API接口定义

javascript 复制代码

// api/user.js
const BASE_URL = '/api'

export const userApi = {
  // 获取用户列表
  getList: (params) => {
    return axios.get(`${BASE_URL}/users`, { params })
  },
  
  // 获取用户详情
  getDetail: (id) => {
    return axios.get(`${BASE_URL}/users/${id}`)
  },
  
  // 创建用户
  create: (data) => {
    return axios.post(`${BASE_URL}/users`, data)
  },
  
  // 更新用户
  update: (id, data) => {
    return axios.put(`${BASE_URL}/users/${id}`, data)
  },
  
  // 删除用户
  delete: (id) => {
    return axios.delete(`${BASE_URL}/users/${id}`)
  }
}

2. 表单验证规则

javascript 复制代码

// constants/formRules.js
export const formRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '长度在3-20个字符', trigger: 'blur' }
  ],
  
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ],
  
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ]
}

3. 表格列配置

javascript 复制代码

// constants/tableColumns.js
export const userTableColumns = [
  { title: 'ID', dataIndex: 'id', width: 80 },
  { title: '用户名', dataIndex: 'username', width: 150 },
  { title: '邮箱', dataIndex: 'email', width: 200 },
  { 
    title: '状态', 
    dataIndex: 'status',
    width: 100,
    customRender: (text) => text === 1 ? '激活' : '禁用'
  },
  { title: '创建时间', dataIndex: 'createTime', width: 180 },
  { title: '操作', key: 'action', fixed: 'right', width: 200 }
]

七、注意事项

1. 必须初始化

javascript 复制代码

// ❌ 错误：const必须初始化
const name
name = '张三'  // SyntaxError

// ✅ 正确
const name = '张三'

2. 暂存死区

javascript 复制代码

console.log(myConst)  // ReferenceError: Cannot access 'myConst' before initialization

const myConst = 'hello'

3. 块级作用域

javascript 复制代码

{
  const x = 10
  console.log(x)  // 10
}

console.log(x)  // ReferenceError: x is not defined

八、最佳实践总结

场景	推荐使用
组件配置常量	`const`
API接口路径	`const`
枚举值	`const`
响应式数据	`data()`或`ref/reactive`
循环变量	`let`或`const`（for-of/for-in）
需要重新赋值	`let`
不需要重新赋值	`const`

核心要点：

const声明的变量不能重新赋值，但对象/数组内容可以修改
Vue的data()返回对象中的属性不能用const
推荐在组件顶层、方法内定义常量时使用const
Vue 3的ref和reactive本身就是响应式，但声明时用const