vue 高阶面试题_15个 Vue.js 高级面试题，必收藏

1. 渲染项目列表时，“key” 属性的作用和重要性是什么？

渲染项目列表时，key 属性允许 Vue 跟踪每个 Vnode。key 值必须是唯一的。

如果没有使用 key 属性，并且列表的内容发生了改变(例如对列表进行排序)，则虚拟 DOM 宁愿使用更新的数据来修补节点，来反映更改，而不是上下移动元素。这是默认模式，非常有效。

当提供唯一的键值 IS 时，将根据对键的更改对元素进行重新排序(并且不使用新数据对它们进行修补)，如果删除了 key(例如，删除列表中的项目时)，则对应的元素节点也被销毁或删除。

请注意下图：

这里有一个父组件渲染一个子组件列表。我们看到三个列表项被渲染为三个子组件节点。这些子组件都包含一个 span 标记和一个输入框，可能还包含一个本地状态对象(可选)。现在让我们检查两种情况：

当不使用 key 属性时：例如如果列表已重新排序，则 Vue 会使用重新排序的数据简单地修补已经存在的三个节点，而不用移动这些节点。只要用户没有输入或更改这些子组件中一个或多个子组件的本地状态，此方法就可以正常工作。因此假设用户输入了组件编号为 3的输入框，重新排序列表后，组件编号为 3 的 span 标签内容将呗更改，但是输入框将与用户键入的内容击破状态数据一起保留在这里。这是因为 Vue 无法识别组件编号 3，它只是重新修补它所看到的更新数据，即 span 标签的内容。

当在子组件上使用 key 属性时，Vue 会知道该组件的身份，并且在对列表进行重新排序时，将移动节点而不是对其进行修补。这能够确保手动编辑的输入框以及整个组件移动到新位置。

在有条件地渲染组件或元素时，还可以用 key 属性来向 Vue 发出有关元素唯一性的信号，并确保元素不会被新数据重新修补。

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

2.你将怎样在模板中渲染原始 HTML？

在模板中输出内容的典型方法是使用 mustache 语法标签从方法、属性或数据变量输出数据。但是 mustache 标记会渲染文本。如果你尝试使用 mustache 标记来渲染 HTML，它将以文本字符串的形式去渲染，并且不会被解析。要将内容渲染和解析为 html，我们可以使用 v-html 指令，如下所示。

模板<div id="app" v-html=”t