Vue3使用Composition API实现响应式

于 2024-05-29 20:25:20 发布
阅读量1.2k 收藏 16
点赞数 37
分类专栏： 好用的工具集合 文章标签： Debugging Lifecycle Watch Reactive Refs Composition Vue3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42210428/article/details/139305042
版权

title: Vue3使用Composition API实现响应式
date: 2024/5/29 下午8:10:24
updated: 2024/5/29 下午8:10:24
categories:

  • 前端开发

tags:

  • Vue3
  • Composition
  • Refs
  • Reactive
  • Watch
  • Lifecycle
  • Debugging

在这里插入图片描述

1. 介绍

Composition API是Vue.js 3中新增的一组API，用于在组件中组合逻辑和功能。它可以让你更好地组织和重用代码，使组件更易于理解和维护。在使用Composition
API时，你可以使用<script setup>语法或setup()函数，两种方式都可以使用Composition API中的响应式API、生命周期钩子、模板引用和自定义渲染函数等特性。

2. 基本响应式

在Vue.js 3中，Composition API提供了几种创建响应式数据的方法，包括ref、reactive、readonly、shallowReactive
和shallowReadonly。

2.1 ref

ref函数用于创建一个响应式的ref对象，其值可以通过.value
属性获取或设置。当ref对象的值发生变化时，Vue.js会自动更新视图。AD：首页 | 一个覆盖广泛主题工具的高效在线平台

