Vue3基础（API风格、监听、生命周期、toRefs、组件通信、插槽、axios，Promise）

Vue3基础（API风格、监听、生命周期、toRefs、组件通信、插槽、axios，Promise）

目录

  • Vue3基础（API风格、监听、生命周期、toRefs、组件通信、插槽、axios，Promise）
    • API 风格
      • 选项式API
      • 组合式API
      • 混合式
    • 事件监听
      • watchEffect
    • 生命周期
      • 选项式API
      • 组合式API
    • toRefs
    • 父传子defineProps
    • 子传父defineEmits
    • 插槽
      • 具名插槽
    • axios
      • async和await
      • axios其它配置项
    • Promise

API 风格

选项式API和组合式API都适用于不同场景，生产项目中，低复杂度场景用选项式API，单页应用用组合式API+单文件组件。

选项式API

该方法也是Vue2中所使用的，其特点是例如 data、methods 和 mounted等对象所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例

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

<template>
  <div class="card">
    <button type="button" @click="handleAdd">count is {{ count }}</button>
  </div>
</template>

组合式API

单文件组件中组合式API通常和

<script setup>
import { ref } from 'vue'
const count = ref(0)
const name = reactive({'name': '张三'})

function handleChange(){
  count.value++
  name.name = '李四'
}
</script>
<template>
  <div class="card">
    <button type="button" @click="handleChange">count is {{ count }},name is {{name.name}}</button>
  </div>
</template>

混合式

<script>
import {reactive, ref} from 'vue'

export default {
  setup() {
    const count = ref(0)
    const name = reactive({'name': '张三'})
    return {
      count,
      name
    }

  },
  methods: {
    handleAdd() {
      this.count++
      this.name.name = '李四'
    }
  }
}

</script>

<template>
  <div class="card">
    <button type="button" @click="handleAdd">count is {{ count }},name is {{ name.name }}</button>
  </div>
</template>

事件监听

watch 函数用于监视一个数据，并在数据变化时执行特定的逻辑

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

const count = ref(0)
const name = reactive({'name': '张三'})

function handleAdd() {
  count.value++
  name.name = '李四'
}

watch(count, (newValue, oldValue) => {
  console.log('count数据发生了变化，老数据是：' + oldValue + '新数据是：' + newValue)
})
watch(()=>name.name, (newValue, oldValue) => {
  console.log('count数据发生了变化，老数据是：' + oldValue + '新数据是：' + newValue)
})
</script>

<template>
  <div class="card">
    <button type="button" @click="handleAdd">count is {{ count }},name is {{name.name}}</button>
    <p>
      Edit
      <code>components/HelloWorld.vue</code> to test HMR
    </p>
  </div>
</template>

watchEffect

watchEffect函数不用指定监听谁，只要watchEffect内部用了某个变量，某个变量发送变化，就会触发

import { watchEffect } from 'vue'

watchEffect(()=>{
    const x1 = sum.value
    const x2 - person.name
	console.log('某个数据被改变')
})

生命周期

选项式API

  1. beforeCreate：组件实例被创建，但是数据和事件方法均未初始化时被调用
  2. created：数据观测 (data observer) 和事件配置完成，但尚未挂载到DOM时被调用
  3. beforeMount：模板编译完成，但尚未将模板挂载到DOM时被调用
  4. mounted：组件挂载到DOM之后时被调用
  5. beforeUpdate：数据更新但尚未重新渲染视图时被调用
  6. updated：数据更改导致重新渲染和打补丁完成时被调用
  7. beforeUnmount：组件卸载之前时被调用
  8. unmounted：组件卸载之后时被调用

组合式API

官方文档：组合式API生命周期钩子

组件生命周期图示

  1. onMounted()：在组件挂载完成后执行
  2. onUpdated()：在组件响应状态变更后执行
  3. onUnmounted()：当组件实例被卸载后调用
  4. onBeforeMount()：组件被挂载之前调用
  5. onBeforeUpdate()：组件更新前调用
  6. onBeforeUnmount()：组件实例被卸载前调用
  7. onErrorCaptured()：捕获了后代组件传递错误时调用
  8. onRenderTracked()：组件渲染过程中追踪到响应式依赖时被调用
  9. onRenderTriggered()：响应式依赖的变更触发了组件渲染时调用
  10. onActivated()：若组件实例是 缓存树的一部分，当组件被插入到 DOM 中时调用
  11. onDeactivated()：若组件实例是 缓存树的一部分，当组件从DOM 中移除时调用
  12. onServerPrefetch()：组件实例在服务器上被渲染之前调用

