鄙人是个比较菜的新手。用React比较多，当然哈，只限于使用..... 不绕弯子了，之前早就关注过 v-if 和 v-show 的区别，打死我也没想到因为这俩还给我整出了bug。
发现问题
我们因为业务需求，有个功能是来回切换两个表格。数据结构都是不一样的。之前一位大哥是使用v-if写的(后来才注意到的) ，然后就出现了个离奇的事情，两个页面暂且就叫 A 和 B 出问题的是 A 页面。 俩页面来回切换的时候 A页面的，某一列数据丢失了，而且这一列的样式和B页面一样。百思不得其解，因为我工作年限很低，经验不足，所以我遇到的BUG 99%都是逻辑问题 于是乎，我就开始一点一点排查，先是结构，后是接口，然后数据源。到最后串起来的时候发现并没有什么异常。其实之前我就想到会不会是v-if渲染问题，但随之就抛诸脑后。到最后，实在没别的办法了，我就寻思，看看改成v-show 会不会好。结果BUG真就解决了....后来的我开始沉思....虽然这个问题看似简单，但对我来说，却是一种新的解决问题的思维方式。今日小趴菜技能+10.
解决问题
v-show
源码刨析
其实不管怎么看官方的代码，都是很简单 v-if 彻彻底底销毁元素 ,v-show 隐藏元素 我还是有点没搞懂，为什么只有那一列数据出问题。但是问题原因和解决办法找到了
区别
- v-if
动态的向DOM树内添加或者删除DOM元素
真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；在初始渲染条件为假时，什么也不做。
由于存在销毁和重建，具有更高的切换消耗
- v-show
通过设置DOM元素的display样式属性控制显示和隐藏
不管初始条件是什么，元素总是会被渲染，只是简单地基于 CSS 进行切换。
由于总是会被渲染，所以初始时有更高的渲染消耗
v-if 源码
const VueTemplateCompiler = require('vue-template-compiler')
const template = '<div v-if="true"><span>hello world</span></div>'
// 模版编译成render方法
const compile = VueTemplateCompiler.compile(template)
console.log(compile.render)
// 结果
with (this) {
return (true) ? _c('div', [_c('span', [_v("hello world")])]) : _e() }
满足条件时会创建DOM元素，不满足时会通过_e创建空节点，在vue/src/core/instance/render-helpers/index.js可以看到_e方法的定义target._e = createEmptyVNode
v-show 源码
找到vue/src/platforms/web/runtime/directives/show.js，会发现以下核心代码
bind (el: any, {
value }: VNodeDirective, vnode: VNodeWithData) {
vnode = locateNode(vnode)
const transition = vnode.data && vnode.data.transition
const originalDisplay = el.__vOriginalDisplay =
el.style.display === 'none' ? '' : el.style.display
if (value && transition) {
vnode.data.show = true
enter(vnode, () => {
el.style.display = originalDisplay
})
} else {
el.style.display = value ? originalDisplay : 'none'
}
},
从代码里可以看出v-show是通过改变CSS style.display来操作元素的显示与隐藏.
