今天在写的一个行内编辑功能，想通过v-if 判断行内是否是编辑状态，来展示是input输入，还是普通显示文本，初始化默认的scope.row.ipshow1=true,点击编辑按钮，想通过@click='scope.row.ipshow1===false',来改变状态，重新渲染列表实现行内编辑，然后并不能达到预期效果.

通过多次百度，查到了关于深入响应式原理（附上官方文档https://cn.vuejs.org/v2/guide/reactivity.html），一句话总结：由于javascript 的显示，Vue 不能检测数组和对象的变化，了解了这个原理之后，我的代码做了如下修改，最终实现了行内编辑的效果（官方文档讲的特别清楚，大家一看就明白）：

 项目中需要按照不同的媒体类型，展示不同的表头且数据字段也不同。可以增加不同key值解决v-if不生效问题。

<el-table-column prop="author"
                  align="center"
                  :key="Math.random()"
                  v-if="pathIndex == '微博' || pathIndex == '微信'"
                  sortable="custom"
                  label="帐号名称">
</el-table-column>
<el-table-column prop="sitename"
                  align="center"
                  :key="Math.random()"
                  min-width="112"
                  v-if="pathIndex == '网络新闻'|| pathIndex == '头条'|| pathIndex == '电子报'"
                  sortable="custom"
                  label="媒体名称">
  <template slot-scope="scope">
    <p class="G_table_hidden_ellipsis"
        :title="scope.row.sitename">{{scope.row.sitename}}</p>
  </template>
</el-table-column>

事实证明，v-if本身是没有什么问题的，问题出在对应的变量身上。

前不久我使用VUE开发时遇到一个问题，好像v-if不起作用。什么意思呢，v-if是一个条件表达式，当且仅当条件满足时才触发，但在我的程序中，它好像有时条件明明不满足，也会被触发。

这就很麻烦了。难道是VUE这个破烂不行？

事实上，VUE是没啥问题的，是我不行。

代码如图

问题其实出在"edit"这个变量里。如果将edit换成“true/false”，就一点问题没有，运行结果毫不含糊。但换成变量就不一定了。原因是，我这些代码放在iView的一个模式对话框modal里，而modal的所谓关闭，其实只是隐藏，并没有从内存中去掉。当再次打开时，edit还是上一次展现时用的值，但我没有意识到，总认为对话框重新出现时，上面的变量一定是新的。我的思维，还停留在原始的网页开发上。众所周知，http协议是无状态的，网页关闭、打开，所有的信息都是重新初始化过的。而现在vue等开发平台，默认是单页系统，只有一个页面，所有东西在上面，基本都是动态加载，一旦加载，默认又会缓存下来。

这样做好许多好处，节省资源，速度快，用户体验好。缺点，似乎是开发的复杂度增加了。

2021.11.23

v-if 与 v-show 的区别：二者都对应条件，当条件不满足时，v-if不加载，v-show加载但不显示。

在运行过程中，v-if的条件切换，由不满足到满足时，v-if对应组件加载。但这有个过程。期间组件不一定能访问。因此，需要将组件访问语句放在this.$nextTick里，以免报错。

<!-- 当edit为真，加载Editor组件，否则加载Report组件 -->
<Report ref="report1" v-if="!edit" />
<Editor ref="editor1" v-if="edit" />

checkOver () { // 校核归来
  this.edit = false
  let _this = this
  this.$nextTick(() => {
    _this.$refs.report1.init(_this.id)
  })
},