Vue.js 响应接口

在 Vue.js 中，“响应式接口”指的是 Vue 提供的用于创建、读取和修改响应式数据的核心 API。这些 API 能够让数据的变化自动触发视图更新。

Vue 2 和 Vue 3 的响应式实现机制不同，因此 API 也有显著差异。

一、Vue 3 响应式 API (Composition API)

Vue 3 基于 ES6Proxy实现，提供了更灵活、更强大的响应式系统。

1.ref()：基本类型与对象的响应式

用于创建响应式数据，自动解包（在模板中访问时去掉.value）。

import{ref}from'vue';// 基本类型constcount=ref(0);count.value++;// 修改必须加 .value// 对象（自动转为 reactive）constuser=ref({name:'Tom',age:20});user.value.name='Jerry';// 修改

特点：

• 在模板中自动解包：{{ count }}直接显示值，无需{{ count.value }}。
• 在 JS 中访问必须加.value。
• 可以包裹任何类型（包括对象、数组）。

2.reactive()：对象的响应式

用于创建对象或数组的响应式代理，不需要.value。

import{reactive}from'vue';conststate=reactive({count:0,user:{name:'Tom'},list:[1,2,3]});state.count++;// 直接修改，无需 .valuestate.user.name='Jerry';state.list.push(4);

特点：

• 只能用于对象或数组。
• 修改时不需要.value。
• 注意：不能直接替换整个对象（state = {}会失去响应性），必须修改内部属性。

3.computed()：计算属性

基于现有响应式数据派生出新的数据，缓存结果，依赖变化时重新计算。

import{ref,computed}from'vue';constfirstName=ref('John');constlastName=ref('Doe');constfullName=computed(()=>{returnfirstName.value+' '+lastName.value;});// 使用console.log(fullName.value);// "John Doe"// 修改依赖firstName.value='Jane';console.log(fullName.value);// "Jane Doe" (自动更新)

特点：

• 只读（默认），不能直接赋值。
• 支持读写（传入get和set）。
• 具有缓存性，依赖不变时不重新计算。

4.watch()和watchEffect()：侦听器

监听数据变化并执行副作用。

watch()：显式监听指定数据

import{ref,watch}from'vue';constcount=ref(0);watch(count,(newVal,oldVal)=>{console.log(`count changed:${oldVal}->${newVal}`);});count.value++;// 触发

watchEffect()：自动收集依赖

立即执行，并自动追踪内部使用的响应式数据。

import{ref,watchEffect}from'vue';constcount=ref(0);watchEffect(()=>{console.log('Count is:',count.value);// 自动追踪 count});count.value++;// 触发

二、Vue 2 响应式 API (Options API)

Vue 2 基于Object.defineProperty实现，API 相对固定。

1.data()选项

在组件选项中定义响应式数据。

exportdefault{data(){return{count:0,user:{name:'Tom'}};},methods:{increment(){this.count++;// 直接修改}}};

2.Vue.set()/this.$set()

解决 Vue 2 的两大限制：

1. 动态添加属性不响应。
2. 数组索引修改不响应。

// 动态添加属性this.$set(this.user,'age',20);// 或 Vue.set(this.user, 'age', 20)// 修改数组索引this.$set(this.list,0,999);

3.Vue.delete()/this.$delete()

删除对象属性并触发更新。

this.$delete(this.user,'age');

4.watch选项

exportdefault{data(){return{question:'',answer:'...'};},watch:{question(newVal,oldVal){// 监听 question 变化}}};

三、Vue 2 vs Vue 3 核心差异

四、最佳实践与注意事项

1.refvsreactive怎么选？

• 推荐默认使用ref：
  • 统一使用ref可以避免.value的混淆（在模板中自动解包）。
  • 可以方便地替换整个对象（state.value = newObj）。
• reactive适用场景：
  • 确定只处理对象/数组，且不需要替换整个对象。
  • 代码风格偏好（不想写.value）。

2. 解构响应式对象

直接解构会失去响应性：

const{count}=state;// ❌ 失去响应性

解决方案：

• 使用toRefs：将对象属性转换为ref。

import{toRefs}from'vue';const{count,name}=toRefs(state);// ✅ 保持响应性

• 或者在模板中直接访问：{{ state.count }}。

3. 响应式丢失场景

• Vue 2：动态添加属性、数组索引修改。
• Vue 3：
  • 将reactive对象解构（const { count } = state）。
  • 将ref对象赋值给普通变量（let c = count，需c.value）。
  • 使用Object.assign替换整个reactive对象。

4. 性能优化

• shallowRef/shallowReactive：
  对于大型对象（如 ECharts 实例、DOM 节点），不需要深层响应式，使用浅层 API 提升性能。

  import{shallowRef}from'vue';constchart=shallowRef(null);// 只监听 chart 本身变化，不监听内部属性

五、总结

核心原则：

• Vue 3 推荐使用ref+reactive+computed+watch组合。
• Vue 2 需注意set/delete的特殊用法。
• 响应式系统的核心是数据变化自动触发视图更新，理解其机制能避免常见坑点。