Vue3框架核心功能点响应式数据reactive、组合式API setup、computed、组件通信、路由导航,状态管理vuex、pinia等的实战示例代码

记录几个Vue3框架核心功能点,例如响应式数据reactive、组合式API setup、computed、组件通信、路由导航,状态管理vuex、pinia……等实战示例代码:

一、响应式数据(Reactive Data)

  1. 创建响应式对象

    • 使用reactive函数创建一个响应式的对象。
    import { reactive } from 'vue';const state = reactive({count: 0,message: 'Hello Vue3'
    });// 在组件中使用
    export default {setup() {return { state };}
    };
    
    • 在模板中可以直接使用{{state.count}}{{state.message}}来显示数据,并且当这些数据发生变化时,视图会自动更新。
  2. 响应式数组操作

    • 对于数组的操作,Vue3也能正确追踪变化。
    const list = reactive([1, 2, 3]);function addItem() {list.push(list.length + 1);
    }
    

二、组合式API(Composition API) - setup函数

  1. 计算属性(Computed Properties)
    • 计算属性基于响应式数据进行计算并缓存结果。
    import { reactive, computed } from 'vue';const state = reactive({firstName: 'John',lastName: 'Doe'
    });const fullName = computed(() => `${state.firstName} ${state.lastName}`);export default {setup() {return { state, fullName };}
    };
    
  2. 生命周期钩子(Lifecycle Hooks)
    • setup函数中使用生命周期钩子。
    import { onMounted } from 'vue';export default {setup() {onMounted(() => {console.log('Component is mounted');});}
    };
    

三、组件通信

  1. 父子组件通信 - Props和Emit
    • 父组件传递数据给子组件(Props)。
    • 子组件发送事件给父组件(Emit)。
    • 父组件:
    <template><ChildComponent :message="parentMessage" @childEvent="handleChildEvent" />
    </template><script>
    import { ref } from 'vue';
    import ChildComponent from './ChildComponent.vue';export default {components: { ChildComponent },setup() {const parentMessage = ref('Hello from parent');const handleChildEvent = (data) => {console.log('Received from child:', data);};return { parentMessage, handleChildEvent };}
    };
    </script>
    
    • 子组件:
    <template><button @click="sendToParent">Send to Parent</button>
    </template><script>
    import { defineComponent, toRefs } from 'vue';export default defineComponent({props: {message: String},setup(props, { emit }) {const { message } = toRefs(props);const sendToParent = () => {emit('childEvent', 'Hello from child');};return { sendToParent, message };}
    });
    </script>
    

四、路由(Vue Router)集成(以下代码前提需要先安装配置好Vue Router)

  1. 定义路由和导航
    • router/index.js中定义路由。
    import { createRouter, createWebHistory } from 'vue-router';
    import Home from '../views/Home.vue';
    import About from '../views/About.vue';const routes = [{ path: '/', component: Home },{ path: '/about', component: About }
    ];const router = createRouter({history: createWebHistory(),routes
    });export default router;
    
    • 在组件中进行导航。
    <template><button @click="navigateToAbout">Go to About</button>
    </template><script>
    import { useRouter } from 'vue-router';export default {setup() {const router = useRouter();const navigateToAbout = () => {router.push('/about');};return { navigateToAbout };}
    };
    </script>
    

五、状态管理工具 - Vuex与Pinia

在Vue3中,除了组件内部的状态管理,我们经常需要处理跨组件的共享状态。这时,我们可以使用Vuex或Pinia这样的状态管理工具。

  1. Vuex的使用

首先,安装Vuex:

npm install vuex@next --save

创建一个Vuex store:

// store/index.js
import { createStore } from 'vuex';export default createStore({state() {return {count: 0};},mutations: {increment(state) {state.count++;}},actions: {increment(context) {context.commit('increment');}},getters: {doubleCount(state) {return state.count * 2;}}
});

在主文件中引入并使用store:

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';const app = createApp(App);
app.use(store);
app.mount('#app');

在组件中使用Vuex:

<template><div><p>Count: {{ count }}</p><p>Double Count: {{ doubleCount }}</p><button @click="increment">Increment</button></div>
</template><script>
import { mapState, mapGetters, mapActions } from 'vuex';export default {computed: {...mapState(['count']),...mapGetters(['doubleCount'])},methods: {...mapActions(['increment'])}
};
</script>
  1. ** Pinia的使用**

Pinia是Vue的官方状态管理库,它更加轻量且与Vue3的组合式API完美集成。