示例：

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  console.log(`the component is now mounted.`)
})
</script>

toRefs

toRefs的作用将一个包含响应式对象属性的普通对象转换为包含 ref 对象的普通对象，通俗一点就是将reactive包裹的对象全部转换成ref对象

其意义在于当组件引用这些属性时能够保持其响应性

<script>
import {reactive, ref, toRefs} from 'vue'

export default {
  setup() {
    const data = reactive({
      count : 0,
      name : {'name': '张三'}
    })
    const handleChange = ()=>{
      data.count++
      data.name.name = '李四'
      console.log(toRefs(data).count.value)
      console.log(toRefs(data).name.value.name)
    }
    return {
      ...toRefs(data),handleChange
    }

  },
}


</script>

<template>
  <div class="card">
    <button type="button" @click="handleChange">count is {{ count }},name is {{ name.name }}</button>
  </div>
</template>
  • ...toRefs(data)：toRefs(data)是将data中的数据全部转成ref包裹的对象，使其带有响应性，name : {'name': '张三'}本身就是对象且带有响应性因此不会对其造成影响，...是展开运算符，它的作用是将toRefs(data)展开
// 用...展开
return {
      ...toRefs(data),handleChange
    }

// 没用...的写法
const count = toRefs(data).count
const name = toRefs(data).name
return {
  count, name, handleChange
}

父传子defineProps

父组件：

<script setup>
// 导入子组件
import HelloWorld from './components/HelloWorld.vue'
const info = '你好'
</script>

<template>
  <HelloWorld :msg="info" />
</template>

子组件：

<script setup>
import {reactive, ref, toRefs, defineProps} from 'vue'

// defineProps定义传给子组件的属性
defineProps(['msg'])

const count = ref(0)
const name = reactive({'name': '张三'})
const handleChange = () => {
  count.value++
  name.name = '李四'
}


</script>

<template>
  <div class="card">
      // 调用父组件的属性
    <p>{{ msg }}</p>
    <button type="button" @click="handleChange">count is {{ count }},name is {{ name.name }}</button>
  </div>
</template>

子传父defineEmits

子组件：

<script setup>
import {reactive, ref, defineEmits} from 'vue'

const name = reactive({'name': '张三'})
// 创建defineEmits实例并将自定义事件名取为myevent
let $emit = defineEmits(['myevent'])
function handleSend() {
  // myevent:事件名，name.name:任意参数
  $emit('myevent', name.name)
}
</script>

<template>
  <div class="card">
    <button type="button" @click="handleSend">点我给父组件发数据</button>
  </div>
</template>

父组件：

<script setup>
import son from './components/son.vue'
import {ref} from "vue";

const receivedName = ref('')
const handleGetson = (name) => {
  // 这个name就是子组件传过来的数据
  // 将原name替换为子组价的name
  receivedName.value = name
}
</script>

<template>
  <div>
    <p>{{receivedName}}</p>
	// son标签必须是子组件，意为收到数据后触发handleGetson方法
    <son @myevent="handleGetson"/>
  </div>
</template>

插槽

主组件

<script setup>
import FancyButton from './components/FancyButton.vue'
</script>

<template>
  <div>
    // 在FancyButton内定义插槽内容
    <FancyButton>
      按钮
    </FancyButton>
  </div>
</template>

FancyButton组件

<script setup>
function sayHello() {
  console.log('你好')
}
</script>

<template>
  <div class="card">
    <button @click="sayHello">
      // 插槽出口
      <slot></slot>
    </button>
    <p>上面是插槽</p>
  </div>
</template>

实际效果就相当于：

<button @click="sayHello">
	按钮
</button>

