AliveSeven's Blog

前言：最近在做毕设的时候，需要二次封装Naive UI的Input组件，达到多次复用的效果，然后遇到了需要v-model来二次传值的需求，实现方法本身不难，这里把Vue3的做法叙述一下，Vue2应该也差不多。 操作方法 所谓的v-model其实就是v-bind搭配v-on和emit的组合语法糖，可以通过这三个东西来定义需要双向绑定的变量名 直接上代码 父组件1<Input v-model:value="val" /> 子组件 子组件需要的做的事情其实不多，通过props定义一个叫value的变量，然后绑定到input属性的:value上面 props中的value你可以给他定义类型，也可以不定义，看你喜欢 然后需要定义一个update:value的emit事件，一定要叫这个名字，一定要叫这个名字——update:value 1234567891011121314151617181920<template> <input :value="props.value" @input="Inputing&q ...

前言：toRef和toRefs是Vue3中经常用到的API，有着非常重要的作用，搞懂这两个玩意的用法真的很多时候解答我们开发中的问题 作用 toRef和toRefs是用于复制reactive里面的属性，然后转成ref。 reactive原本是响应式对象，被解构后里面的属性丧失了响应特性。而toRefs可以将一个响应式对象变成普通对象，而将它的属性全部变成相应式属性 类似于浅拷贝的方式，它复制的其实就是引用 + 响应式 ref toRef: 复制 reactive 里的单个属性并转成 ref toRefs: 复制 reactive 里的所有属性并转成 ref toRef 简单来说就是toRef函数用于创建一个基于其他响应式对象的单一属性的引用。 它接收两个参数：第一个参数是一个响应式对象，第二个参数是一个字符串，表示该对象上的属性。 返回值是一个ref对象，它可以被解构为普通变量使用，但仍然保持与原始对象的关联。 12345678910111213141516171819202122<script>import { reactive, toRef } ...

前言：今天在开发落地页项目的时候，有这样的一个业务： 角色在登录之后，需要知道这个用户是否之前有绑定过角色， 因为一个账号有多个角色，但是能够领取奖励的只能有一个角色 所以需要知道这个用户是否有绑定过角色，如果有，那么直接跳过绑定角色这一步，如果没有，转到绑定角色的弹窗去。 但是现在就有个问题，我弹窗是自己做的一个用来装其他，比如登录框、绑定框、选择账号框的一个父组件，这里用到的绑定角色框是其中的一个子组件。 但是绑定角色里面的逻辑业务是需要在这个子组件里面调用的，不能放在像pinia、vuex里面这种公共区域调用，也不能放在别的组件中调用，所以现在有这样一个需求，vue3中父组件调用子组件的方法 实现方法在网上看到很多都是说用ref给子组件绑定一个值，然后在子组件中通过defineExpose将要调用的方法暴露出去。 但是弄了很多次，子组件ref绑定的值一直是undefined，不知道是不是我操作姿势不知道还是什么。 vue3-eventbus这是一个很好用的插件，类似于vue2中的事件总线，特别好用，只需要在要被调用的子组件中用bus.on()，设置要监听的方法名和，触发的 ...

前言：关于防抖节流，去网上搜到的很多基本上都是JS的写法，通过一个闭包对一个变量进行控制，而JS相对来说少一点，到了Vue3 + Ts这里的项目基本舍弃了this这种逗乐的东西，所以搜到的写法很多都不管用的。 在Vue中可以使用闭包的方法实现防抖节流。 同样也可以用lodash函数库中的_.throttle() / _.debounce()实现节流防抖 亦或是使用Vue中的directive()自定义指令，这样做的好处可以随处使用（建议） 自定义指令v-throttle 首先在src目录下新建一个throttle的文件夹 新建index.ts文件 写入下面的代码 1234567891011121314151617181920212223242526272829303132import type { App, Directive } from "vue";// 导出节流函数export default function setupThrottleDriective(app : App) { /** 定时器 */ let t ...

前言：老项目经常出现的优化问题，特别是那种引了一堆三方库插件啥的，做好分包真的能很大程度优化首屏加载速度。 优化原因在没有使用CDN加速的情况下，打包后的js和css文件有时会很大，甚至有1M或者几M以上，而且随着项目的越做越大，打包出来的文件就更大了，而在页面加载的时候，会拖慢加载速度，如果有CDN全站加速可能还好，如果托管于GitHub Page上面的话，会让加载速度变得很慢。 比如下图，在没有使用CDN加速的情况下，可以看出element-ui、vue、vuex、vue-router这些依赖都打进chunk-vendors.js中导致体积很大 查看依赖版本首先项目中需要使用依赖项，打开项目中的vue.config.js，查看要加速的包的版本，我这里项目中打算将element-ui、vue、vuex、vue-router这些包进行分离，让它们通过cdn加速来载入页面，记录其依赖版本方便后面使用。 依赖名称 依赖版本 vue 2.6.14 vue-router 3.1.3 vuex 3.6.2 element-ui 2.15.6 axios 0.2 ...

