在vue中使用v-if来销毁组件

近期项目中接手了一个同事用vue写的组件,说下项目的特点

• 各种技术栈混合：jQuery, require.js, jquery, rivets.js
• 最近的需求使用的框架是vue替代了之前的rivets.js数据渲染模板
• 非模块化开发，使用es6模板字符串来写vue组件，一个js文件为一个vue组件
• 项目主要做的工作是拿到后台数据渲染到页面上，对于动画等特效几乎没有任何要求

说下接手组件的特点：

是这样一个需求：通过对接口返回的数据某个字段定义的结果类型来进行取值范围，默认值，值格式，值的判定规则以及样式。

因此定义了业务组件a.js

基础组件

• 取值范围组件range.js

• 默认值组件default.js

• 值格式组件dataPatter.js

• 判定规则组件judgeRule.js

• 样式组件style.js

---

在a.js业务组件里引入上面定义的五个基础组件。

在页面上点击某个按钮会显示a.js组件

说道这里我想说的重点就到了，之前这个组件显示与隐藏是通过

.cls {
  dispaly: none; 
}

来控制组件的显示盒隐藏呢，这就为我接手挖了一个不大不小的坑吧。

a.js是在主页面上引入的，当进入主页面未点击页面上相应按钮来显示a.js组件时，组件实际上已经被渲染了，而相应的业务组件的逻辑是需要相应的数据才能渲染的，否则会有bug,为了解决bug，我在a.js组件data对象里定义了showFlag：false,当点击页面上显示按钮时作以下处理

display => block;
showFlag => true

嗯，这的确解决了部分问题，额外定义了一个showFlag还没从根本上解决。为什么呢。因为业务上其他逻辑还需要通过a.js组件的ref属性获取该组件，然后改变该组件你的display值来显示与隐藏组件。而实际上我想要的是初始化进入主页面不加载a.js,点击显示按钮，发送ajax请求，拿到数据后在显示a.js组件，然后将拿到的数据渲染到页面上去。但是不能直接在主页面上使用v-if来控制a.js组件的显示逻辑，因为使用了v-if后就无法通过ref属性获取到该组件，那么其他业务逻辑就无法控制a.js的显示和隐藏。

这些问题的根本原因就在于不应该使用display:none或者v-show来控制组件的显示或隐藏。应该使用v-if.

使用v-if有以下好处

• 能决定组件的渲染时机，而不是单纯视觉上的显示和隐藏。
• 数据重置，项目的要求是：关闭一个页面后再次打开之前输入的数据不存在，都为初始值，这样可以避免额外的数据重置工作。

在vue中有destroy来销毁组件。但在实际开发中很少使用到。我们更多的是使用v-if。控制组件渲染时机，组件里表单数据初始化需要使用v-if而不是v-show或者单纯的css从视觉上“欺骗”自己。