具名插槽

  • v-slot:buttonName指定要使用的插槽
  • slot name="buttonName"为插槽命名
<button @click="sayHello">
  <slot name="buttonName"></slot>
</button>

<FancyButton v-slot:buttonName>
	按钮
</FancyButton>

axios

基础示例：使用前先安装npm install axios

<script setup>
import axios from "axios"

function sendAxios() {
  axios.get('https://jsonplaceholder.typicode.com/todos/1').then(res => {
    console.log('请求成功' + res.data)
  }).catch(error => {
    // 处理请求失败的情况
    console.error('请求失败：', error);
  })
}
</script>

<template>
  <div class="card">
    <button @click="sendAxios">
      发送请求
    </button>
  </div>
</template>

post请求：

axios.post('https://jsonplaceholder.typicode.com/posts', {
  body: 'bar',	// 请求体
  userId: 1
})
.then(response => {
  console.log('成功发送 POST 请求：', response.data);
})
.catch(error => {
  console.error('发送 POST 请求失败：', error);
});

async和await

<script setup>
import axios from "axios"

const sendAxios = async () => {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/todos/1');
    console.log(response)
  } catch (error) {
    console.error('请求失败：', error);
  }
}
</script>

<template>
  <div class="card">
    <button @click="sendAxios">
      发送请求
    </button>
  </div>
</template>

axios其它配置项

常用参数：

axios({
    url:'地址'，
    method:'post',
    headers: {'token': 'adsfa.adsfa.adsf',contentType:'application/json'},
    params: {name: lqz,age:19},
    data: {firstName: 'Fred'},
    timeout: 1000, 
})

更多参数

Promise

  • resolve：Promise状态成功时会将成功结果传递给then方法中的成功处理函数
  • reject：Promise状态失败时会将失败结果传递给catch方法
<script setup>

function handlePromise() {
  const myPromise = new Promise((resolve, reject) => {
    const randomNum = Math.random()
    if (randomNum > 0.5) {
      // 将randomnum传给.then方法
      resolve(randomNum)
    } else {
      // 将error信息传给.catch方法
      reject(new Error('数据小于0.5'))
    }
  })

  myPromise.then((res) => {
    console.log('操作成功：' + res)
  }).catch((error) => {
    console.log('操作失败：' + error.message)
  })
}

</script>

<template>
  <div class="card">
    <button @click="handlePromise">
      调用Promise
    </button>
  </div>
</template>
olve, reject) => {
    const randomNum = Math.random()
    if (randomNum > 0.5) {
      // 将randomnum传给.then方法
      resolve(randomNum)
    } else {
      // 将error信息传给.catch方法
      reject(new Error('数据小于0.5'))
    }
  })

  myPromise.then((res) => {
    console.log('操作成功：' + res)
  }).catch((error) => {
    console.log('操作失败：' + error.message)
  })
}

</script>

<template>
  <div class="card">
    <button @click="handlePromise">
      调用Promise
    </button>
  </div>
</template>

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

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

相关文章

并发问题系统学习（更新中）

并发问题系统学习（更新中）

进程、线程 进程&#xff1a;进程是代码在数据集合上的一次运行活动&#xff0c;是系统进行资源分配和调度的基本单位。可以理解为一个java应用。 线程&#xff1a;线程是进程的一个执行路径&#xff0c;一个进程中至少有一个线程&#xff0c;进程中的多个线程共享进程的资源。…
阅读更多...
java报错:使用mybatis plus查询一个只返回一条数据的sql，却报错返回了1000多条

java报错:使用mybatis plus查询一个只返回一条数据的sql，却报错返回了1000多条

今天遇到一个问题 系统线上问题&#xff0c;经常出现这样的问题&#xff0c;刚重启系统时不报错了&#xff0c;可是运行一段时间又会出现。sql已经写了limit 1&#xff0c;mybatis的debug日志也返回total为1&#xff0c;可是却报错返回了1805条数据 乍一看&#xff0c;感觉太不…
阅读更多...
Elasticsearch的基本使用

Elasticsearch的基本使用

