pinia最重要的是，搭配Typescript一起使用时有非常可靠的类型推断支持pinia没有mutations，mutations是冗长的在actions中可以处理同步也可以处理异步，getters的使用是相同的, state有vue2中的data相似 pinia没有总入口 是模块化的， ...
一个插件可以是一个拥有 install() 方法的对象，也可以直接是一个安装函数本身。安装函数会接收到安装它的应用实例和传递给 app.use() 的额外选项作为参数：插件没有严格定义的使用范围，但是插件发挥作用的常见场景主要包括以下几种：通过 app.component() 和 app.di...
shallowRef ref() 的浅层作用形式。和 ref() 不同，浅层 ref 的内部值将会原样存储和暴露，并且不会被深层递归地转为响应式。只有对 .value 的访问是响应式的。shallowRef() 常常用于对大型数据结构的性能优化或是与外部的状态管理系统集成。<template>...
我们在自定义类型的时候，有可能会希望一个接口允许有任意的属性签名，这时候 任意属性 就派上用场了。任意属性有两种定义的方式：一种属性签名是 string 类型的，另一种属性签名是 number 类型的。string 类型任意属性第一种，属性签名是 string，比如对象的属性：interfac...
Vue 3中的Hooks函数是一个非常实用的功能,在组件开发中他能够将一些通用逻辑抽离实现逻辑的复用,大大提高了我们代码的可读性及可维护性。hooks 是什么vue3 中的 hooks 就是函数的一种写法，就是将文件的一些单独功能的 js 代码进行抽离出来进行封装使用。它的主要作用是 Vue3...
h()创建虚拟 DOM 节点 (vnode)。// 完整参数签名 function h( type: string | Component, props?: object | null, children?: Children | Slot | Slots ): VNode创建原生...
各种框架都提供了逻辑复用的方式，React提供了hook, Vue提供了composition，Vue为了解决逻辑复用的问题，有几种方案可以选择Mixin方案无渲染组件方案组合式API方案我们通过三种逻辑复用的方案实现同样的逻辑复用需求，需求如下：我们想实现一段响应式状态布尔切换的逻辑1. M...
一个完整的前端 UI 交互到服务端处理流程是这样的：1.UI 组件交互操作；2.调用统一管理的 api service 请求函数；3.使用封装的 request.js 发送请求；4.获取服务端返回；5.更新 data；api/ login.js article.js remoteSearch....
1px边框问题高DPR下@media (-webkit-min-device-pixel-ratio: 2) { .border1px { position: relative; border: none; } .border1px::before { co...
最近做项目的时候，涉及到一个单点登录，即是项目的登录页面，用的是公司共用的一个登录页面，在该页面统一处理逻辑。最终实现用户只需登录一次，就可以以登录状态访问公司旗下的所有网站。单点登录( Single Sign On ，简称 SSO），是目前比较流行的企业业务整合的解决方案之一，用于多个应用系...
Array.prototype.slice.call(arguments) 将类数组转换为数组的原理 关键是数组对象上的slice方法function slice(start, end) { var startToUse = start || 0, endToUse = end...
function bindEvent(element, type, selecter, fn){ if(fn == null){ fn=selecter selecter = null } } bindEvevt( elem, 'click', '#div',...
检查元素类型const checkType = v => v === undefined ? 'undefined : v === null ? 'null' : v.constructor.name.toLowerCase();从数组中过滤所有虚值const myArray = [1, un...
var a=100; function a(){ console.log(a); } a();这个串代码执行完会报错 : a is not a function问题来了，为什么会报这个错误呢？ 这里涉及到函数和变量的预解析函数声明前置变量声明前置函数声明比变量声明优先声明过的变量不会重复声明v...
"lint-staged": { "src/**/*.{js,jsx,ts,tsx,json,vue}": [ "prettier --write", "eslint --fix", "git add" ] }
vite: { plugins: [ Components({ resolvers: [ AntDesignVueResolver({ importStyle: 'less' }), ...
自定义属性（有时候也被称作CSS 变量或者级联变量）是由 CSS 作者定义的，它包含的值可以在整个文档中重复使用。由自定义属性标记设定值（比如： --main-color: black;），由 var() 函数来获取值（比如： color: var(--main-color);）复杂的网站都会...
使用路由懒加载首屏不重要的组件延迟 加载非首屏组件使用异步组件静态资源放在CDN上减少首屏上js css等资源文件的大小使用服务端渲染减少DOM的数量和层级使用精灵图图片懒加载开启Gzip压缩做一些loading
闭包闭包就是能够读取其他函数内部变量的函数。所以闭包可以理解成定义在一个函数内部的函数。函数作为返回值function F1 () { var a = 100 return function () { console.log(a) //自由变量，定义时的父级作用域寻找 }...
this要在执行时才能确定，定义时无法确定var a = function(){ name: 'A', fn: function () { console.log(this.name) } } a.fn() //A a.fn.call({name: B}) //B va...