<template>
  <div>
    <p>count: {{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const count = ref(0);

function increment() {
  count.value++;
}
</script>

2.2 reactive

reactive函数用于创建一个响应式的对象，其所有属性都是响应式的。当对象的属性发生变化时，Vue.js会自动更新视图。

<template>
  <div>
    <p>name: {{ user.name }}</p>
    <p>age: {{ user.age }}</p>
    <button @click="incrementAge">+1</button>
  </div>
</template>

<script setup>
import { reactive } from 'vue';

const user = reactive({
  name: 'Alice',
  age: 20
});

function incrementAge() {
  user.age++;
}
</script>

2.3 readonly

readonly函数用于创建一个只读的响应式对象，其所有属性都是只读的。当试图修改只读对象的属性时，会抛出一个错误。

<template>
  <div>
    <p>name: {{ user.name }}</p>
    <p>age: {{ user.age }}</p>
  </div>
</template>

<script setup>
import { reactive, readonly } from 'vue';

const user = reactive({
  name: 'Alice',
  age: 20
});

const readonlyUser = readonly(user);

// 会抛出一个错误
readonlyUser.age = 21;
</script>

2.4 shallowReactive

shallowReactive函数用于创建一个浅响应式的对象，其所有属性都是响应式的，但其子对象的属性不是响应式的。
AD：专业搜索引擎

<template>
  <div>
    <p>name: {{ user.name }}</p>
    <p>age: {{ user.age }}</p>
    <p>address: {{ user.address }}</p>
    <button @click="incrementAge">+1</button>
    <button @click="changeAddress">改变地址</button>
  </div>
</template>

<script setup>
import { shallowReactive } from 'vue';

const user = shallowReactive({
  name: 'Alice',
  age: 20,
  address: {
    province: 'Beijing',
    city: 'Beijing'
  }
});

function incrementAge() {
  user.age++;
}

function changeAddress() {
  user.address = {
    province: 'Shanghai',
    city: 'Shanghai'
  };
}
</script>

2.5 shallowReadonly

shallowReadonly函数用于创建一个浅只读的响应式对象，其所有属性都是只读的，但其子对象的属性不是只读的。

<template>
  <div>
    <p>name: {{ user.name }}</p>
    <p>age: {{ user.age }}</p>
    <p>address: {{ user.address }}</p>
    <!-- 会抛出一个错误 -->
    <button @click="changeAddress">改变地址</button>
  </div>
</template>

<script setup>
import { shallowReactive, shallowReadonly } from 'vue';

const user = shallowReactive({
  name: 'Alice',
  age: 20,
  address: {
    province: 'Beijing',
    city: 'Beijing'
  }
});

const readonlyUser = shallowReadonly(user);

// 会抛出一个错误
readonlyUser.age = 21;
</script>

3. 响应式API

Composition API提供了几种响应式API，包括watchEffect、watch、computed和provide/inject。

3.1 watchEffect

watchEffect函数用于创建一个响应式的副作用函数，当响应式数据发生变化时，副作用函数会自动重新执行。

<template>
  <div>
    <p>count: {{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<script setup>
import { ref, watchEffect } from 'vue';

const count = ref(0);

watchEffect(() => {
  console.log(`count is ${count.value}`);
});

function increment() {
  count.value++;
}
</script>

3.2 watch

watch函数用于创建一个响应式的监听器，当响应式数据发生变化时，监听器会自动执行。

<template>
  <div>
    <p>count: {{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';

const count = ref(0);

watch(count, (newValue, oldValue) => {
  console.log(`count changed from ${oldValue} to ${newValue}`);
});

function increment() {
  count.value++;
}
</script>

3.3 computed

computed函数用于创建一个响应式的计算属性，其值是根据响应式数据计算得出的。当响应式数据发生变化时，计算属性会自动重新计算。
AD：漫画首页

<template>
  <div>
    <p>count: {{ count }}</p>
    <p>doubleCount: {{ doubleCount }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const count = ref(0);

const doubleCount = computed(() => {
  return count.value * 2;
});

function increment() {
  count.value++;
}
</script>

3.4 provide/inject

provide和inject函数用于在组件树中传递数据。provide函数用于在父组件中提供数据，inject函数用于在子组件中注入数据。

<template>
  <div>
    <ChildComponent />
  </div>
</template>

<script setup>
import { provide } from 'vue';
import ChildComponent from './ChildComponent.vue';

provide('message', 'Hello, world!');
</script>

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script setup>
import { inject } from 'vue';

const message = inject('message');
</script>

4. 生命周期钩子

Composition
API提供了几种生命周期钩子，包括setup()、onBeforeMount()、onMounted()、onBeforeUpdate()、onUpdated()、onBeforeUnmount()、onUnmounted()、onErrorCaptured()、onRenderTracked()
和onRenderTriggered()。

4.1 setup()

setup()函数是Composition API的入口点，用于在组件创建之前执行一些初始化操作。

<template>
  <div>
    <p>count: {{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<script>
import { ref } from 'vue';

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

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

    return {
      count,
      increment
    };
  }
};
</script>

4.2 onBeforeMount()

onBeforeMount()函数在组件挂载之前执行。

<template>
  <div>
    <p>count: {{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<script>
import { ref } from 'vue';

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

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

    onBeforeMount(() => {
      console.log('before mount');
    });

    return {
      count,
      increment
    };
  }
};
</script>

4.3 onMounted()

onMounted()函数在组件挂载之后执行。

<template>
  <div>
    <p>count: {{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<script>
import { ref } from 'vue';

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

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

    onMounted(() => {
      console.log('mounted');
    });

    return {
      count,
      increment
    };
  }
};
</script>

4.4 onBeforeUpdate()

onBeforeUpdate()函数在组件更新之前执行。

<template>
  <div>
    <p>count: {{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<script>
import { ref } from 'vue';

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

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

    onBeforeUpdate(() => {
      console.log('before update');
    });

    return {
      count,
      increment
    };
  }
};
</script>

4.5 onUpdated()

onUpdated()函数在组件更新之后执行。

<template>
  <div>
    <p>count: {{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<script>
import { ref } from 'vue';

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

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

    onUpdated(() => {
      console.log('updated');
    });

    return {
      count,
      increment
    };
  }
};
</script>

4.6 onBeforeUnmount()

onBeforeUnmount()函数在组件卸载之前执行。

<template>
  <div>
    <p>count: {{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<script>
import { ref } from 'vue';

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

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

    onBeforeUnmount(() => {
      console.log('before unmount');
    });

    return {
      count,
      increment
    };
  }
};
</script>

4.7 onUnmounted()

onUnmounted()函数在组件卸载之后执行。

<template>
  <div>
    <p>count: {{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<script>
import { ref } from 'vue';

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

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

    onUnmounted(() => {
      console.log('unmounted');
    });

    return {
      count,
      increment
    };
  }
};
</script>

4.8 onErrorCaptured()

onErrorCaptured()函数在组件捕获到错误时执行。

<template>
  <div>
    <p>count: {{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<script>
import { ref } from 'vue';

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

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

    onErrorCaptured((error, instance, info) => {
      console.error(error);
      return false;
    });

    return {
      count,
      increment
    };
  }
};
</script>

4.9 onRenderTracked 和 onRenderTriggered

onRenderTracked和onRenderTriggered是两个生命周期钩子，它们与Vue的响应式系统和编译器有关。这两个钩子是在Vue
3.x版本中引入的，主要用于调试目的，帮助开发者了解组件渲染过程中的跟踪和触发情况。

  1. onRenderTracked钩子：

    • 当组件的响应式依赖项被追踪时，即响应式系统开始跟踪一个依赖项时，这个钩子会被调用。
    • 它主要用于调试，可以帮助开发者了解何时响应式系统开始关注某个依赖项。
    • onRenderTracked钩子接收两个参数：dep和context。dep是依赖项对象，context是当前组件的上下文对象。

  2. onRenderTriggered钩子：

    • 当组件的响应式依赖项被触发时，即响应式系统因为某个依赖项的变化而触发了重新渲染时，这个钩子会被调用。
    • 它主要用于调试，可以帮助开发者了解何时响应式系统因为某个依赖项的变化而重新渲染组件。
    • onRenderTriggered钩子也接收两个参数：dep和context，含义与onRenderTracked相同。

示例代码：

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

        // 监听 count 的变化
        watch(count, (newValue, oldValue) => {
            console.log(`count changed from ${oldValue} to ${newValue}`);
        });

        // 使用 onRenderTracked 和 onRenderTriggered 进行调试
        onRenderTracked((dep, context) => {
            console.log(`onRenderTracked: ${dep}`);
        });

        onRenderTriggered((dep, context) => {
            console.log(`onRenderTriggered: ${dep}`);
        });

        return {
            count
        };
    }
};

在这个示例中，我们定义了一个响应式数据count，并使用了watch来监听它的变化。同时，我们使用了onRenderTracked
和onRenderTriggered来打印调试信息。当响应式系统开始跟踪或触发重新渲染时，我们会得到相应的提示。这些钩子可以帮助开发者更好地理解Vue组件的渲染过程和响应式系统的运作。

qcidyu
关注
  • 37
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【Vue3新特性--响应性API】
xiaoxie_45的博客
02-14 495
响应性基础API reactive 返回对象的响应式副本 reactive 将解包所有深层的 refs，同时维持 ref 的响应性。 当将 ref 分配给 reactive property 时，ref 将被自动解包。 readonly 接受一个对象 (响应式或纯对象) 或 ref 并返回原始对象的只读代理 当将 ref 分配给 readonly property 时，ref 将被自动解包。 isProxy 检查对象是否是由 reactive 或 readonly 创建的 proxy。 isRe
Vue3中 响应式 API ( reactive、ref、toRef、toRefs ) 详解
明天也要努力的博客
07-12 5043
我们在写项目中，总会遇到变量的定义，在 Vue2 里面，我们只需要直接定义变量就行，但是在 Vue3 里面，官方为我们推出了定义变量的方式，那么接下来我们来看看，官方给出的函数：reactive、ref、toRef、toRefs。reactive 会对传入的引用类型进行包裹，创建一个该对象的 Proxy 代理。它是源对象的响应式副本，不等于原始对象。它“深层”转换了源对象的所有嵌套 property，解包并维持其中的任何 ref 引用关系。 reactive 将解包所有深层的 refs，同时维持 ref 的
Vue 3 中的新的响应式 API
lio-zero 的博客
03-09 194
这几天整理的一下过往的文章和笔记，备份到了 Github 上，地址???? blog。 如果我的内容帮助到了您，欢迎点个 Star ???????????? 鼓励鼓励 :) ~~ ???? Vue3 使用基于 ES6 Proxy 的新的响应性系统。 详细内容可查阅 Reactivity Fundamentals 和 Reactivity API: Utilities。 ref() Vue 有一个全局 ref() 方法，它...
Vue3 新特性之响应式 API
Ljwen_的博客
05-26 1327
1、ref ref接受一个内部值并返回一个响应式且可变的 ref 对象，ref 对象仅有一个 .value 属性，指向该内部值； <script setup> const refValue = ref('refValue') console.log(refValue) // ref 对象 console.log(refValue.value) // refValue </script> ref声明的变量，我们可以在 html代码中直接使用变量，但在 js
Vue3.0的新特性（3）响应式API
weixin_43365995的博客
02-28 464
我们在深入学习Object.defineProperty和Proxy讲解过Proxy优点以及Vue3为什么改用Proxy实现响应式，同时Vue3也将一些响应式的API进行抽离，以便代码更好的复用
浅谈Vue3 Composition API如何替换Vue Mixins
10-15
Vue3 允许我们创建自定义指令（如 `v-my-directive`），并且通过组合式函数（也称为组合函数或组合API）将复杂的逻辑封装起来，这些函数可以返回需要在 `setup()` 中使用的对象，例如响应式数据、计算属性和方法。...
vue3-composition-API
03-31
在Vue2中，我们主要使用Options API来组织组件逻辑，而在Vue3中，Composition API提供了更灵活的组合功能，将状态管理、副作用、计算属性等功能解耦出来，使其可以在不同组件之间共享。 Vue3 Composition API 的...
vue3项目框架，包含响应式布局
最新发布
04-29
3. **Ref和Reactivity**：Vue3的响应式系统进行了重构，使用了新的ref和reactive API，它们提供了更底层的访问和控制能力。Ref可以用来创建响应式引用，而reactive函数则可以将整个对象转换为响应式的。 4. **模板...
使用Vue Composition API写出清晰、可扩展的表单实现
10-15
5. **响应式系统的深度集成**：Composition API 直接与 Vue 的响应式系统集成，使得在组合函数中创建和管理响应式数据变得简单直接。 以下是一个使用 Vue Composition API 实现表单的基本步骤： 1. **创建组合函数...
详解Vue3 Composition API中的提取和重用逻辑
10-15
在 `setup` 函数中，我们可以使用 Vue3 的响应式工具如 `ref` 和 `onMounted`，像这样： ```javascript import { ref, onMounted } from 'vue'; export default { setup () { const articles = ref([]); const ...
Vue3-02 响应式API
多啦的博客
05-19 527
Vue3学习笔记-02 响应式API
vue3笔记5 响应式API
路过君的博客
02-13 477
浅响应式 shallowReactive 只创建第一层数据的响应式 适用于对象结构深，但只需处理最外层属性变化的场景 shallowRef 不处理对象类型的响应式，传对象时不会自动调用reactive 适用于逻辑中不修改对象属性，而替换整个对象的场景 只读 readonly 把响应式数据（ref/reactive）包装为只读的响应式数据 shallowReadonly 浅只读 适用于不希望数据被修改的场景，例如传递响应式数据时，不希望其他组件修改数据 将响应式对象转换为普通对象 toRaw 将reactiv
Vue3 composition API 和新的响应式原理解析
qq_46193451的博客
03-12 1061
vue3.0已经推出了一段时间了，相信很多人都已经跃跃欲试了，其中改动最大，最让人眼前一亮的当属composition API，有的人也会说，vue3推出composition API后，看起来越来越像react的hook了，那么原本的option API存在什么问题？为什么要用composition API替换掉？原理层面又是如何实现性能的飞跃的？接下来让我们一探究竟 什么是option API？ 在vue2及之前的版本，我们对于一个数据的处理，可能是在data中先进行声明，然后再methods中添加相关
Vue.js 3.0的Composition API中的三个创建响应式数据的函数reactive、toRefs、ref
前端高薪进击手记
07-29 1140
本文将介绍Vue.js 3.0中三个创建响应式数据的函数reactive、toRefs、ref reactive：把对象转换成一个响应式对象，也就是一个Proxy对象。 toRefs：它可以把一个代理对象中的所有属性也都转换成响应式的对象，toRefs()在处理这个对象的属性的时候，类似于ref。 ref： 把基本类型的数据转换成响应式对象。...
Vue3设计思路 -- 响应式API
weixin_46240162的博客
07-15 350
Vue3设计思路 – 响应式API vue3 基于推出了一套基于ES6 Proxy代码的全新composition API，这套API相比与原来的option API更加的规范，但是也是做了一些兼容性的让步 compositionAPI优势主要体现在: proxy拥有着更好的性能，因为原来的响应式是通过Object.defineProperty来实现的，而这个操作是非常的消耗性能的 原来的optionAPI是将各个内容块进行分开，如data(){},method：{}生命周期等等，如果一个组件比
Vue3 之 Composition API
玄鱼殇
10-08 6078
Vue3 之 Composition API
Vue3响应式API ref和reactive
qq_15506981的博客
12-23 659
在vue3中,有两个重要的api分别是ref 和reactive 使用方法如下 import { reactive, ref } from 'vue'; setup(){ let student = reactive({ name: "zhangsan", age: 18 }) let count = ref(0); return { count, student } } 基本数据类型使用ref对象创建响应式,复杂数据类型使用reactive创建响应式, 在js文件
10_Vue3-Composition-API（一）.pptx
01-25
"Vue3的Composition API是一种新的编写组件的方式，旨在解决Vue2中的Options API导致的代码组织问题。随着组件变得复杂，Options API的逻辑分散使得代码难以理解和维护。Composition API的目标是将同一逻辑关注点的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值