vue之v-show与v-if的区别

为什么data必须返回函数？

v-show和v-if的区别

v-if只有在满足条件时才渲染元素，v-show无论是否满足条件都会渲染元素，都会对元素样式的display属性进行控制。

v-if可以绑定在template上，可以和v-else匹配，v-show不可以。

v-if是真正的条件渲染，会确保元素在切换过程中其中的事件监听器和子组件被适当的销毁会重新组建。

v-if更高的切换开销，v-show更高的初始化开销，频繁切换使用v-show更好，条件很少改变的使用v-if。

元素上使用key的原因

vue中为了快速渲染元素，会复用已有元素，比如在切换都包含有input标签的模块时，希望input（比如input）中的内容在切换后不被保存，可以给input上绑定不同的key来区分input，这样vue在渲染元素时就不会将同一标签的元素视作为同一元素去复用。

一个聊天的页面，左边包含群和成员的列表，右边可以显示群聊窗口或私聊窗口

通过v-show控制群聊窗口和私聊窗口组件切换，聊天窗口中需要滚动条始终定位在消息的最低部。

 <chat-group-window v-show='!isToOne' :groupInfoObj="checkedChat"/>
 <chat-to-one-window v-show='isToOne' :groupInfoObj="checkedChat"/>

问题：

isToOne为true时切换成第二个组件，第二个组件中的滚动条在数据加载完之后，不能定位在最底部。读取到的父元素的高度始终都是没有加载数据之前的元素高度。不太清楚原因，换成v-if／v-else就可以了。

还有一个问题，每次给组件一个不同的key，无论怎样都会不显示。

未完待续。。。