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
    };
  }
};
AI 代码解读

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 };
  }
};
AI 代码解读

计算属性与侦听器:

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 };
  }
};
AI 代码解读

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 };
  }
};
AI 代码解读

组合函数

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 };
  }
};
AI 代码解读

生命周期钩子:

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

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

   import {
    onBeforeMount } from 'vue';

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

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

   import {
    onMounted } from 'vue';

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

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

   import {
    onBeforeUpdate } from 'vue';

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

       return {
    data };
     }
   };
AI 代码解读

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

   import {
    onUpdated } from 'vue';

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

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

   import {
    onBeforeUnmount } from 'vue';

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

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

   import {
    onUnmounted } from 'vue';

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

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

   import {
    onActivated } from 'vue';

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

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

   import {
    onDeactivated } from 'vue';

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

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
    };
  }
};
AI 代码解读
  • 创建响应式数据:使用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('');
    }
  }
};
AI 代码解读

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
    };
  }
};
AI 代码解读

依赖注入

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

Options API:

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

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

Composition API:

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

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

模板重构

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

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

目录
打赏
0
0
0
0
38
分享
相关文章
Vue.js 3中的Composition API:提升你的组件开发体验
Vue.js 3中的Composition API:提升你的组件开发体验
深入理解 Vue 3 的 Composition API 与新特性
本文详细探讨了 Vue 3 中的 Composition API,包括 setup 函数的使用、响应式数据管理(ref、reactive、toRefs 和 toRef)、侦听器(watch 和 watchEffect)以及计算属性(computed)。我们还介绍了自定义 Hooks 的创建与使用,分析了 Vue 2 与 Vue 3 在响应式系统上的重要区别,并概述了组件生命周期钩子、Fragments、Teleport 和 Suspense 等新特性。通过这些内容,读者将能更深入地理解 Vue 3 的设计理念及其在构建现代前端应用中的优势。
84 1
深入理解 Vue 3 的 Composition API 与新特性
Vue 3新特性详解:Composition API的威力
【10月更文挑战第25天】Vue 3 引入的 Composition API 是一组用于组织和复用组件逻辑的新 API。相比 Options API,它提供了更灵活的结构,便于逻辑复用和代码组织,特别适合复杂组件。本文将探讨 Composition API 的优势,并通过示例代码展示其基本用法,帮助开发者更好地理解和应用这一强大工具。
59 2
|
4月前
|
API
《vue3第四章》Composition API 的优势,包含Options API 存在的问题、Composition API 的优势
《vue3第四章》Composition API 的优势,包含Options API 存在的问题、Composition API 的优势
40 0
《vue3第六章》其他,包含:全局API的转移、其他改变
《vue3第六章》其他,包含:全局API的转移、其他改变
33 0
速卖通商品详情接口(速卖通API系列)
速卖通(AliExpress)是阿里巴巴旗下的跨境电商平台,提供丰富的商品数据。通过速卖通开放平台(AliExpress Open API),开发者可获取商品详情、订单管理等数据。主要功能包括商品搜索、商品详情、订单管理和数据报告。商品详情接口aliexpress.affiliate.productdetail.get用于获取商品标题、价格、图片等详细信息。开发者需注册账号并创建应用以获取App Key和App Secret,使用PHP等语言调用API。该接口支持多种请求参数和返回字段,方便集成到各类电商应用中。
微店商品列表接口(微店 API 系列)
微店商品列表接口是微店API系列的一部分,帮助开发者获取店铺中的商品信息。首先需注册微店开发者账号并完成实名认证,选择合适的开发工具如PyCharm或VS Code,并确保熟悉HTTP协议和JSON格式。该接口支持GET/POST请求,主要参数包括店铺ID、页码、每页数量和商品状态等。响应数据为JSON格式,包含商品详细信息及状态码。Python示例代码展示了如何调用此接口。应用场景包括商品管理系统集成、数据分析、多平台数据同步及商品展示推广。
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
32 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
亚马逊商品详情接口(亚马逊 API 系列)
亚马逊作为全球最大的电商平台之一,提供了丰富的商品资源。开发者和电商从业者可通过亚马逊商品详情接口获取商品的描述、价格、评论、排名等数据,对市场分析、竞品研究、价格监控及业务优化具有重要价值。接口基于MWS服务,支持HTTP/HTTPS协议,需注册并获得API权限。Python示例展示了如何使用mws库调用接口获取商品详情。应用场景包括价格监控、市场调研、智能选品、用户推荐和库存管理等,助力电商运营和决策。
54 23
lazada商品详情接口 (lazada API系列)
Lazada 是东南亚知名电商平台,提供海量商品资源。通过其商品详情接口,开发者和商家可获取商品标题、价格、库存、描述、图片、用户评价等详细信息,助力市场竞争分析、商品优化及库存管理。接口采用 HTTP GET 请求,返回 JSON 格式的响应数据,支持 Python 等语言调用。应用场景包括竞品分析、价格趋势研究、用户评价分析及电商应用开发,为企业决策和用户体验提升提供有力支持。
54 21

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等