Jasmin博客

1️⃣组合式API中生命周期函数的格式是什么？On+生命周期名字2️⃣组合式API中可以使用OnCreated吗？没有这个钩子函数，直接写setUp中3️⃣组合式API中组件卸载完毕时执行哪个函数？

TypeScript具备面向对象编程的基本语法，例如interface，class，enum等。具备封装、继承、多态等面向对象基本特征。模块可以相互加载，提高代码复用性。在TypeScript中,空字符串，数字0，null，undefined都被认为是false，其他则为true。TypeScript在JavaScript的基础上加入了静态类型检查功能，因此每一个变量都是有固定的数据类型。TypeScript通常利用function关键字声明函数，并且支持可选参数、默认参数、箭头函数等特殊语法。

颜色 尺寸 产地都选择了。

当路由path为二级路由路径member的时候，右侧可以显示个人中心三级路由对应的组件。1️⃣个人中心—个人信息和猜你喜欢数据渲染。2️⃣我的订单—各种状态下的订单列表展示。页数 = 总条数 / 每页条数。

在很多项目中，都会有数据字典表，前端通过请求后端拿到数据字典表里的数据，一般在页面列表上面状态数据都会是返回的数字，前端需要把数字转换成字典表里对应的数据值，下面写了一个前端写死的数据，stateMap里的数据可以换成从接口请求过来的数据。

编写一个函数useCountDown可以把秒数格式化为倒计时的显示xx分钟xx秒。2️⃣start是倒计时启动函数，调用时可以设置初始值并且开始倒计时。1️⃣formatTime为显示的倒计时时间。

编写一个函数useCountDown可以把秒数格式化为倒计时的显示状态。2️⃣start是倒计时启动函数，调用时可以设置初始值并且开始倒计时。1️⃣formatTime为显示的倒计时时间。

2️⃣通过动态类名：class控制激活样式类型active是否存在，判断条件为：激活地址对象的id===当前项id。1️⃣点击时记录一个当前激活地址对象activeAddress，点击哪个地址就把哪个地址对象记录下来。2️⃣切换地址交互：点击切换地址，点击确定按钮，激活地址替换成默认收货地址。地址切换是我们经常遇到的tab切换类需求，这类需求的实现逻辑都是相似的。1️⃣打开弹框交互：点击切换地址按钮，打开弹框，回显用户可选地址列表。1️⃣调用接口生成订单id，并且携带id跳转到支付页。

到目前为止，购物车在非登陆状态下的各种操作都已经ok了，包括action的封装，触发，参数传递，剩下的事情就是action中做登录状态的分支判断，补充登录状态下的接口操作逻辑即可。v-model双向绑定指令不方便进行命令式的操作（因为后续还需要调用接口），所以把v-model回退到一般模式，也就是model-value和@change的配合实现。单选的核心思路就是始终把单选框的状态和Pinia中的store对应的状态保持同步。2️⃣商品总价钱计算逻辑：商品列表中的所有商品的count*price累加之和。

思考：每个表单域都有自己的校验触发事件，如果用户一上来就点击登陆怎么办呢？在点击登陆时需要对所有需要校验的表单进行统一校验// 调用实例方法// valid: 所有表单都通过校验 才为true// 以valid做为判断条件 如果通过校验才执行登录逻辑// 1. 提示用户ElMessage({ type: 'success', message: '登录成功' })// 2. 跳转首页})

在设置state的时候会自动把数据同步给localstorage，在获取state数据的时候会优先从localstorage中取。操作state时自动把用户数据在本地的localStorege也存一份，刷新的时候会从localStorege中先取出。1️⃣用户数据中有一个关键的数据叫做token（用来标识当前用户是否登陆），而token持续一段时间才会过期。2️⃣Pinia的存储是基于内存，刷新就丢失，为了保持登陆状态就要做到刷新不丢失，需要配合持久话进行存储。

vue3 之 通用组件统一注册全局。

