一、Vue3介绍

1.基本框架语法

（1）示例

<template>
//简单的HTML结构

</template>


<script>
//编写Javascript逻辑，定义组件的响应式数据、方法、声明周期钩子、导入其他模块等

//1.导入其他模块 如
import axios from "axios";    //axios:一个基于AJAX技术的苦，用于在钱带你发送网络请求 get post
import { useRoute, useRouter } from "vue-router"; //useRoute:获取当前路由的信息对象
import { ref, reactive, onMounted } from "vue";
import qs from 'qs';
import Footer from "../components/Footer.vue"; //自定义的组件，实现组件的服用
import { getSessionStorage } from "../common.js" //回话存储技术

export default {
    setup(){
        onMounted( ()=>{axios.post('Controller类/方法', qs.stringify({ 序列化参数}))
                .then((response) => {
                    console.log('后端返回数据：', response.data);
                })
                .catch((error) => {
                    // 捕获请求异常（如网络错误）
                    console.error(error);
                });){
        }
        //在setup函数中定义reactive对象
        const state=reactive({
            arrFood:[], //数组
            food:{}  //对象
        })

    return{
        //暴露在模版中使用的变量、方法
        state,

    }
}


</script>

<style scoped>
//引入CSS样式 scoped局部作用域，样式只作用于当前组件，不会影响其他组件（避免渲染错误）
</style>

（2）解释：

       1.axios 与AJAX

        a.AJAX:一种技术概念（通过JavaScript异步发送网络请求、更新页面）

        b.axios:一个基于AJAX技术的库，更方便的发送get post请求

        2.Route与Router

        a.获取方式：在Vue组件中：

        import { useRoute, useRouter} from 'vue-touter' 这是Vue Router框架的约定，不能自定义或改名

        const route=useRoute();

        const router=useRouter();

        b.作用：

        route.path 获取路径

        router.push 跳转页面

        c.示例（使用查询参数query）：

        const id=route.query.id   //获取参数id

        router.push({

                path:'example',

                query:{id:1,name:xx}

                }

        })

2.生命周期函数（组合式）

主要包括：onBeforeMount、 onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted

常见使用：

（1）onBeforeMount:

        1.在组件挂载到DOM之前调用

        2.应用：

                做挂载前的准备工作，比如对即将挂载的 DOM 结构进行一些初始化的计算等。

（2）onMounted:

        1.组件挂载到 DOM 之后调用

        2.应用：

                是操作 DOM、发起异步请求（像你代码里在 onMounted  中用 axios  发请求获取后端数据）的常用时机，因为此时组件已经完全挂载，DOM 结构可用，能保证获取到正确的 DOM 或者顺利发起网络请求并处理返回数据。比如你代码中，在组件挂载后，通过 axios  向后端发送请求，获取数据后可以进一步处理并更新组件的响应式数据

（3）onBeforeUpdate:

        1.在组件响应式数据发生变化，DOM还未更新前调用

        2.应用：

                获取更新前的DOM状态等操作
 

（4）onUpdated:

        1.在组件响应式数据发生变化，DOM 已经更新之后调用

        2.应用：

                需要在 DOM 更新后执行一些操作

二、Vue3注意事项

        1.函数位置：

        （1）写在setup()函数中的内容

                1.组合式API相关逻辑

                        a.声明周期函数（如onMounted），用于控制组件的生命周期行为

                        b.响应式数据定义（如reactive、ref），通过rative或ref创建的响应式数据，要在setup内生命，才能渝模版奖励响应式关联[使对象的属性变化能被Vue追踪]

                        如：以后通过state.ordersArr来调用

const state = reactive({
      ordersArr: [],
    });

                        c.计算属性：computed（如计算购物车金额等）

                        d.自定义方法/函数：在setuo中声明并返回

                2.异步操作与逻辑处理：

                        发起网络请求（axios），通常在onMounted生命周期钩子中执行

        （2）写在setup()函数外

                        1.components组件

                        2.外部库的导入

        2.双向数据绑定: v-model

                如：<input type="text" v-model="users.userId" placeholder="输入手机号" />