Vue3响应式系统与Composition API深度解析 – 前端开发实战教程

Vue3响应式系统原理

Vue3使用Proxy替代了Vue2中的Object.defineProperty来实现响应式系统，这带来了更好的性能和更全面的数据劫持能力。

ref与reactive的区别

Vue3提供了两种创建响应式数据的方法：ref和reactive。

const count = ref(0);
console.log(count.value); // 0
count.value++; // 响应式更新
                        

const state = reactive({
  count: 0,
  name: 'Vue3'
});
console.log(state.count); // 0
state.count++; // 响应式更新
                        

ref适用于基本数据类型，reactive适用于对象类型。ref在模板中会自动解包，无需使用.value访问。

Composition API核心概念

Composition API是Vue3最重要的特性之一，它提供了更好的代码组织和逻辑复用能力。

setup()函数

setup()是Composition API的入口点，它在组件实例创建之前执行。

export default {
  setup(props, context) {
    // 响应式数据
    const count = ref(0);
    
    // 方法
    function increment() {
      count.value++;
    }
    
    // 计算属性
    const doubleCount = computed(() => count.value * 2);
    
    // 生命周期钩子
    onMounted(() => {
      console.log('组件已挂载');
    });
    
    // 返回模板中可用的数据和方法
    return {
      count,
      increment,
      doubleCount
    };
  }
};
                    

实战案例：任务管理器

下面我们使用Vue3的Composition API构建一个简单的任务管理器。

实现代码解析

const { createApp, ref, computed, onMounted } = Vue;

createApp({
  setup() {
    // 响应式数据
    const newTask = ref('');
    const tasks = ref([]);
    
    // 添加任务
    function addTask() {
      if (newTask.value.trim()) {
        tasks.value.push({
          text: newTask.value.trim(),
          completed: false,
          createdAt: new Date()
        });
        newTask.value = '';
        saveTasks();
      }
    }
    
    // 切换任务状态
    function toggleTask(index) {
      tasks.value[index].completed = !tasks.value[index].completed;
      saveTasks();
    }
    
    // 删除任务
    function removeTask(index) {
      tasks.value.splice(index, 1);
      saveTasks();
    }
    
    // 保存任务到本地存储
    function saveTasks() {
      localStorage.setItem('tasks', JSON.stringify(tasks.value));
    }
    
    // 加载任务
    function loadTasks() {
      const savedTasks = localStorage.getItem('tasks');
      if (savedTasks) {
        tasks.value = JSON.parse(savedTasks);
      }
    }
    
    // 计算属性
    const totalTasks = computed(() => tasks.value.length);
    const completedTasks = computed(() => 
      tasks.value.filter(task => task.completed).length
    );
    
    // 生命周期钩子
    onMounted(() => {
      loadTasks();
    });
    
    return {
      newTask,
      tasks,
      addTask,
      toggleTask,
      removeTask,
      totalTasks,
      completedTasks
    };
  }
}).mount('#app');
                    

Composition API的优势

与Options API相比，Composition API提供了以下优势：

• 更好的逻辑组织：相关逻辑可以组织在一起，而不是分散在不同的选项中
• 更好的逻辑复用：可以轻松提取和复用逻辑，避免混入(mixins)的问题
• 更好的类型推断：对TypeScript提供更好的支持
• 更小的生产包：更好的tree-shaking支持，减少打包体积

自定义组合函数

Composition API最强大的功能之一是能够创建自定义组合函数，实现逻辑复用。

// useLocalStorage.js
import { ref, watch } from 'vue';

export function useLocalStorage(key, defaultValue) {
  const data = ref(JSON.parse(localStorage.getItem(key)) || defaultValue);
  
  watch(data, newValue => {
    localStorage.setItem(key, JSON.stringify(newValue));
  }, { deep: true });
  
  return data;
}

// 在组件中使用
import { useLocalStorage } from './useLocalStorage';

export default {
  setup() {
    const tasks = useLocalStorage('tasks', []);
    
    return {
      tasks
    };
  }
};
                    

总结

Vue3的响应式系统和Composition API为前端开发带来了全新的体验。通过Proxy实现的响应式系统提供了更好的性能，而Composition API则解决了大型应用中逻辑组织和复用的问题。

通过本文的讲解和实战案例，你应该对Vue3的核心概念有了更深入的理解。建议在实际项目中尝试使用这些新特性，体验它们带来的优势。