Elasticsearch的基本使用 1.基本概念1.1 文档和字段1.2 索引和映射1.3 mysql与elasticsearch对比 2.索引库2.1 es中mapping映射属性2.2.es中索引库的增删改查 3.文档3.1 新增文档3.2 查询文档3.3 删除文档3.4 修改文档3.4.1 全量修改3.4.2 增量修改3.5 总结 4.DSL查询语法4.1 D…
阅读更多...
Redis如何保证数据一致性？

Redis如何保证数据一致性？

Redis如何保证数据一致性&#xff1f; Redis通常作为持久层数据库&#xff08;例如MySQL&#xff09;的缓存层&#xff0c;如果缓存或者数据库数据发生改变&#xff0c;如何保证双方的数据是一致的&#xff1f; 这其实是要分情况讨论滴&#xff0c;对数据一致性不同的要求有不…
阅读更多...
08.图形化界面字体问题处理

08.图形化界面字体问题处理

图形化界面字体问题处理 发现图形存在乱码&#xff0c;不显示文字 zabbix服务器的字符集所在的路径下&#xff1a; /usr/share/zabbix/assets/fonts 将本地windows系统的字体进行上传&#xff0c;选择一个自己喜欢的字体 上传到系统路径下并且直接覆盖掉 回到web浏览器界面…
阅读更多...
什么是Facebook付费广告营销？

什么是Facebook付费广告营销？

Facebook作为全球最大的社交平台之一&#xff0c;成为了跨境卖家不可或缺的营销阵地。它不仅拥有庞大的用户基数&#xff0c;还提供了丰富的广告工具和社群互动功能&#xff0c;让商家能够精准触达目标市场&#xff0c;提升品牌影响力。云衔科技通过Facebook付费广告营销的专业…
阅读更多...
【CSS基础--CSS选择器的常见用法】

【CSS基础--CSS选择器的常见用法】

CSS选择器的常见用法 1.CSS介绍1.1 基本语法规范1.2 引入样式1.3 规范 2. CSS选择器2.1 标签选择器2.2 类选择器2.3 ID选择器2.4 复合选择器 1.CSS介绍 CSS&#xff08;Cascading Style Sheet&#xff09;&#xff0c;层叠样式表&#xff0c;由于控制页面的样式。CSS能够对网页…
阅读更多...
HTML批量文件上传2——进度条显示

HTML批量文件上传2——进度条显示

作者&#xff1a;私语茶馆 非常多的云应用中需要上传文本&#xff0c;包括图片&#xff0c;文件等等&#xff0c;这些批量文件上传&#xff0c;往往涉及到进度条显示&#xff0c;多文件上传等&#xff0c;这里分享一个非常好的案例&#xff0c;来自BootStrapfriendly.com&#…
阅读更多...
kubernetes附加组件—图形化管理工具Dashboard

kubernetes附加组件—图形化管理工具Dashboard

一、介绍 Dashboard是k8s集群管理的一个WebUi&#xff0c;它是k8s的一个附加组件&#xff0c;需要单独部署。 我们可以通过图形化的方法&#xff0c;创建、删除、修改、查询k8s资源。 二、安装部署dashboard组件 Github地址&#xff1a;GitHub - kubernetes/dashboard: Gen…
阅读更多...
物联网实战--平台篇之(四)账户后台交互

物联网实战--平台篇之(四)账户后台交互

目录 一、交互逻辑 二、请求验证码 三、帐号注册 四、帐号/验证码登录 五、重置密码 本项目的交流QQ群:701889554 物联网实战--入门篇https://blog.csdn.net/ypp240124016/category_12609773.html 物联网实战--驱动篇https://blog.csdn.net/ypp240124016/category_12631…
阅读更多...
自动驾驶中常见坐标系极其转换

自动驾驶中常见坐标系极其转换

各个传感器坐标系 相机坐标系统 摄像头的作用是把三维世界中的形状、颜色信息，压缩到一张二维图像上。基于摄像头的感知算法则是从二维图像中提取并还原三维世界中的元素和信息，如车道线，车辆、行人等，并计算他们与自己的相对位置。 感知算法和相机相关的坐标系有图像坐…
阅读更多...
javaWeb入门（自用）

javaWeb入门（自用）

