【前端Vue】Vue3+Pinia小兔鲜电商项目第1篇:认识Vue3,1. Vue3组合式API体验【附代码文档】

全套笔记资料代码移步: 前往gitee仓库查看

感兴趣的小伙伴可以自取哦,欢迎大家点赞转发~


全套教程部分目录:


部分文件图片:

认识Vue3

1. Vue3组合式API体验

通过 Counter 案例 体验Vue3新引入的组合式API

```vue

<script> export default { data(){ return { count:0 } }, methods:{ addCount(){ this.count++ } } } </script>

```

```vue

<script setup> import { ref } from 'vue' const count = ref(0) const addCount = ()=> count.value++ </script>

```

特点:

  1. 代码量变少
  2. 分散式维护变成集中式维护

2. Vue3更多的优势

![image.png](

使用create-vue搭建Vue3项目

1. 认识create-vue

create-vue是Vue官方新的脚手架工具,底层切换到了 vite (下一代前端工具链),为开发提供极速响应

![image.png](

2. 使用create-vue创建项目

前置条件 - 已安装16.0或更高版本的Node.js

执行如下命令,这一指令将会安装并执行 create-vue bash npm init vue@latest

![image.png](

熟悉项目和关键文件

![image.png](

组合式API - setup选项

1. setup选项的写法和执行时机

写法 ```vue

<script> export default { setup(){ }, beforeCreate(){ } } </script>

``` 执行时机

在beforeCreate钩子之前执行

![image.png](

2. setup中写代码的特点

在setup函数中写的数据和方法需要在末尾以对象的方式return,才能给模版使用

```vue

<script> export default { setup(){ const message = 'this is message' const logMessage = ()=>{ console.log(message) } // 必须return才可以 return { message, logMessage } } } </script>

```

3. <script setup>语法糖

script标签添加 setup标记,不需要再写导出语句,默认会添加导出语句

```vue

<script setup> const message = 'this is message' const logMessage = ()=>{ console.log(message) } </script>

```

组合式API - reactive和ref函数

1. reactive

接受对象类型数据的参数传入并返回一个响应式的对象

```vue

<script setup> // 导入 import { reactive } from 'vue' // 执行函数 传入参数 变量接收 const state = reactive({ msg:'this is msg' }) const setSate = ()=>{ // 修改数据更新视图 state.msg = 'this is new msg' } </script>

{{ state.msg }} ```

2. ref

接收简单类型或者对象类型的数据传入并返回一个响应式的对象

```vue

<script setup> // 导入 import { ref } from 'vue' // 执行函数 传入参数 变量接收 const count = ref(0) const setCount = ()=>{ // 修改数据更新视图必须加上.value count.value++ } </script>

```

3. reactive 对比 ref

  1. 都是用来生成响应式数据
  2. 不同点
  3. reactive不能处理简单类型的数据
  4. ref参数类型支持更好,但是必须通过.value做访问修改
  5. ref函数内部的实现依赖于reactive函数
  6. 在实际工作中的推荐
  7. 推荐使用ref函数,减少记忆负担,小兔鲜项目都使用ref

组合式API - computed

计算属性基本思想和Vue2保持一致,组合式API下的计算属性只是修改了API写法

```vue

<script setup> // 导入 import {ref, computed } from 'vue' // 原始数据 const count = ref(0) // 计算属性 const doubleCount = computed(()=>count.value * 2) // 原始数据 const list = ref([1,2,3,4,5,6,7,8]) // 计算属性list const filterList = computed(item=>item > 2) </script>

```

组合式API - watch

侦听一个或者多个数据的变化,数据变化时执行回调函数,俩个额外参数 immediate控制立刻执行,deep开启深度侦听

1. 侦听单个数据

```vue

<script setup> // 1. 导入watch import { ref, watch } from 'vue' const count = ref(0) // 2. 调用watch 侦听变化 watch(count, (newValue, oldValue)=>{ console.log(`count发生了变化,老值为${oldValue},新值为${newValue}`) }) </script>

```

2. 侦听多个数据

侦听多个数据,第一个参数可以改写成数组的写法

```vue

<script setup> // 1. 导入watch import { ref, watch } from 'vue' const count = ref(0) const name = ref('cp') // 2. 调用watch 侦听变化 watch([count, name], ([newCount, newName],[oldCount,oldName])=>{ console.log(`count或者name变化了,[newCount, newName],[oldCount,oldName]) }) </script>

```

3. immediate

在侦听器创建时立即出发回调,响应式数据变化之后继续执行回调

```vue

<script setup> // 1. 导入watch import { ref, watch } from 'vue' const count = ref(0) // 2. 调用watch 侦听变化 watch(count, (newValue, oldValue)=>{ console.log(`count发生了变化,老值为${oldValue},新值为${newValue}`) },{ immediate: true }) </script>

```

4. deep

通过watch监听的ref对象默认是浅层侦听的,直接修改嵌套的对象属性不会触发回调执行,需要开启deep

```vue

<script setup> // 1. 导入watch import { ref, watch } from 'vue' const state = ref({ count: 0 }) // 2. 监听对象state watch(state, ()=>{ console.log('数据变化了') }) const changeStateByCount = ()=>{ // 直接修改不会引发回调执行 state.value.count++ } </script> <script setup> // 1. 导入watch import { ref, watch } from 'vue' const state = ref({ count: 0 }) // 2. 监听对象state 并开启deep watch(state, ()=>{ console.log('数据变化了') },{deep:true}) const changeStateByCount = ()=>{ // 此时修改可以触发回调 state.value.count++ } </script>

```

组合式API - 生命周期函数

1. 选项式对比组合式

![image.png](

2. 生命周期函数基本使用

  1. 导入生命周期函数
  2. 执行生命周期函数,传入回调

vue <scirpt setup> import { onMounted } from 'vue' onMounted(()=>{ // 自定义逻辑 }) </script>

3. 执行多次

生命周期函数执行多次的时候,会按照顺序依次执行

```vue import { onMounted } from 'vue' onMounted(()=>{ // 自定义逻辑 })

onMounted(()=>{ // 自定义逻辑 }) </script> ```

组合式API - 父子通信

1. 父传子

基本思想 1. 父组件中给子组件绑定属性 2. 子组件内部通过props选项接收数据

![image.png](

2. 子传父

基本思想 1. 父组件中给子组件标签通过@绑定事件 2. 子组件内部通过 emit 方法触发事件

![image.png](

组合式API - 模版引用

概念:通过 ref标识 获取真实的 dom对象或者组件实例对象

1. 基本使用

实现步骤: 1. 调用ref函数生成一个ref对象 2. 通过ref标识绑定ref对象到标签

![image.png](

2. defineExpose

默认情况下在

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

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

相关文章

Makefile文件编译c++源码入门教程

Makefile相关依赖 MinGW MinGW&#xff08;Minimalist GNU for Windows&#xff09;是一个用于Windows系统的开源软件开发工具集&#xff0c;它允许你在Windows平台上使用GNU工具集来编译、链接和运行原生Windows程序。MinGW提供了GCC&#xff08;GNU Compiler Collection&am…

Android 调试打印对应的调用堆栈

在平时的开发调试的时候&#xff0c;经常碰到需要打印JAVA、Native C、kernel的代码调用关系。这里做一下记录 Jave堆栈打印 使用android.util.Log类进行打印 /*** Send a {link #DEBUG} log message and log the exception.* param tag Used to identify the source of a lo…

AJAX学习(四)

版权声明 本文章来源于B站上的某马课程&#xff0c;由本人整理&#xff0c;仅供学习交流使用。如涉及侵权问题&#xff0c;请立即与本人联系&#xff0c;本人将积极配合删除相关内容。感谢理解和支持&#xff0c;本人致力于维护原创作品的权益&#xff0c;共同营造一个尊重知识…

聊聊Python都能做些什么

文章目录 一、Python简介二、Python都能做些什么1. Web开发2. 数据分析和人工智能3. 自动化运维和测试4. 网络爬虫5. 金融科技 三、Python开源库都有哪些1. Web开发2. 数据分析和科学计算3. 机器学习和深度学习4. 网络爬虫5. 自动化和测试6. 其他常用库 四、相关链接 一、Pytho…

C++内存分布与动态内存管理

文章目录 :dizzy: C/C内存分布:dizzy:C语言中动态内存管理方式  :sparkles:malloc   :sparkles:calloc  :sparkles:reallocfree :dizzy:C语言中动态内存管理方式  :sparkles:new和delete操作内置类型  :sparkles:new和delete操作自定义类型 :dizzy:operator new与ope…

C语言自学笔记13----C语言指针与函数

C 语言指针与函数 在C语言编程中&#xff0c;也可以将地址作为参数传递给函数。 要在函数定义中接受这些地址&#xff0c;我们可以使用指针。这是因为指针用于存储地址。让我们举个实例&#xff1a; 示例&#xff1a;通过引用致电 #include <stdio.h> void swap(int n1, …

数星星 刷题笔记 (树状数组)

依题意 要求每个点 x, y 的左下方有多少个星星 又因为 是按照y从小到大 给出的 所以 我们在计算个数的时候是按照y一层层变大来遍历的 因此我们在处理每一个点的时候 只需要看一下 当前的点有多少个点的x值比当前点小即可 树状数组的 操作模板 P3374 【模板】树…

rsa数据加密无大小限制——golang实现

由于rsa加密需要公钥长度大于消息长度&#xff0c;消息太长时经常会报错Message too long for RSA 采用分块的方法&#xff0c;将消息分成更小的块&#xff0c;解决这个问题 package xrsa import ("encoding/pem""encoding/base64""crypto/x509"…

动态规划题目集一(代码 注解)

目录 介绍&#xff1a; 题目一: 题目二&#xff1a; 题目三&#xff1a; 题目四&#xff1a; 题目五&#xff1a; 题目六&#xff1a; 题目七&#xff1a; 题目八&#xff1a; 题目九&#xff1a; 介绍&#xff1a; 动态规划是一种算法设计技术&#xff0c;用于解决具有重叠…

水泵房远程监控物联网系统

随着物联网技术的快速发展&#xff0c;越来越多的行业开始利用物联网技术实现设备的远程监控与管理。水泵房作为城市供水系统的重要组成部分&#xff0c;其运行状态的监控与管理至关重要。HiWoo Cloud作为专业的物联网云服务平台&#xff0c;为水泵房远程监控提供了高效、稳定、…

音乐播放器-C#实现

音乐播放器-C#实现 目录 一、 代码介绍 二、 音乐播放器-C#实现 三、 音乐播放器-C#实现 四、 音乐播放器-C#实现 五、 音乐播放器-C#实现 代码介绍 代码中使用了.NET框架中的System.Media命名空间来处理音频文件的播放和控制。这段代码创建了一个简单的音乐播放器界…

Java访问数据库(重点:SpringBoot整合Mybatis)

目录 一、通过JDBC访问数据库1、思路2、示例3、思考 二、通过ORM框架访问数据库&#xff08;主要是Mybatis&#xff09;1、示例1.1 配置1.2 SQL写在xxxMapper.xml中&#xff1a;mapper/UserMapper.xml1.3 xxxMapper.xml对应的xxxMapper接口&#xff08;Application通过该接口访…

C#设计原则

学习设计原则是学习设计模式的基础。在实际的开发过程中&#xff0c;并不是一定要求所有的代码都遵循设计原则&#xff0c;而是要综合考虑人力、成本、时间、质量&#xff0c;不刻意追求完美&#xff0c;要在适当的场景遵循设计原则。 这体现的是一种平衡取舍&#xff0c;可以…

SRE运维揭秘: 企业生产中运维监控的真相

大家好&#xff0c;我是博哥爱运维&#xff0c;有着十年SRE运维开发经验&#xff0c;从事过全球多个主流云平台的服务架构设计及自动化运维开发工作&#xff0c;在企业中基于gitlab和k8s从零设计过完整的一套CICD流水线架构&#xff0c;曾用shell开发过运维堡垒机系统&#xff…

磁盘未格式化,数据恢复有妙招

一、初遇磁盘未格式化&#xff0c;惊慌失措 在日常生活和工作中&#xff0c;我们经常会使用各种存储设备来保存重要的文件和数据。然而&#xff0c;有时当我们尝试访问这些存储设备时&#xff0c;却会突然遇到一个令人头痛的问题——磁盘未格式化。这个突如其来的提示让我们措…

虚拟函数和普通函数的区别?内联函数和构造函数能否成为虚拟函数?

虚拟函数和普通函数的区别主要在于它们的调用方式。当一个类中有虚拟函数时&#xff0c;编译器会为该类创建一个虚函数表&#xff08;vtable&#xff09;&#xff0c;这个表中存储了该类中所有虚拟函数的地址。在运行时&#xff0c;通过基类的指针或引用调用派生类中的函数时&a…

[Python初阶]2255.统计是给定字符串前缀的字符串数目

目录 2255.统计是给定字符串前缀的字符串数目 ①.题目 ②.问题分析 ③.startswith()方法理解 与 说明 Ⅰ.定义和用法 Ⅱ.语法 ④.问题解决 ⑤总结 2255.统计是给定字符串前缀的字符串数目 ①.题目 ②.问题分析 需求:统计列表words中,是字符串s的前缀的字符串的数目. 解…

【解惑】离线版本的软件如何实现“授权验证”和“使用有效期”验证的

如何实现 要实现软件授权验证和使用有效期验证的离线版本&#xff0c;可以考虑以下几个步骤&#xff1a; 授权验证&#xff1a; 在软件的离线版本中&#xff0c;可以通过在软件中嵌入一个授权验证模块来进行验证。授权验证模块可以包含一个加密算法&#xff0c;用于生成和验证…

接口与多态

通过接口实现多态 接口中声明若干个 bstract方法&#xff1b; 方法体的内容细节由实现接口的类去完成&#xff0c;不同的类有 不同的实现方式 → 则接口变量在回调接口方法时具有多 种形态。 用接口进行程序设计的核心思想 使用接口回调技术&#xff1a;接口变量存放实现该接口…

(学习日记)2024.03.13:UCOSIII第十五节:基于时基列表的时延操作(持续更新)

写在前面&#xff1a; 由于时间的不足与学习的碎片化&#xff0c;写博客变得有些奢侈。 但是对于记录学习&#xff08;忘了以后能快速复习&#xff09;的渴望一天天变得强烈。 既然如此 不如以天为单位&#xff0c;以时间为顺序&#xff0c;仅仅将博客当做一个知识学习的目录&a…