Vue 3.x全面升级指南:Composition API深度探索

简介: Vue 3.x 的全面升级引入了 Composition API,这是对 Vue 2.x 传统 Options API 的一个重大改进,它提供了更加灵活和模块化的代码组织方式.

Vue 3.x 的全面升级引入了 Composition API,这是对 Vue 2.x 传统 Options API 的一个重大改进,它提供了更加灵活和模块化的代码组织方式.

Composition API的核心概念和函数

setup()函数:

Vue 3 中的核心入口,用于设置组件的状态和逻辑,它在 beforeCreate 钩子之后,create 钩子之前执行。代替了原本在 data、methods 等选项中定义的内容。

import {
    ref, computed } from 'vue';

export default {
   
  setup() {
   
    // 响应式数据
    const count = ref(0);

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

    // 方法
    function increment() {
   
      count.value++;
    }

    // 返回需要在模板中使用的数据和方法
    return {
   
      count,
      doubleCount,
      increment
    };
  }
};

ref 和 reactive:

用于创建响应式数据,ref用于创建基本类型的响应式数据,reactive 用于对象和数组的响应式代理。

import {
    ref, reactive } from 'vue';

export default {
   
  setup() {
   
    // 使用ref创建响应式基本类型
    const count = ref(0);

    // 使用reactive创建响应式对象
    const user = reactive({
   
      name: 'Alice',
      age: 30
    });

    // 修改响应式数据
    count.value++;
    user.age++;

    return {
    count, user };
  }
};

计算属性与侦听器:

computed 用于创建计算属性,只有当依赖发生变化时才会重新计算。

import {
    ref, computed } from 'vue';

export default {
   
  setup() {
   
    const firstName = ref('John');
    const lastName = ref('Doe');

    // 计算全名
    const fullName = computed(() => `${
     firstName.value} ${
     lastName.value}`);

    return {
    firstName, lastName, fullName };
  }
};

watch 用于观察响应式数据的变化,并在变化时执行回调。

import {
    ref, watch } from 'vue';

export default {
   
  setup() {
   
    const count = ref(0);

    // 观察count变化
    watch(count, (newVal, oldVal) => {
   
      console.log(`count changed from ${
     oldVal} to ${
     newVal}`);
    });

    function increment() {
   
      count.value++;
    }

    return {
    count, increment };
  }
};

组合函数

Composition API鼓励创建可复用的组合函数。

// useCounter.js
export function useCounter(initialValue = 0) {
   
  const count = ref(initialValue);
  function increment() {
   
    count.value++;
  }
  return {
    count, increment };
}

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

export default {
   
  setup() {
   
    const {
    count, increment } = useCounter(10);
    return {
    count, increment };
  }
};

生命周期钩子:

Vue 3 中的生命周期钩子不再直接在 setup() 内部使用,而是通过 onBeforeMount、onMounted 等新的生命周期钩子函数。

1. onBeforeMount: 此钩子在组件挂载到DOM之前被调用。这类似于Vue 2.x中的 beforeMount 生命周期钩子。

   import {
    onBeforeMount } from 'vue';

   export default {
   
     setup() {
   
       onBeforeMount(() => {
   
         console.log('组件即将挂载');
       });
     }
   };

2. onMounted: 当组件被挂载到DOM上后立即调用。相当于Vue 2.x的 mounted

   import {
    onMounted } from 'vue';

   export default {
   
     setup() {
   
       onMounted(() => {
   
         console.log('组件已挂载');
       });
     }
   };

3. onBeforeUpdate: 在组件数据变化导致的更新之前调用,但还未开始DOM更新。类似于Vue 2.x的 beforeUpdate

   import {
    onBeforeUpdate } from 'vue';

   export default {
   
     setup() {
   
       let previousData;
       onBeforeUpdate(() => {
   
         console.log('数据更新前:', previousData);
       });

       return {
    data };
     }
   };

4. onUpdated: 组件数据变化导致的DOM更新完成后调用。相当于Vue 2.x的 updated。

   import {
    onUpdated } from 'vue';

   export default {
   
     setup() {
   
       onUpdated(() => {
   
         console.log('组件更新完成');
       });
     }
   };

5. onBeforeUnmount: 组件卸载之前调用。类似于Vue 2.x的 beforeDestroy。

   import {
    onBeforeUnmount } from 'vue';

   export default {
   
     setup() {
   
       onBeforeUnmount(() => {
   
         console.log('组件即将卸载');
       });
     }
   };