1️⃣获取到当前的鼠标在盒子内的相对位置（useMouseInElement）,控制滑块跟随鼠标移动（left/top）思路：维护一个数组图片列表，鼠标划入小图记录当前小图下标值，通过下标值在数组中取对应图片，显示到大图位置。2️⃣实现放大效果，大图的宽高是小图的两倍，大图的移动方向和滑块移动方向相反，且数值为2倍。3️⃣鼠标移入盒子（isOutside），滑块和大图才显示（v-show）3️⃣鼠标移入控制滑块和大图显示隐藏。1️⃣左侧滑块跟随鼠标移动。2️⃣右侧大图放大效果实现。

使用elementPlus提供的v-infinite-scroll指令监听是否满足触底条件，满足加载条件时让页数参数加一获取下一页数据，做新老数据拼接渲染。在不同路由切换的时候，可以自动滚动到页面的顶部，而不是停留在原先的位置。点击tab，切换筛选条件参数sortField，重新发送列表请求。

缓存问题：当路由path一样，参数不同的时候会选择直接复用路由对应的组件，相同的组件实例会被重复使用，两个路由渲染同一个组件，

非复杂的模版抽象成props，复杂的结构模版抽象为插槽。

需求:浏览器在上下滚动的过程中,如果距离顶部的滚动距离大于78px,吸顶导航显示，小于78px隐藏。一般情况下我们会有nav区域，header区域，二级路由出口区域以及footer区域，如图。阿里的字体图标库支持多种引入方式，项目里采用的是font-class引用的方式。我们在开发的时候先把大模块搭建起来，再一步一步填充小模块。项目中有两种导航，一种普通导航一种吸顶导航。

在编写代码的过程中，一旦输入@/，vscode会立刻联想出src下的所有子目录和文件，统一文件路径访问不容易出错。

Pinia是一个Vue的专属的最新状态管理库，是vuex状态管理工具的替代品1️⃣Pinia是用来做什么的？集中状态管理工具，新一代的vuex2️⃣Pinia中还需要mutation吗？不需要，action既支持同步也支持异步3️⃣Pinia如何实现getter？computed计算性函数4️⃣Pinia产生的Store如何解构赋值数据保持响应式？

1.provide和inject的作用是什么？跨层组件通信2.如何在传递的过程中保持数据响应式？第二个参数传递ref对象3.底层组件想要通知顶层组件做修改，如何做？传递方法，底层组件调用方法4.一棵组件树中只有一个顶层和底层组件吗？相对概念，存在多个顶层和底层的关系只要在组件树中能形成顶层和底层的组件关系都可以使用provide和inject。

1.获取模版引用的时机是什么？组件挂载完毕2.defineExpose编译宏的作用是什么？显式暴露组件内部的属性和方法。

1.父传子的过程中通过什么方式接收props？defineProps({属性名：类型})2.父传子setup语法糖中如何使用父组件传过来的数据？const props = defineProps({属性名：类型})3.子传父的过程中通过什么方式得到emit方法defineEmits([‘事件名称’])

通过watch监听的ref对象默认是浅层侦听的，直接修改嵌套的对象属性不会触发回调执行，需要开启deep。需求：在不开启deep的前提下，侦听age的变化，只有age变化时才执行回调。2.执行watch函数传入要侦听的响应式数据（ref对象）和回调函数。说明：同时侦听多个响应式数据的变化，不管拿个数据变化都需要执行回调。1.immediate（立即执行）2.deep（深度侦听）在侦听器创建时立即出发回调，响应式数据变化之后继续执行回调。作用：侦听一个或者多个数据的变化，数据变化时执行回调函数。

计算属性基本思想和Vue2的完全一致，组合式API下的计算属性只是修改了写法。

1️⃣ reactive和ref函数的共同作用是什么？用函数调用的方式生成响应式数据reactive不能处理简单类型的数据ref参数类型支持更好但是必须通过.value访问修改ref函数的内部实现依赖于reactive函数3️⃣ 在实际工作中推荐使用哪个？推荐使用ref函数，更加灵活。

setup选项的执行时机？beforeCreate钩子之前 自动执行setup写代码的特点是什么？定义数据 + 函数 然后以对象方式return经过语法糖的封装更简单的使用组合式APIsetup中的this还指向组件实例吗？指向undefined。

已安装 16.0 或更高版本的 Node.js。这一指令将会安装并执行 create-vue。

elementPlus+vue3之 表头字段设置组件拖拽排序重置显示隐藏（vue3+ts）