斌の顶级理解

什么是Pinia

Pinia.js 是新一代的状态管理器，由 Vue.js团队中成员所开发的，因此也被认为是下一代的 Vuex，即 Vuex5.x，在 Vue3.0 的项目中使用也是备受推崇。

Pinia.js 有如下特点：

• 完整的 typescript 的支持；
• 足够轻量，压缩后的体积只有1.6kb;
• 去除 mutations，只有 state，getters，actions（这是我最喜欢的一个特点）；
• actions 支持同步和异步；
• 没有模块嵌套，只有 store 的概念，store 之间可以自由使用，更好的代码分割；
• 无需手动添加 store，store 一旦创建便会自动添加；

安装

我们每时每刻使用的互联网、移动手机APK，都是由各种各样的资源拼成的HTML（JS、CSS）页面。这些资源绝大多数是静态资源，他们大多数都是不需要实时更新的。比如图片，CSS样式，JS库，这些静态资源构成了互联网的框架。

这些资源文件都很小，但是由于往往需要每次刷新页面时候都会重新下载，如果有什么方法可以减少对这些图像、样式等固定文件的下载，只获取必须API实时的数据然后渲染页面则用户访问肯定会更快更流畅。其实上HTTP协议本身就提供一个强大的机制来解决这个问题，这就是今天要给大家介绍的HTTP Cache缓存。作为一个Web开发者必须熟练掌握HTTP的缓存机制，它可以帮我们节省大量的带宽、服务器硬件，极大的优化我们网站和APP的性能改善用户体验。

缓存是一种保存资源副本并在下次请求时直接使用该副本的技术。

我们使用 HTTP 缓存，通过复用缓存资源，减少了客户端等待时间和网络流量，同时也能缓解服务器端的压力。可以显著的提升我们网站和应用的性能。

虽然 HTTP 缓存不是必须的，但重用缓存的资源通常是必要的，HTTP 缓存是一个 web 性能优化的重要手段。

随着互联网的发展，早已经不是仅限于简单的网页或是社交，电商购物、银行转账、企业管理等等。 Web 安全也是非常值得注意的。

什么是 Web 安全？

黑客利用网络操作系统的漏洞和 Web 服务器的 SQL 注入漏洞等，得到 Web 服务器的控制权，轻则篡改、删除、添加数据，重则窃取重要的商业信息、转账等，更严重的就是在网页中植入恶意代码，使网站受到不可预期的侵害。

常见的攻击可分为三类：XSS、CSRF、SQL注入。

1、XSS 攻击

特点

• 极速的服务启动，使用原生 ESM 文件，无需打包!
• 轻量快速的热重载，无论应用程序大小如何，都始终极快的模块热重载（HMR）
• 丰富的功能，对 TypeScript、JSX、CSS 等支持开箱即用。
• 优化的构建，可选 “多页应用” 或 “库” 模式的预配置 Rollup 构建
• 通用的插件，在开发和构建之间共享 Rollup-superset 插件接口。
• 完全类型化的API，灵活的 API 和完整 TypeScript 类型。

为什么选 Vite

直接点说，现市面上的构建工具太慢了（webpack、Rollup 和、Parcel等），Vite直接利用浏览器原生的ES模块使构建速度更快

搭建第一个 Vite 项目

使用vue-cli4.0创建项目

先把脚手架升级到最新版本，之前没有安装的话，直接全局安装就是最新版4.0

安装vue-cli npm install -g @vue/cli

更新vue-cli npm update -g @vue/cli

创建项目：

1.将数组的每一个元素依次与其他元素做比较，发现重复元素，删除

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5,5,5,5];
    console.log(arr);    //[1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5, 5, 5, 5]
    function noRepeat1(arr) {
        for(var i = 0; i < arr.length-1; i++){
            for(var j = i+1; j < arr.length; j++){
                if(arr[i]===arr[j]){
                    arr.splice(j,1);
                    j--;
                }
            }
        }
        return arr;
    }
    var arr2 = noRepeat1(arr);
    console.log(arr2);    //[1, 23, 3, 5, 6, 7, 9, 8]

2.借助indexOf()方法判断此元素在该数组中首次出现的位置下标与循环的下标是否相等

1
2
3
4
5
6
7
8
9
10
11
12
13

var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5,5,5];
    console.log(arr);    //[1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5, 5, 5]
    function noRepeat2(arr) {
        for (var i = 0; i < arr.length; i++) {
            if (arr.indexOf(arr[i]) != i) {
                arr.splice(i,1);//删除数组元素后数组长度减1后面的元素前移
                i--;//数组下标回退
            }
        }
        return arr;
    }
    var newArr = noRepeat2(arr);
    console.log(newArr);    //[1, 23, 3, 5, 6, 7, 9, 8]

3.利用数组中的filter方法

  函数柯里化，指的是将一个接受多个参数的函数，变为接受一个参数返回一个函数的固定形式，这样便于再次调用，例如f(1)(2)。

  如何实现add(1)(2)(3)(4)=10

方法一

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

function add(){
	// 将传入的不定参数转为数组对象
	var _args = Array.prototype.slice.call(arguments);
	var _adder = function(){
		_args.push(...arguments)
		return _adder
	}
	// toString隐形转换的特性
	_adder.toString = function(){
		return _args.reduce((a,b) => {
			return a + b
		}, 0)
	}
	return _adder
}
console.log(add(1,2,3)) // 6
console.log(add(1)(2)(3)) // 6

方法二

兼容性：

  所有浏览器都支持 white-space 属性。

  注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。

官方定义和用法：

  这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。

1、前言

  async函数，也就是我们常说的async/await，是在ES2017(ES8)引入的新特性，主要目的是为了简化使用基于Promise的API时所需的语法。async和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为，而无需刻意地链式调用Promise。

2、详解

  async表示函数里有异步操作，await表示紧跟在后面的表达式需要等待结果。需要注意的是await关键字只在async函数内有效，如果在async函数体之外使用它，会抛出语法错误。

2.1、async

Setter

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

var vm = new Vue({
 el: '#el',
 data: {
  num: 100,
 }
 computed: {
  price: {
   set: function(newValue){
    this.num = newValue * 100;
   },
   get: function() {
    return (this.num/100).toFixed(2);
   }
  }
 }
});

绑定value

表单控件的值可以绑定在vue实例的动态属性上

1
2
3
4
5

<input type="checkbox" v-model="checked" v-bind:true-value="a" v-bind:false-value="b">

// 选中：vm.checked==vm.a

// 未选中：vm.hchecked==vm.b