6. onUnmounted: 组件已经被卸载后调用。相当于Vue 2.x的 destroyed。

   import {
    onUnmounted } from 'vue';

   export default {
   
     setup() {
   
       onUnmounted(() => {
   
         console.log('组件已卸载');
       });
     }
   };

7. onActivated: 仅在使用 <keep-alive> 包裹的组件激活时调用。

   import {
    onActivated } from 'vue';

   export default {
   
     setup() {
   
       onActivated(() => {
   
         console.log('组件被激活');
       });
     }
   };

8. onDeactivated: 仅在使用 <keep-alive> 包裹的组件停用时调用。

   import {
    onDeactivated } from 'vue';

   export default {
   
     setup() {
   
       onDeactivated(() => {
   
         console.log('组件被停用');
       });
     }
   };

Composition API编写组件

  • 创建响应式数据:使用 ref 和 reactive 创建响应式变量。
  • 计算属性:使用 computed 函数创建计算属性。
  • 响应式函数:使用 toRefs() 和 toRef() 转换对象属性为响应式。
  • 监听器:使用 watch 或 watchEffect 监听数据变化。
import {
    ref, reactive, computed, toRefs, watch } from 'vue';
import axios from 'axios';

export default {
   
  setup() {
   
    // 创建响应式数据
    const state = reactive({
   
      cityInput: '',
      city: '',
      weather: null
    });

    // 计算属性,直接返回输入的城市名称
    const currentCity = computed(() => state.cityInput);

    // 将state对象的属性转化为响应式引用
    const {
    cityInput } = toRefs(state);

    // 响应式函数,用于处理API请求
    const fetchWeather = async () => {
   
      if (!cityInput.value.trim()) return;

      try {
   
        const response = await axios.get(`https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=${
     cityInput.value}`);
        state.city = response.data.location.name;
        state.weather = {
    temp: response.data.current.temp_c };
      } catch (error) {
   
        console.error('获取天气信息失败', error);
      }
    };

    // 监听器,监听城市输入变化,清空天气信息
    watch(cityInput, () => {
   
      state.weather = null;
    });

    // 返回暴露给模板的变量和方法
    return {
   
      cityInput,
      currentCity,
      fetchWeather
    };
  }
};
  • 创建响应式数据:使用reactive创建了一个包含cityInputcityweather的响应式对象。ref也可以用于基本类型的响应式数据,但在这个场景下,reactive更适合管理多个状态。

  • 计算属性: currentCity计算属性直接返回state.cityInput的值,虽然在这个例子中直接使用v-model="cityInput"可能更直观,但展示了如何定义计算属性。

  • 响应式函数: 使用toRefsstate对象的属性转化为独立的响应式引用,便于在模板中直接绑定。这里主要展示了响应式数据的使用,而不是转换函数本身,因为直接使用解构赋值(如const { cityInput } = state;)在模板中已经足够。

  • 监听器: 使用watch监听cityInput的变化,每次输入变化时清除weather状态,以便于下次查询。

从Options API迁移到Composition API

组件结构

将状态、方法和逻辑分离到单独的函数中。在Options API中,我们通常在组件选项中定义data、methods、computed等。而在Composition API中,这些逻辑被分离到单独的函数中。例如:

Options API:

export default {
   
  data() {
   
    return {
   
      message: 'Hello, Vue!'
    };
  },
  methods: {
   
    greet() {
   
      console.log(this.message);
    }
  },
  computed: {
   
    reversedMessage() {
   
      return this.message.split('').reverse().join('');
    }
  }
};

Composition API:

import {
    ref, computed } from 'vue';

export default {
   
  setup() {
   
    const message = ref('Hello, Vue!');

    function greet() {
   
      console.log(message.value);
    }

    const reversedMessage = computed(() => message.value.split('').reverse().join(''));

    return {
   
      message,
      greet,
      reversedMessage
    };
  }
};

依赖注入

使用 provide 和 inject。在Options API中,我们使用provide和inject来传递数据。在Composition API中,这个过程保持不变:

Options API:

// 父组件
export default {
   
  provide() {
   
    return {
   
      parentValue: '父组件的值'
    };
  }
};

// 子组件
export default {
   
  inject: ['parentValue'],
  mounted() {
   
    console.log(this.parentValue); // 输出 "父组件的值"
  }
};

Composition API:

// 父组件
export default {
   
  setup() {
   
    provide('parentValue', '父组件的值');
  }
};

