2021-10-12

 vue双向绑定原理

vue是采用数据劫持配合发布者-订阅者的模式的方式，通过Object.defineProperty()来劫持各个属性的getter和setter，在数据变动时，发布消息给依赖收集器（dep中的subs），去通知（notify）观察者，做出对应的回调函数，去更新视图

自定义指令

Vue.js 自定义指令 | 菜鸟教程

过滤器

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

长连接keep-alive

客户端（浏览器）如果使用的是HTTP/1.1版本，默认会发送connection:keep alive字段

，如果没有特殊说明，TCP连接是默认保持的，而需要将一个连接关闭，则需要客户端发送Connection：close首部字段。

绑定key的作用

为了给Vue 一个提示,以便它能跟踪每个节点的身份,进行重用和重新排序现有元素,需要为每项提供一个唯一 key 属性。

key 属性主要用于Vue的虚拟算法。在对节点进行diff的过程中,判断新旧nodes是否为相同节点的一个重要条件就是 key 是否相等。如果是相同节点,则会尽可能的复用原有的DOM节点。

如果不使用key,Vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。

使用key，它会基于key的变化重新排列元素顺序，并且会移除 key 不存在的元素。