首先,安装Pinia:

npm install pinia --save

创建一个Pinia store:

// stores/counter.js
import { defineStore } from 'pinia';export const useCounterStore = defineStore('counter', {state: () => ({count: 0}),actions: {increment() {this.count++;}},getters: {doubleCount: (state) => state.count * 2}
});

在主文件中引入并使用Pinia:

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import { createPinia } from 'pinia';const app = createApp(App);
app.use(createPinia());
app.mount('#app');

在组件中使用Pinia:

<template><div><p>Count: {{ counter.count }}</p><p>Double Count: {{ counter.doubleCount }}</p><button @click="counter.increment">Increment</button></div>
</template><script>
import { useCounterStore } from '../stores/counter';export default {setup() {const counter = useCounterStore();return { counter };}
};
</script>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

svelte5中使用react组件

在svelet5中导入并使用react组件库 svelte5中使用react组件 svelte5中使用react组件 在svelet5中导入并使用react组件库, 示例项目地址&#xff1a;https://github.com/shenshouer/my-svelte-react 在svelte5中当前还有问题&#xff0c;无法将children传递到react中渲染 使用…

R语言装环境Gcc报错以及scater包的安装

error: ‘timespec_get’ has not been declared in ‘::’ 80 | using ::timespec_get; 在conda 的虚拟环境中升级gcc的版本 conda install -c conda-forge gcc11 gxx11终极方法&#xff0c;在R的最新版本和环境下装啥都能成功&#xff01;&#xff01; 比如beyondcell的方法…

CDA数据分析师一级经典错题知识点总结(3)

1、SEMMA 的基本思想是从样本数据开始&#xff0c;通过统计分析与可视化技术&#xff0c;发现并转换最有价值的预测变量&#xff0c;根据变量进行构建模型&#xff0c;并检验模型的可用性和准确性。【强调探索性】 2、CRISP-DM模型Cross Industry Standard Process of Data Mi…

Flink概念知识讲解之:Restart重启策略配置

Flink概念知识讲解之&#xff1a;Restart重启策略配置 当 Task 发生故障时&#xff0c;Flink 需要重启出错的 Task 以及其他受到影响的 Task &#xff0c;以使得作业恢复到正常执行状态。 Flink 通过重启策略和故障恢复策略来控制 Task 重启&#xff1a;重启策略决定是否可以…

VUE3 VITE项目在 npm 中,关于 Vue 的常用命令有一些基础命令

如果你正在使用 Vite 构建的 Vue 3 项目&#xff0c;并且想要使用相关的 Vue 和 Vite 工具&#xff0c;下面是一些常用的命令和步骤来创建和管理 Vue 项目。 1. 使用 npm create 创建 Vue 3 项目&#xff08;Vite&#xff09; 如果你还没有创建项目&#xff0c;可以使用以下命…

微服务电商平台课程七:前端框架vue

后台商城: https://github.com/macrozheng/mall-admin-web 前台商城:https://github.com/macrozheng/mall-app-web Vue (发音为 /vjuː/,类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编…

【Uniapp-Vue3】v-for列表渲染的用法

如果我们想要重复渲染多个元素&#xff0c;就可以使用v-for进行渲染。 比如我们想要将元素渲染5次&#xff1a; 如果我们想要知道当前元素是渲染的第几个&#xff0c;可以在v-for的时候添加参数index&#xff0c;并在差值表达式中填入index&#xff1a; 则index会以0开始进行渲…

《新闻大厦抢先版》V0.18.105+Dlcs官方学习版

《新闻大厦抢先版》官方版https://pan.xunlei.com/s/VODaeUn3v-ZWVvvmUMfo5AqWA1?pwdnhpz# 建造并不断优化新闻大楼&#xff0c;保障员工权益并及时赶上周日的印刷交期&#xff01; 招募并管理不同职业以登上成功的阶梯&#xff1a;记者、摄像师、勤杂工&#xff0c;除此以外…

解锁3D模型转换:STL转OBJ全攻略

一、3D模型转换的基石&#xff1a;STL与OBJ格式概览 在3D模型的世界里&#xff0c;STL和OBJ格式犹如两大基石&#xff0c;支撑着模型创建、编辑、转换与应用的方方面面。了解它们的特性&#xff0c;是深入探究3D模型转换的关键第一步。 1.1 STL格式深度剖析 STL 全称为Stereo…

OpenAI的对话和图像API简单体验