前言：这个也算老生常谈了，经常在面试中被问到的问题😂😂，其实基本上就是性能、Ts支持、响应式、优化等基本的区别吧 数据双向绑定原理 Vue2使用的是Object.defineProperty()进行数据劫持，结合发布订阅的方式实现。 Vue3使用的是Proxy代理，使用ref或者reactive将数据转化为响应式数据 使用proxy代理的优势 defineProperty只能监听某个属性，不能对全对象监听 可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可） 可以监听数组，不用再去单独的对数组做特异性操作，通过Proxy可以直接拦截所有对象类型数据的操作。 数据和方法的定义 Vue2使用的是选项类型API（Options API），Vue3使用的是合成型API（Composition API） Vue2： data() { return {}; }, methods:{ } Vue3： 数据和方法都定义在setup中，并return出来，在vue3中this是undefined，所以在setup中不能用this 生命周期 vue2 vue3 说明 ...

生成tsconfig.json 文件这个文件是通过tsc --init命令生成的 配置详解 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263"compilerOptions": { "incremental": true, // TS编译器在第一次编译之后会生成一个存储编译信息的文件，第二次编译会在第一次的基础上进行增量编译，可以提高编译的速度 "tsBuildInfoFile": "./buildFile", // 增量编译文件的存储位置 "diagnostics": true, // 打印诊断信息 "target": "ES5", // 目标语言的版本 "module": "CommonJS", // ...

前言：对于这个东西还是了解一下其原理比较好，很多时候开发需要用到父子组件通过v-model传值，其实实现的原理和方法一样。 原理解释 v-model 本质上是v-bind的语法糖 v-model一般只作用于表单，或是扩展于其它组件中，一般用于输入框input、textarea、select，它可以监听输入的数据，当数据发生改变之后触发相关事件 主要是通过v-bind绑定响应式数据 然后通过v-on触发监听事件 实现1<input v-model="searchText"> 等于 1234567891011121314<input v-bind:value="searchText" v-on:input="searchText = $event.target.value"><!--自html5开始,input每次输入都会触发oninput事件，所以输入时input的内容会绑定到searchText中，于是searchText的值就被改变;$event 指代当前触发的事件对象;$event ...

前言：rem是目前移动端常用的布局之一，此外还有何其相似的em，em一般代表父元素的字体大小，而rem是相对于根元素字体大小的值。 flexible.js是手机淘宝团队出的简洁高效移动端适配库，其GitHub地址在 https://github.com/amfe/lib-flexible rem的原理 rem布局的本质是等比缩放，一般是基于屏幕宽度 具体来说，rem 是指相对于文档根节点（即 HTML 标签）字号大小的单位。例如，如果文档根节点的字号大小为 16px，那么 1rem 就等于 16px。2rem就是32px rem的使用 可以使用 CSS 的 @media 和 JavaScript 等方式，根据设备屏幕宽度、像素密度等因素来动态设置字号大小，适合用于响应式设计，以适配不同设备的需求 rem的局限性和兼容性 低版本浏览器支持问题：IE8 及以下的浏览器不支持使用 rem 单位，需要通过 polyfill 或者其他方式进行降级处理。 超大分辨率问题：在极端情况下，可能出现因为可以配置的最大 rem 值受到了限制导致的布局问题。 rem的实际应用场景和方法通过像素密度 ...

前言：nodejs这种包管理确实麻烦，安装完后会默认将包安装到c盘导致后面开发C盘占用越来越离谱，还是建议配置一下吧，另外我个人比较推荐pnpm来代替npm，npm这种包管理效率实在太低了。。。- - npm设置 在nodejs文件夹下创建 node_global 和 node_cache 两个文件夹。 设置npm全局安装位置：npm config set prefix "D:\nodejs\node_global" 设置npm缓存位置：npm config set cache "D:\nodejs\node_cache" 设置环境变量 用户变量Path， 添加 D:\nodejs\node_global 新建系统变量 NODE_PATH， D:\nodejs\node_global\node_modules yarn的安装、设置和注意事项 安装：npm i -g yarn 查看yarn global、yarn cache目录 yarn global dir yarn cache dir 在nodejs文件夹下创建yarn文件夹，在 ...