值得推荐的 Vue 库
今天来推荐几个实用的 Vue 库！
1. 状态管理（1）PiniaPinia 是最新一代的 Vue 轻量级状态管理库。它适用于 Vue 2.x 和 Vue 3.x。它是 Vue 官方成员在2019年11月重新设计的一个状态存储库，它允许你跨组件/页面共享状态，并且是响应式的，类似于 Vuex。
Github：github.com/vuejs/pinia
（2）VuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
Github：github.com/vuejs/vuex
（3）vuex-persistvuex-persistedstate 是一个支持 Typescript 的Vuex插件，使你能够将应用程序的状态保存到持久存储中，例如 Cookies 或 localStorage。
Github：github.com/championswi…
2. 表单（1）VeeValidatevee-validate 是Vue.js的表单验证库，它允许验证输入并以熟悉的声明式样式 ...
apply ,call , bind的区别
this指向是一个非常头疼的问题，也是 ES5中众多坑中的一个，在 ES6 中可能会极大避免 this 产生的错误，但是为了一些老代码的维护，最好还是了解一下 this 的指向和 call、apply、bind 三者的区别。
this 的指向在 ES5 中，其实 this 的指向，始终坚持一个原理：this 永远指向最后调用它的那个对象。
apply ,call , bind的区别call() 与apply()只有一个区别，就是 call() 方法接受的是一个参数列表，而 apply() 方法接受的是一个包含多个参数的数组。 call(); 传递参数类型 直接返回调用结果
123456789101112 function Product(name, price) { this.name = name; this.price = price; } function Food(name, price) { Product.call(this, name, price); this.category = ...
git commit 规范
在工作中避免不了多人协作，协作避免不了有一个规范的流程，让大家有效的去合作；让项目有条不紊的进行。自然使用 git 规范进行把控也是项目中必不可少的技术了。
Git commit 规范为什么要写好 Git Commit?
提供更多的历史信息，方便快速浏览
可以过滤某些commit（比如文档改动），方便快速查找信息
12# 过滤日志信息git log HEAD --pretty=format:%s --grep 关键字
可以直接从commit生成Change log
如何写好Git Commit业界使用比较广泛的是Angular规范
12345<type>(<scope>):<subject><BLANK LINE><body><BLANK LINE><footer>
标题行：必填，描述主要修改类型和内容
主要内容：描述为什么修改，做什么样的修改，以及开发的思路等等
页脚注释：放 Breaking Changes 或 Closed Issuses
type | commit 类型
类型
...
hppt状态码
http网页状态码大全查询http网页状态码，是诸多站长经常接触到的东西，所谓的HTTP状态码，它是浏览器传输协议所响应的一种代码状态，不同的代码状态，反应了网页目前处于的状态，根据不同的状态码，可以判断出HTTP网页存在的问题方向，对于站长快速解决问题，节约了很多时间。而且HTTP状态码，也是搜索引擎与网站终端信息抓取和判断的一种依据，也是处理数据的重要参考依据。HTTP网页状态码共分为六大类，具体类别及含义，为您深度解析！
一、100类状态码：
属于信息型状态码，表达服务器正在处理请求
100状态码：表示客户端应继续其请求。101状态码：表示切换协议。服务器根据客户端的请求切换协议，只能切换到更高级的协议。102状态码：表示由WebDAV(RFC2518)扩展的状态码，意思是处理将被继续执行。
二、200类状态码：
成功状态码，表达请求已经正常处理完毕
200状态码：表示请求成功完成，请求的的响应头或数据响应正常返回。这也是网站网页应当正常表现的一个状态码。201状态码：表示成功请求并创建了新的资源。202状态码：表示已经接了请求，但未处理完成。
三、300类状态码：
重定向 ...
IPv4与IPv6的区别
IPv4与IPv6的区别
IPv4协议目前的全球因特网所采用的协议族是TCP/IP协议族。IP是TCP/IP协议族中网络层的协议，是TCP/IP协议族的核心协议。目前IP协议的版本号是4(简称为IPv4)，发展至今已经使用了30多年。
IPv4的地址位数为32位，也就是最多有2的32次方的电脑可以联到Internet上。
近十年来由于互联网的蓬勃发展，IP位址的需求量愈来愈大，使得IP位址的发放愈趋严格，各项资料显示全球IPv4位址可能在2005至2008年间全部发完。
IPv6协议IPv6是下一版本的互联网协议，也可以说是下一代互联网的协议，它的提出最初是因为随着互联网的迅速发展，IPv4定义的有限地址空间将被耗尽，地址空间的不足必将妨碍互联网的进一步发展。为了扩大地址空间，拟通过IPv6重新定义地址空间。
IPv6采用128位地址长度，几乎可以不受限制地提供地址。按保守方法估算IPv6实际可分配的地址，整个地球的每平方米面积上仍可分配1000多个地址。
在IPv6的设计过程中除了一劳永逸地解决了地址短缺问题以外，还考虑了在IPv4中解决不好的其它问题，主要有端到端IP连接、服务质量 ...
vue3的provide和inject
vue3的provide和inject在开发当中组件通讯是最常见的一个需求，一个好的框架能将组件通讯做的好的那才是真的好，在之前的vue2里，我们最常用的就是props来实现组件传递数据，当然这也并不是唯一的方法，不过却是非常方便的方法，但是总是会有弊端的，他只能实现父子组件之间传递，想要做到后代组件通讯就要使用其他方法。
在vue3当中，他给我们提供了两个组合式API，分别是provide和inject，provide和inject可以轻松实现跨层级组件通讯，provide在父组件中返回要传给下级的数据，inject在需要使用这个数据的子辈组件或者孙辈等下级组件中注入数据。
示例： 新建一个子组件inject.vue：
123456789101112131415<template> <div>我是inject组件，{{acceptMessage}}</div> // 我是inject组件，你好</template><script lang="ts">import ...
webpack处理js资源
处理 js 资源有人可能会问，js 资源 Webpack 不能已经处理了吗，为什么我们还要处理呢？
原因是 Webpack 对 js 处理是有限的，只能编译 js 中 ES 模块化语法，不能编译其他语法，导致 js 不能在 IE 等浏览器运行，所以我们希望做一些兼容性处理。
其次开发中，团队对代码格式是有严格要求的，我们不能由肉眼去检测代码格式，需要使用专业的工具来检测。
针对 js 兼容性处理，我们使用 Babel 来完成
针对代码格式，我们使用 Eslint 来完成
我们先完成 Eslint，检测代码格式无误后，在由 Babel 做代码兼容性处理
Eslint可组装的 JavaScript 和 JSX 检查工具。
这句话意思就是：它是用来检测 js 和 jsx 语法的工具，可以配置各项功能
我们使用 Eslint，关键是写 Eslint 配置文件，里面写上各种 rules 规则，将来运行 Eslint 时就会以写的规则对代码进行检查
1. 配置文件配置文件由很多种写法：
1.eslintrc.*
新建文件，位于项目根目录
.eslintrc
.eslintrc.js
.esl ...
vue3的shallowRef和shallowReactive
vue3的shallowRef和shallowReactivereactive用来包装一个对象，使其每个对象属性都具有响应性，但是这个包装过程是递归调用的，如果包装的对象有过多属性而又不需要设置相应，无疑是性能浪费
针对这种情况vue设置了shallowReactive shallowRef两个方法来包装响应式数据，通过该方法包装的数据只有第一层具有响应性
shallowReactive和reactive一样，该方法只能把对象或数组包装为响应式对象
123456789101112131415161718<template> <div class="about"> {{ test }} <button @click="change">change</button> </div></template><script setup>const test = shallowReactive(&# ...
vue3的toRef和toRefs
vue3的toRef和toRefs toRef
可以用来为源响应式对象上的某个 property 新创建一个 ref。然后，ref 可以被传递，它会保持对其源 property 的响应式连接。
从定义中可以看出，toRef针对的是一个响应式对象的prop。他的作用是创建一个ref对象，他的值指向另一个对象中的某个属性。
简单来说就是将响应式对象的某一个值单独提供给外部使用，并且也是响应式的。
1234567891011<template> <span>{{textCountRef}}</span> <span>{{textCountRef}}</span></template><script setup> import {reactive,toRef} from 'vue' let obj = reactive({count: 3, text: '真不错 ...
vue3自定义hooks
vue3的自定义hooks官方对自定义hook的定义：在vue应用的概念中，“组合式函数“（Composables）是一个利用Vue组合式API来封装和复用有状态逻辑的函数。
个人理解：自定义hook就是vue2中的Mixin，就是一些可复用的方法，降低耦合的函数，大幅度提升性能的方法。实质上就是一个函数，将setUp中的组合式API进行封装。
在开发当中经常会遇到一些函数需要多次使用，在不同的组件当中不需要多次重写该功能，只需要将该功能抽离出来，再将其封装成一个函数导出，在需要用到的地方引入即可。
实例：封装一个简单加法计算函数：
12345678import {ref} from 'vue'export function add (unm1,num2) { const subNum = ref(0) onMounted(() => { subNum = num1 + num2 }) return subNum}
在需要使用该函数的地方引入该函数：
123456 ...