Vue3使用Composition API实现响应式

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组件的渲染过程和响应式系统的运作。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/662142.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

DNF手游攻略：开荒必备攻略！

DNF手游攻略：开荒必备攻略！

DNF手游马上就要开服了&#xff0c;今天给大家带来最完整的DNF手游入门教程。这篇攻略主要讲述了 DNF手游开服第一天要注意的事项&#xff0c;这是一个新手必备的技能书&#xff0c;可以让你在开服的时候&#xff0c;少走一些弯路&#xff0c;让你更快完成任务&#xff01;废话…
阅读更多...
深度学习创新点不大但有效果，可以发论文吗？

深度学习创新点不大但有效果，可以发论文吗？

深度学习中创新点比较小&#xff0c;但有效果&#xff0c;可以发论文吗&#xff1f;当然可以发&#xff0c;但如果想让编辑和审稿人眼前一亮&#xff0c;投中更高区位的论文&#xff0c;写作永远都是重要的。 那么怎样“讲故事”才能让论文更有吸引力&#xff1f;我总结了三点…
阅读更多...
富途面试题：用面向对象的思想设计人关门的场景

富途面试题：用面向对象的思想设计人关门的场景

我工作两年后&#xff0c;有一次不成功的富途证券的面试&#xff0c;印象非常深刻&#xff0c;面试官提出了一个看似简单实则充满深意的问题&#xff1a;如何用面向对象的思想设计一个人关门的场景&#xff1f; 我当时是这样设计的&#xff0c;创建两个类&#xff1a;Person和D…
阅读更多...
多语言印度红绿灯系统源码带三级分销代理功能

多语言印度红绿灯系统源码带三级分销代理功能

前端为2套UI&#xff0c;一套是html写的&#xff0c;一套是编译后的前端 后台功能很完善&#xff0c;带预设、首充返佣、三级分销机制、代理功能。 东西很简单&#xff0c;首页就是红绿灯的下注页面&#xff0c;玩法虽然单一&#xff0c;好在不残缺可以正常跑。
阅读更多...
短视频脚本创作的五个方法 沈阳短视频剪辑培训

短视频脚本创作的五个方法 沈阳短视频剪辑培训

说起脚本&#xff0c;我们大概都听过影视剧脚本、剧本&#xff0c;偶尔可能在某些综艺节目里听过台本。其中剧本是影视剧拍摄的大纲&#xff0c;用来指导影视剧剧情的走向和发展&#xff0c;而台本则是综艺节目流程走向的指导大纲。 那么&#xff0c;短视频脚本是什么&#xf…
阅读更多...
XV7011BB可为智能割草机的导航系统提供新的解决方案

XV7011BB可为智能割草机的导航系统提供新的解决方案

智能割草机作为现代家庭和商业草坪维护保养的重要工具&#xff0c;其精确的定位和导航系统对于提高机器工作效率和确保安全运行至关重要。在智能割草机的发展历程中&#xff0c;定位和导航技术一直是关键的创新点。 传统的基于RTK(实时动态差分定位技术)技术的割草机虽然在…
阅读更多...
mysql连接不上可能的原因：防火墙放行mysql的3306端口 全库复制：data目录替换即可 mysql查看版本

mysql连接不上可能的原因：防火墙放行mysql的3306端口 全库复制：data目录替换即可 mysql查看版本

1.看本地localhost能否连接 2.在本地看IP能否连接 能说明本地正常 权限也够 都能的话&#xff0c;ip能否ping通 能就说明可能是防火墙原因了。关闭防火墙及杀毒试试。 我这里关防火墙就能访问了。 windows如何开启防火墙&#xff0c;又放行mysql的3306端口&#xff1f; 在 …
阅读更多...
可视化大屏也在卷组件化设计了？分享一些可视化组件

可视化大屏也在卷组件化设计了？分享一些可视化组件

hello&#xff0c;我是大千UI工场&#xff0c;这次分享一些可视化大屏的组件&#xff0c;供大家欣赏。&#xff08;本人没有源文件提供&#xff09;
阅读更多...
微前端（无界）入门

微前端（无界）入门

主应用通过props给子应用传值 父子应用通过eventBus通信 通过路由同步实现记录子应用的路由状态 主应用 main.ts: import ./assets/main.cssimport { createApp } from vue import { createPinia } from pinia import WujieVue from wujie-vue3import App from ./App.vue impo…
阅读更多...
STM32 OTA需要注意问题

STM32 OTA需要注意问题

一、OTA设计思路&#xff08;问题&#xff09; 1、根据stm32f405 flash分布&#xff0c;最初将flash划分为四个区域&#xff0c;分别是Bootloader、APP1、APP2、参数区&#xff0c;设备上电后&#xff0c;进入Bootloader程序&#xff0c;判断OTA参数&#xff0c;根据参数来确定…
阅读更多...
长方形边框 上方中间有缺口 css

