vue --- Vue 的特殊特性(key、ref、is)

1、key

key 的特殊属性主要用在 Vue 的虚拟DOM算法，在新旧 nodes 对比时辨识 vNodes 上。如果不使用 key，Vue 会使用一种最大限度减少动态元素并尽可能的尝试修复 / 再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
有相同父元素的子元素，必须有独特的key，重复的key会造成渲染错误。

最常见的用例是结合 v-for：
<ul>
    <li v-for="item in items" :key="item.id">...</li>
</ul>

它也可以用于强制替换元素 / 组件而不是重复使用它。当你遇到“完整地触发组件的生命周期钩子”“触发过渡”等的场景时会很有用，例如：
<transition>
    <span :key="text">{{ text }}</span>
</transition>

2、ref

用法：<base-input ref="usernameInput"></base-input>

然后就可以这样访问：this.$refs.usernameInput

$refs 只会在组件渲染完成之后生效，并且它们不是响应式的。应该避免在【模板】或【计算属性】中访问 $refs。

3、is

用于动态组件且基于 DOM 内模板的限制来工作。例如：可以用来切换组件显示。切换后，如果想让组件缓存起来，可以加属性 keep-alive。

<table>
    <blog-post-row></blog-post-row>
</table>

如上这个自定义组件 <blog-post-row> 会被作为无效的内容提升到外部，并导致最终渲染结果出错。is 特性给了我们一个变通的办法：

<table>
    <tr :is="blog-post-row"></tr>
</table>

个人统计【2】：2019-05-25、2019-05-26