vue页面中的参数、变量的引用问题，简析reactive、js生命周期——Bug调试记录

    前一天在做一个项目的时候，遇到了一个vue页面中的Bug，大致的情况是这样的，我需要在页面中使用一个element ui中一个叫做collapse的折叠面板组件，就是一个可以动态点击和显示的下拉框，这个组件的详情，请看这里

于是乎，，，我的部分引用代码如下：

 这里面的listForm就是我自己定义的一个存储数据对象的数组，当然了，也是这篇文章的主人公，在下面的js语言中具体定义与使用如下图所示，（ps：在使用自定义变量作为该组件的title的时候别忘记了在title的前面加上一个：不然的话你的组件的名称就会被浏览器无情的显示为一串你写的规规矩矩的英文~~~）

 注意这里面的listForm是常规型的，而在我远程查到数据的时候赋值时使用的是等于等于，这就导致，我的浏览器生气了！！！

具体表现为：当页面出现改动时，这种引用是生效的，（这很大部分来源于vue的更新自适应机制），但当我再次刷新浏览器的时候，这种引用功能就消失了，具体表现为浏览器的组件出现了一片空白，但是在F12 的显示窗里面，显示的是我的远程查询数据是已经查到了的，这令我疑惑了好久，终于我注意到，这个listForm 的类型。

常规型和reactive类型变量的区别在这里显现了出来，下面是我改动后的代码

 这时候我的浏览器，以及我页面的引用能够正常显示了，开始我以为是我v-for的使用问题，导致了我的组件循环引用不能正常显示，其实不然，不过在这里我还是要强调一下v-for的使用注意事项，像：Key标签的定义等等，具体请学习这篇文章讲的蛮好的。

下面，我分享两个点：

1.常规型变量定义与reactive型变量定义的区别

reactive型变量，顾名思义，是vue中的很重要的响应机制的应用类型，简单来说，是对实时的变化数据流，做出一定的存储，调用等功能。

2.JavaScript语言中的生命周期函数

转自：http://www.jb51.net/article/31611.htm

JS控件的生命周期跟其他平台UI的生命周期类似，但是又有自己的特点。在这里我把JS的生命周期定义为4部分： 

1.initializer: 初始化，做一些不牵扯DOM操作的初始化操作
2.createDom: 创建 DOM，在这个过程中我们创建控件需要的DOM结构
3.renderUI: 生成控件的内部元素，在这里调用子控件的渲染方法，开启子控件的生命周期
4.bindUI: 绑定事件，可以绑定子控件事件也可以绑定内部DOM的事件
5.synUI: DOM结构以及子控件生成完毕后，我们在配置项中传入的值或者默认的配置项要应用到DOM上，例如 width,height,focusable之类的属性
6.destructor: 析构函数，移除控件，清理控件上的事件，清理子控件，清理控件自己的DOM以及控件的一些对其他控件的引用。