手把手教你入门vue+springboot开发（七）--前端代码解读与优化

文章目录

前言

承接上篇，登录demo实例的Vue前端代码结构前面已有介绍，本篇我们先熟悉一下Vue的常用指令和生命周期管理，然后通过实现一个“记住我”的小功能来分析Vue前端代码。

一、Vue指令

Vue提供了一些常用指令，这些指令的使用使得Vue.js能够非常灵活地操作DOM和响应式数据，从而实现丰富的用户界面交互和动态内容更新。
指令作用语法v-for列表渲染，遍历容器的元素或者对象的属性v-for="(item, index) in items"或v-for=“item in items”v-bind为HTML标签动态绑定属性值，如设置href、css样式等v-bind:属性名=“属性值”，简化后:属性名=“属性值”v-if/v-else-if/v-else控制元素的显示与隐藏，判定为true时创建，否则不创建，用于不频繁切换的场景v-if=“表达式”v-show控制元素的显示与隐藏，判定为true时显示，否则隐藏，用于频繁切换的场景v-show=“表达式”v-on为HTML标签绑定事件v-on:事件名="函数名"或@ :事件名=“函数名”v-model在表单元素上创建双向数据绑定v-model=“变量名”v-once标记一个元素或组件只渲染一次，之后不会再随着数据的变化而重新渲染，该指令用于优化性能

二、Vue生命周期

每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。
Vue3Vue2钩子函数作用setupbeforeCreate在组件创建之前调用setupcreated在组件创建之后调用onBeforeMountbeforeMount在组件挂载到DOM之前调用onMountedmounted组件挂载到DOM之后调用onBeforeUpdatebeforeUpdate在组件因响应式状态更新而即将重新渲染之前调用onUpdatedupdated在组件重新渲染之后调用onBeforeUnmountbeforeUnmount在组件实例被卸载之前调用onUnmountedunmounted组件实例被卸载之后调用
Vue为我们开发提供了两种组件逻辑实现方式：选项式API和组合式API，Vue2使用的是选项式API，Vue3使用的是组合式API，所以我们的demo使用的是组合式API，它是Vue3提供的一种基于函数的组件编写方式，通过使用一组函数来组织和复用组件的逻辑，提供了一种更灵活、更可组合的方式来编写组件。
其中setup是Vue3才有的，它不是一个生命周期钩子，但它是所有组件逻辑的起点，在组件实例被创建之后执行，它相当于Vue2中的beforeCreate和created两个钩子函数。
我们最常用的是onMounted钩子函数。

三、“记住我”功能实现

在我们的登录demo界面有个“记住我”选择框，但是没有实现相关功能，下面我们就来实现这个小功能，以此来初步理解Vue的使用细节。
前面我们说过，stores目录是Vue存储信息的代码，要实现“记住我”功能，我们需要存储用户名、密码和“记住我”标志这3个信息，所以我们先在stores目录增加userInfo.js文件保存这3个信息。

import {
   defineStore} from 'pinia'
import {
   ref} from 'vue'const useUserInfoStore =defineStore('userInfo'