javaweb-vue3基础
响应式
在 Vue 3 的中，ref() 和 reactive() 都是用来创建响应式数据的，但它们的使用方式和适用场景不同。
1. ref()：适用于基本类型
ref() 适用于基本类型（如字符串、数字、布尔值），也可以用于对象，但需要 .value 访问值。
<script setup>
import { ref } from 'vue';
const count = ref(0);
const increment = () => {
count.value++; // 需要 .value 访问和修改
};
</script>
<template>
<div>
<p>Count: {{ count }}</p> <!--无需 count.value -->
<button @click="increment">+1</button>
</div>
</template>
2. reactive()：适用于对象
reactive() 适用于对象、数组、Map、Set，不需要 .value，可以直接修改。
<script setup>
import { reactive } from 'vue';
const state = reactive({
count: 0
});
const increment = () => {
state.count++; // 直接修改，不需要 .value
};
</script>
<template>
<div>
<p>Count: {{ state.count }}</p>
<button @click="increment">+1</button>
</div>
</template>
总结: ref适用于简单的数据(基本数据类型),reactive适用于对象,数组等
视图渲染技术
插值表达式
插值表达式:最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 ,即双大括号{{}}
语法格式：{{数据}}
插值表达式是将数据渲染到元素的指定位置的手段之一 插值表达式不绝对依赖标签,其位置相对自由 插值表达式中支持javascript的运算表达式（比如） 插值表达式中也支持函数的调用
文本渲染
为了渲染双标中的文本,我们也可以选择使用v-text和v-html命令
v- 这种写法的方式使用的是vue的命令 v-的命令必须依赖元素,并且要写在元素的开始标签中 v-***指令支持ES6中的字符串模板 插值表达式中支持javascript的运算表达式 插值表达式中也支持函数的调用 v-text可以将数据渲染成双标签中间的文本,但是不识别html元素结构的文本 v-html可以将数据渲染成双标签中间的文本,识别html元素结构的文本
属性渲染
想要渲染一个元素的 attribute，使用 v-bind指令
-
插值表达式不能直接放在标签的属性中,要渲染元素的属性使用v-bind
-
v-bind可以用于渲染任何元素的属性,语法为
v-bind:属性名='数据名', 可以简写为:属性名='数据名'
事件渲染
使用 v-on 来监听 DOM 事件，并在事件触发时执行对应的 Vue的JavaScript代码。
用法：v-on:click="handler" 或简写为 @click="handler" vue中的事件名=原生事件名去掉on 前缀 如:onClick --> click handler的值可以是方法事件处理器,也可以是内联事件处理器
条件渲染
v-if：
-
v-if='表达式'只会在指令的表达式返回真值（true）时才被渲染 -
也可以使用
v-else为v-if添加一个“else 区块”。 -
一个
v-else元素必须跟在一个v-if元素后面，否则它将不会被识别。
双向绑定
页面上的数据由于用户的操作造成了改变，也会同步修改对应的响应式数据，双向绑定一般用于表单标签。
格式：v-model:value=”数据”，一般省略:value，写为v-model=”数据”，此时的数据还是指value值
2.vue生命周期
Vue 2 主要生命周期：
创建阶段：`beforeCreate` → `created`
挂载阶段：`beforeMount` → `mounted`
更新阶段：`beforeUpdate` → `updated`
销毁阶段：`beforeDestroy` → `destroyed`
Vue 3 变化：
beforeCreate 和created被 setup() 取代
beforeDestroy 和 destroyed 变为 onBeforeUnmount 和 onUnmounted
其他生命周期改为 onXxx 形式
Vue 的 Promise 介绍
在 Vue.js 开发中，Promise 主要用于处理 异步操作，如 API 请求、延迟执行任务等。Vue 本身没有专门的 API 来创建或管理 Promise，但它可以与 JavaScript 的原生 Promise 以及 Vue 生态系统（如 Vue Router、Vuex、Pinia 等）很好地结合使用。
1. Promise 基本用法
function getData() { return new Promise((resolve, reject) =>
{ setTimeout(() =>
{ resolve("数据加载成功"); }, 2000); }); }
getData() .then((data) =>
{ console.log(data); // 2秒后打印 "数据加载成功" }) .catch((error) =>
{ console.error("错误:", error); });resolve函数：在回调函数中调用resolve()，Promise 状态会从pending变为resolved（成功）。reject函数：在回调函数中调用reject()，Promise 状态会从pending变为rejected（失败）。
2. async 和 await
async 和 await 是 JavaScript 处理异步代码的方式，它们基于 Promise，可以让代码更清晰易读。Vue 组件中的 异步请求（如 API 请求），通常会用 async/await 来管理。
async
async关键字用于标识一个异步函数，返回值是一个Promise。- 方法如果正常
return结果，Promise状态就是resolved，返回值就是resolve的值。 - 方法中如果抛出异常，则返回的
Promise状态就是rejected。
await
await关键字用于等待Promise解析，返回Promise成功的结果。await右侧如果是一个普通值，则直接返回该值。let res = await "张三"; // res = "张三"await右侧如果是Promise，则返回Promise成功的结果。let res = await Promise.resolve("张三"); // res = "张三"await右侧如果是失败状态的Promise，那么await会直接抛异常。await关键字必须在async修饰的函数中使用，但async函数中可以没有await。await后面的代码会等待await执行完毕后才继续运行。
Axios
Axios 是一个基于 Promise 的 HTTP 请求库，常用于 Vue、React 等前端框架中，来处理 API 请求。
发送 GET 请求
import axios from 'axios';
axios.get('https://jsonplaceholder.typicode.com/todos/1') .then(response => { console.log(response.data); // 获取数据 }) .catch(error => { console.error("请求出错:", error); });发送 POST 请求
axios.post('https://jsonplaceholder.typicode.com/posts', {
title: 'Vue Axios',
body: '使用 Axios 发送 POST 请求',
userId: 1
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error("请求出错:", error);
});