vue学习重要知识点

1、v-for中的key到底有什么用？如何理解“就地服用策略”？

vue实现了一套虚拟DOM，使我们可以不直接操作DOM元素，指操作数据便可以重新渲染页面。实现虚拟DOM的便是高效的Diff算法。

image.png
image.png

所以，key的主要作用是为了高效的更新虚拟DOM，在vue中使用相同 标签名元素的过渡切换时也会使用到key属性，目的是为了让Vue可以区分他们，否则vue只hi替换其内部属性而不会触发过渡效果。

2、v-for优先级比v-if大

当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你想为仅有的一些项渲染节点时，这种优先级的机制会十分有用

3、组件里使用v-for必须使用key属性

组件里的v-for不自动将数据传递到组件，因为组件会与v-for紧密耦合，所以要通过props

4、组件DOM模版解析注意事项

当使用 DOM 作为模板时 (例如，使用 el 选项来把 Vue 实例挂载到一个已有内容的元素上)，你会受到 HTML 本身的一些限制，因为 Vue 只有在浏览器解析、规范化模板之后才能获取其内容。尤其要注意，像 <ul>、<ol>、<table>、<select> 这样的元素里允许包含的元素有限制，而另一些像 <option> 这样的元素只能出现在某些特定元素的内部。

<table>
  <my-row>...</my-row>
</table>

自定义组件 <my-row> 会被当作无效的内容，因此会导致错误的渲染结果。变通的方案是使用特殊的 is 特性：

<table>
  <tr is="my-row"></tr>
</table>