一些笔记20200714

this.$once('hook:beforeDestroy', function () { picker.destroy() })：

Vue3.0确实是新增了hook，有点靠近了react，但是这个是很早之前就出的，很奇怪，为什么没多少有介绍到。最简单的使用场景就是监听滚动或者计时器在组件销毁的时候清除，这段代码相当于在组件销毁的时候执行picker.destroy()，在vue官网/教程/深入了解组件/处理边界情况/程序化的事件监听器可以看看API。

@hook:

说实在的，这个语法我中文文档和英文文档都查了很久，没发现API有这个语法，但是确实是能实现，就是监听外部组件的生命周期

<Test @hook:mounted="childrenMounted"></Test>

当子组件执行mounted的时候，父组件就会执行childrenMounted方法，这在一定场景应该是有用的。

.sync修饰符：

之前就说过v-model是一个双向绑定的语法糖，vue还提供了.sync这个修饰符对一个props进行双向绑定，其实就是v-bind和v-on的语法糖，某些场景比使用props传递更理想。

Component动态组件：

前几天才觉得react可以把组件当作参数传递非常神奇，想想之前在做页面内tab切换的时候，一堆的v-if去判断，其实直接使用内置的动态组件更省事，以前知道这个，但是居然没有在项目中使用：

<component :is="component" v-if="componentShow" />

Object.freeze()：

Vue会递归监听data里面所有的对象，这是性能痛点之一，而这个方法，可以冻结一个对象，如果在vue里面声明的数据只是第一次渲染使用，可以直接冻结，不进行监听，如果你想重新进行监听可以直接赋值也是可以的，这方法也可以作为一个长列表性能优化使用：

data里面定义：

obj1: Object.freeze({a:1}),

obj2: {b: 2}

mounted(){

console.log(this.obj1)

console.log(this.obj2)

}

输出：

HTTP协议通信最耗费时间的是建立TCP连接的过程，那我们就可以使用HTTP Keep-Alive。但是，keep-alive长时间的TCP连接容易导致系统资源无效占用。配置不当的keep-alive，有时比重复利用连接带来的损失还更大。所以正确地设置keep-alive timeout时间非常重要。浏览器对于TCP的keep-alive有连接限制4-6个。

减少HTTP请求次数将多个文件压缩打包成一个，当然也不能都放在一个文件中，因为这样传输起来可能会很慢，权衡取一个中间值。配置使用懒加载，对于一些用户不立刻使用到的文件到特定的事件触发再请求，服务器资源的部署尽量使用同源策略。服务端最好开启gzip。

JSX 语法：

HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，允许 HTML 与 JavaScript 的混写HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。原谅我之前并不能解释jsx语法。