// 子组件
export default {
   
  setup(_, {
    inject }) {
   
    const parentValue = inject('parentValue');
    onMounted(() => {
   
      console.log(parentValue); // 输出 "父组件的值"
    });
  }
};

模板重构

将绑定的属性和方法从 this 转换为直接引用。

2500G计算机入门到高级架构师开发资料超级大礼包免费送!

相关文章
|
10天前
|
JavaScript 前端开发 测试技术
【vue实战项目】通用管理系统:api封装、404页
【vue实战项目】通用管理系统:api封装、404页
19 3
|
30天前
|
API
1天搞定SpringBoot+Vue全栈开发 (2)RESTful API与Swagger
1天搞定SpringBoot+Vue全栈开发 (2)RESTful API与Swagger
|
1月前
|
安全 API 开发者
智能体-Agent能力升级!新增Assistant API & Tools API服务接口
ModelScope-Agent是一个交互式创作空间,它支持LLM(Language Model)的扩展能力,例如工具调用(function calling)和知识检索(knowledge retrieval)。它已经对相关接口进行了开源,以提供更原子化的应用LLM能力。用户可以通过Modelscope-Agent上的不同代理(agent),结合自定义的LLM配置和消息,调用这些能力。
|
1月前
|
JavaScript API 开发者
Vue3有哪些常用的API
Vue3有哪些常用的API
16 1
|
1月前
|
JavaScript 前端开发 API
组合API:掌握Vue的组合式API(Composition API)
【4月更文挑战第24天】Vue.js的组合式API是Vue 3中的新特性,旨在提供更灵活的组件逻辑组织方式。它允许开发者像React Hooks一样定义和复用逻辑单元——组合函数。通过组合函数,可以跨组件共享和管理状态,提升代码复用和维护性。本文介绍了如何开始使用组合式API,包括安装Vue CLI、引入API、使用组合函数以及组织和复用逻辑。掌握组合式API能增强开发复杂应用的能力,改善代码结构和可读性。
|
4天前
|
存储 前端开发 安全
Nuxt3 实战 (十):使用 Supabase 实现 RESTful 风格 API 接口
这篇文章介绍了如何使用Supabase实现RESTful风格的API接口,用于网站分类和子站点的增删改查(CURD)功能。文章首先阐述了表设计,包括ds_categorys和ds_websites两张表的列名、类型和用途,并提到了为每张表添加的user_id和email字段以支持用户身份识别。接着,文章描述了接口设计,以ds_websites表为例,说明了如何通过RESTful API实现CURD功能,并给出了使用SupabaseClient实现插入数据的相关代码。文章最后提供了项目效果预览和总结,指出学习了Nuxt3创建接口及调用Supabase数据库操作。
Nuxt3 实战 (十):使用 Supabase 实现 RESTful 风格 API 接口
|
1天前
|
自然语言处理 安全 API
触发邮件接口有哪些?邮件API文档
**触发邮件接口**如AokSend、Mailgun、Amazon SES、Postmark和Sendinblue是自动化企业通信的关键。这些接口在特定事件时自动发送邮件,提高效率和客户体验。例如,AokSend提供详细的API文档,支持事件触发、模板管理和多语言集成;Mailgun以灵活性著称;Amazon SES适合大规模发送;Postmark专注于事务邮件;Sendinblue则提供邮件、短信和营销自动化功能。每种服务都有示例代码展示如何使用API发送邮件。选择合适的接口能提升企业通信效率和客户满意度。
|
3天前
|
XML 安全 API
API攻防-接口安全&SOAP&OpenAPI&RESTful&分类特征导入&项目联动检测
API攻防-接口安全&SOAP&OpenAPI&RESTful&分类特征导入&项目联动检测
|
2天前
|
Java API
java调用个人微信API接口收发朋友圈,删除评论朋友圈
java调用个人微信API接口收发朋友圈,删除评论朋友圈
|
2天前
|
安全 API 网络安全
API接口安全加固:应对黑客攻击的实战指南
**API安全摘要:** API成为黑客目标,攻击类型包括未授权访问、CSRF、DDoS、数据泄露和注入攻击。防御策略包括使用OAuth 2.0和JWT进行认证授权,防止CSRF攻击,限制请求速率,避免数据泄露,以及实施注入攻击防护。开发者应定期更新安全措施,确保API安全性。示例代码展示了Node.js中JWT认证的实现。