Vue3中Composition API的核心用法

最新推荐文章于 2024-08-03 00:12:43 发布

Always--Learning

最新推荐文章于 2024-08-03 00:12:43 发布

阅读量901

点赞数

分类专栏：前端 Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/sinat_41696687/article/details/121848502

版权

Vue3的Composition API提供了更灵活的组件构造方式，解决了大型项目中代码维护性和复用性的难题。本文详细介绍了如何在setup中使用ref、reactive、toRefs、计算属性、readonly、watchEffect、watch等核心概念，并探讨了它们的区别和应用场景。同时，还涵盖了setup中的生命周期钩子函数、props、Provide与Inject的用法，特别是如何在组件间同步数据。

摘要由CSDN通过智能技术生成

什么是Composition API?

Composition API也叫组合式API，是Vue3.x中的新特性。通过创建Vue组件，我们可以将接口的可重复部分提取到可重用的代码段中，没有Composition API之前Vue相关业务的代码需要配置到option的特定区域，如果在大型项目中这种方式会导致后期的维护性比较复杂，同时代码可复用性不高，Vue3的Composition API就是解决这个问题的。

在setup中使用ref和reactive定义响应式数据

使用ref和reactive定义数据前，需要从vue中进行解构。

import {
   ref,reactive} from 'vue';

ref和reactive均可以定义响应式数据，定义的数据在Vue模板中可以直接获取，但是如果通过方法获取的话，ref和reactive定义的数据在获取上有一定的差异，ref定义的需要通过value属性间接获取，reactive定义的数据可以直接获取，在修改这两类数据也是如此。

export default {
   
  setup() {
   
    // 使用ref定义响应式数据
    const title = ref("这是一个标题");
    // 使用reactive定义响应式数据
    const userinfo = reactive({
   
      username: "张三",
      age: 20
    });
    // 获取reactive中的属性可以直接获取
    const getUserName = () => {
   
      alert(userinfo.username)
    };
    // 获取ref中的数据需要通过value属性
    const getTitle = () => {
   
      alert(title.value)
    };
    const setUserName = () => {
   
      // 修改reactive中的属性可以直接修改
      userinfo.username = "修改后的张三"
    };
    const setTitle = () => {
   
      // 修改ref中的属性，需要通过value
      title.value = "这是修改后的标题"
    };
    return {
   
      title,
      userinfo,
      getUserName,
      getTitle,
      setTitle,
      setUserName
    }
  },
  data() {
   
    return {
   
      msg: "这是Home组件的msg"
    }
  },
  methods: {
   
    run() {