长方形边框 上方中间有缺口 css

<div class"text_6">大234234师掌4234柜</div><div class"text-wrapper_1"><span class"paragraph_1">四川慧创云戈科技有限公司推出的“大师掌柜”&#xff0c;是一个以餐饮外卖为切入口&#xff0c;专注实体小店新零售…
阅读更多...
实验七 RTP、DSPP协议的配置

实验七 RTP、DSPP协议的配置

一、实验目的 掌握 RIP 动态路由协议的配置、诊断方法。 二、实验步骤 1、 运行 Cisco Packet Tracer 软件&#xff0c;在逻辑工作区放入两台路由器、两台工作站 PC&#xff0c;分别点击各路由器&#xff0c;打开其配置窗口&#xff0c;关闭电源&#xff0c;分别加入一个 2 …
阅读更多...
PowerPivot-跨表取值

PowerPivot-跨表取值

在PowerPivot中&#xff0c;跨表取值通常涉及创建关系和使用DAX&#xff08;数据分析表达式&#xff09;函数。 以下是一些基本步骤和常用的DAX函数&#xff0c;帮助你在PowerPivot中实现跨表取值&#xff1a; 步骤1&#xff1a;创建关系 加载数据&#xff1a;确保你已将需要…
阅读更多...
吃透一道题day2：Java算法中的“如何找到给定字符串中的不同字符“

吃透一道题day2：Java算法中的“如何找到给定字符串中的不同字符“

写在开头&#xff1a;很久没有开启有关算法的内容了,在正式开启开启今天这段算法之旅之前,跟大家谈一谈上周五歌手也就是第二期我的一些直观感受:相比第一期(chante moore的if i aint got you和faouzia的crazy带给我的经验)没有任何特别的惊艳之处,很平淡甚至可以说是心如止水,…
阅读更多...
E. Binary Deque[双指针好思维题]

E. Binary Deque[双指针好思维题]

Binary Deque 题面翻译 有多组数据。 每组数据给出 n n n 个数&#xff0c;每个数为 0 0 0 或 1 1 1 。你可以选择从两边删数&#xff0c;求至少删几个数才可以使剩下的数总和为 s s s 。 如果不能达到 s s s &#xff0c;则输出 − 1 -1 −1 。 题目描述 Slavic h…
阅读更多...
性能测试（基于Jmeter）

性能测试（基于Jmeter）

性能指标 RT&#xff08;Response Time&#xff09;响应时间&#xff1a;指的是用户从客户端发起请求开始到服务端返回结束&#xff0c;整个过程所耗费的时间 HPS&#xff08;Hits Per Second&#xff09;&#xff1a; 每秒点击次数&#xff0c;单位&#xff1a;次/秒 TPS&am…
阅读更多...
Element-Plus中表格及分页功能

Element-Plus中表格及分页功能

导入Element-Plus 具体步骤如下&#xff1a;&#xff08;内容参照官网&#xff1a;安装 | Element Plus&#xff09; # 选择一个你喜欢的包管理器# NPM $ npm install element-plus --save# Yarn $ yarn add element-plus# pnpm $ pnpm install element-plus 在main.js文件的…
阅读更多...
树与图的深度优先遍历

树与图的深度优先遍历

数和图的存储方式与遍历 数和图的存储方式&#xff1a; 一般有两种 树是一种特殊的图&#xff08;即无环联通图&#xff09;。所以下面只讲图。 图的话分为两种&#xff1a;①有向图&#xff08;边是有方向的&#xff1a;a➡️b&#xff09;和 ②无向图&#xff08;边是无方…
阅读更多...
安全设计 | Microsoft 威胁建模工具Threat Modeling Tool安装、使用及威胁生成原理详解（文末附样例）

安全设计 | Microsoft 威胁建模工具Threat Modeling Tool安装、使用及威胁生成原理详解（文末附样例）

1. 概览 微软威胁建模工具&#xff08;Threat Modeling Tool&#xff09;是 Microsoft 安全开发生命周期 (SDL&#xff0c;Security Development LifeCycle) 的核心要素。 当潜在安全问题处于无需花费过多成本即可相对容易解决的阶段&#xff0c;软件架构师可以使用威胁建模工…
阅读更多...
断开自定义模块与自定义库的链接

断开自定义模块与自定义库的链接

断开自定义模块与自定义库的链接 1、断开模块与库的链接 1、断开模块与库的链接 如果摸个库文件添加到模型中&#xff0c;无法“Disable Link”时&#xff0c;可以使用save_system命令进行断开到模型中用户定义的库模块的链接&#xff1b; 参考链接&#xff1a; 传送门 save…
阅读更多...
最新文章

Copyright @ 2022~2023