OpenAI的对话和图像API简单体验 前言OpenAI API 对话和图像接口PythonJavaScript Azure OpenAI API 对话和图像接口PythonJavaScript 总结 前言 JS 和 Python 是比较受欢迎的两个调用 OpenAI 对话 API 的两个库, 这里 简单记录这两个库对 OpenAI 的对话(Chat)和图像(Image)的使…

RK3568 Android 13 内置搜狗输入法小计

问&#xff1a;为什么写&#xff1f; 答&#xff1a;网上搜出来的都试过了&#xff0c;不行&#xff01;下面直接上代码和注意事项&#xff01; 首先到这个目录&#xff08;/RK3568/Rockchip_Android13_SDK_Release/device/rockchip/rk356x/tl3568_evm/preinstall&#xff09…

windows10下安装Microsoft SQL Server 2016

一、下载安装包 网站&#xff1a;MSDN, 我告诉你 - 做一个安静的工具站 选择需要的版本&#xff0c;点击详细信息&#xff0c;复制ed2k链接&#xff0c;打开eMule或迅雷&#xff0c;新建下载&#xff0c;粘贴链接&#xff0c;开始下载。 下载好的文件是一个.iso镜像文件。 二、…

探索图像编辑的无限可能——Adobe Photoshop全解析

文章目录 前言一、PS的历史二、PS的应用场景三、PS的功能及工具用法四、图层的概念五、调整与滤镜六、创建蒙版七、绘制形状与路径八、实战练习结语 前言 在当今数字化的世界里&#xff0c;视觉内容无处不在&#xff0c;而创建和编辑这些内容的能力已经成为许多行业的核心技能…

IDEA Maven构建时报错:无效的目标发行版17

报错分析 报错原因&#xff1a;Maven 构建时&#xff0c;Java 版本配置不匹配 我安装的JDK版本是1.8&#xff0c;但由于种种原因&#xff0c;Maven构建时指定了 Java 17 作为目标发行版&#xff0c;从而导致错误 解决方案 首先&#xff0c;java -version&#xff0c;查看环…

React前端框架:构建现代Web应用的强大工具

在现代Web开发中&#xff0c;前端框架的使用已成为构建高效、可维护的应用程序的标准实践。React作为一种流行的前端框架&#xff0c;凭借其简洁、高效、灵活的特点&#xff0c;已成为许多开发者的首选。本文将介绍React框架的基本概念、核心特点以及如何使用它构建Web应用。 …

西电-神经网络基础与应用-复习笔记

此为24年秋研究生课程复习笔记 导论 神经网络的研究方法分为 连接主义&#xff0c;生理学派&#xff0c;模拟神经计算。高度的并行、分布性&#xff0c;很强的鲁棒和容错性。便于实现人脑的感知功能(音频图像的识别和处理)。符号主义&#xff0c;心理学派&#xff0c;基于符号…

学习flv.js

前言 flv.js一款使用纯 JavaScript 编写的 HTML5 Flash 视频 (FLV) 播放器&#xff0c;无需 Flash&#xff01;&#xff01;&#xff01;flv.js 的工作原理是将 FLV 文件流转换为 ISO BMFF&#xff08;碎片 MP4&#xff09;片段&#xff0c;然后通过Media Source Extensions&l…

Gitlab-Runner配置

原理 Gitlab-Runner是一个非常强大的CI/CD工具。它可以帮助我们自动化执行各种任务&#xff0c;如构建、测试和部署等。Gitlab-Runner和Gitlab通过API通信&#xff0c;接收作业并提交到执行队列&#xff0c;Gitlab-Runner从队列中获取作业&#xff0c;并允许在不同环境下进行作…

LLM 智能视频字幕助手,支持生成、断句、优化、翻译、视频合成全流程

卡卡字幕助手&#xff08;VideoCaptioner&#xff09;是一款功能强大的视频字幕配制软件。操作简单且无需高配置&#xff0c;利用大语言模型进行字幕智能断句、校正、优化、翻译&#xff0c;一键为视频配上效果惊艳的字幕。 &#x1f3af; 可使用强大的语音识别引擎&#xff0c…

HTML实战课堂之启动动画弹窗

一&#xff1a;代码片段讲解 小提示&#xff1a;下面是一个包含启动页和弹窗的完整示例。这个示例包括一个简单的启动页和一个弹窗&#xff0c;当用户点击启动页上的按钮时&#xff0c;会显示弹窗。 1. **HTML结构**&#xff1a; - #startPage&#xff1a;启动页&#xff0c;包…