1. vue学习 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><script src"https://unpkg.com/vue2"></script> </head> <body><div id"…
阅读更多...
大语言模型入门介绍（附赠书）

大语言模型入门介绍（附赠书）

自2022年底ChatGPT的震撼上线以来&#xff0c;大语言模型技术迅速在学术界和工业界引起了广泛关注&#xff0c;标志着人工智能技术的又一次重要跃进。作为当前人工智能领域的前沿技术之一&#xff0c;代表了机器学习模型在规模和复杂性上的显著进步。它们通常由深度神经网络构成…
阅读更多...
解决微信小程序电脑能正常使用，手机端无法正常访问的SSL证书问题

解决微信小程序电脑能正常使用，手机端无法正常访问的SSL证书问题

目录 前言1 问题描述与调试2 探索问题根源2.1 用户反馈收集2.2 尝试手机端访问2.3 PC端调试 3 确认问题与解决方案3.1 检查SSL证书3.2 重新部署SSL证书3.3 测试修复效果 4 SSL&#xff08;Secure Sockets Layer&#xff09;证书中间证书4.1 SSL证书链的构成4.2 中间证书的作用 …
阅读更多...
MindSponge分子动力学模拟——定义一个分子系统

MindSponge分子动力学模拟——定义一个分子系统

技术背景 在前面两篇文章中&#xff0c;我们分别介绍了分子动力学模拟软件MindSponge的软件架构和安装与使用。这里我们进入到实用化阶段&#xff0c;假定大家都已经在本地部署好了基于MindSpore的MindSponge的编程环境&#xff0c;开始用MindSponge去做一些真正的分子模拟的工…
阅读更多...
04、Kafka集群安装

04、Kafka集群安装

03、Kafka 集群安装 1、准备工作 首先准备一台虚拟机&#xff0c;centos7系统&#xff0c;先在一台上配置安装后&#xff0c;最后克隆成多台机器。 1.1 安装JDK &#xff08;1&#xff09;下载JDK&#xff0c;上传到 /root/software 路径 下载地址&#xff1a;https://www…
阅读更多...
DELL EMC unity存储系统如何初始化

DELL EMC unity存储系统如何初始化

在客户的存储使用过程中&#xff0c;经常会碰到一些场景需要对存储系统做重新初始化&#xff0c;就是回到出厂时候的配置。比如&#xff0c;客户设备要利旧&#xff0c;二次使用&#xff0c;一般都要回到出厂状态做重新配置的动作。存储严重故障&#xff0c;没有能力修复或者数…
阅读更多...
现货黄金今日行情分析：昨日高低点法

现货黄金今日行情分析：昨日高低点法

进行交易之前&#xff0c;投资者要对现货黄金今日行情进行一波分析&#xff0c;我们交易决策应该建立在合理分析的基础之上。那么打开市场交易软件看到现货黄金今日行情之后&#xff0c;该如何着手进行分析呢&#xff1f;下面我们就来讨论一下具体的方法。 要进行现货黄金今日行…
阅读更多...
【QuikGraph】C#调用第三方库实现迪杰斯特拉(Dijkstra)算法功能

【QuikGraph】C#调用第三方库实现迪杰斯特拉(Dijkstra)算法功能

QuikGraph库介绍 项目地址&#xff1a;https://github.com/KeRNeLith/QuikGraph QuikGraph为.NET提供了通用的有向/无向图数据结构和算法。 QuikGraph提供了深度优先搜索、广度优先搜索、A*搜索、最短路径、k最短路径&#xff0c;最大流量、最小生成树等算法。 QuikGraph最初…
阅读更多...
大模型的不足与解决方案

大模型的不足与解决方案

文章目录 ⭐ 不具备记忆能力 上下文窗口受限⭐ 实时信息更新慢 新旧知识难区分⭐ 内部操作很灵活 外部系统难操作⭐ 无法为专业问题 提供靠谱的答案⭐ 解决方案的结果 各有不同的侧重 在前面三个章节呢&#xff0c;为大家从技术的角度介绍了大模型的历程与发展&#xff0c;也为…
阅读更多...
最新文章

Copyright @ 2022~2023