TOMMYHU

怎么用vue+element递归组件动态创建多级表头？？？注意这个表头数据最终是要从后台带回来的树形数据
https://segmentfault.com/q/1010000011776820

1.for in 循环 并且使用hasOwnProperty 方法
var jsonObject1 = {             "name": "xiaoming",             "age": 29         },         var keys1 = [];     for (var p1 in jsonObject1) {         if (jsonObject1.hasOwnProperty(p1))             keys1.push(p1);     }     alert(keys1);
如果不使用 hasOwnProperty，给Object 添加自己的属性时，也会输出出来
Object.prototype.test = "I am test";     var jsonObject = {             "name": "xiaoming",             "age": 29         },         keys = [];     for (var p in jsonObject)         keys.push(p);     alert(keys);  //name,age, test

JavaScript使用一种称为垃圾收集的技术来管理分配给它的内存。这与C这样的底层语言不同，C要求使用多少借多少，用完再释放回去。其他语言，比如 Objective-C，实现了一个引用计数系统来辅助完成这些工作，我们能够了解到有多少个程序块使用了一个特定的内存段，因而可以在不需要时清除这些内存段。

JavaScript是一种高级语言，它一般是通过后台来维护这种计数系统。

当JavaScript代码生成一个新的内存驻留项时（比如一个对象或函数），系统就会为这个项留出一块内存空间。因为这个对象可能会被传递给很多函数，并且会被指定给很多变量，所以很多代码都会指向这个对象的内存空间。JavaScript会跟踪这些指针，当最后一个指针废弃不用时，这个对象占用的内存会被释放。

   A ---------> B ------------> C
例如对象A有一个属性指向B，而B也有一个属性指向C。即使当前作用域中只有对象A有效，但由于指针的关系所有3个对象都必须保留在内存中。当离开A的当前作用域时（例如代码执行到声明A的函数的末尾处），垃圾收集器就可以释放A占用的内存。此时，由于没有什么指向B，因此B可以释放，最后，C也可以释放。

然而，当对象间的引用关系变得复杂时，处理起来也会更加困难。

   A ---------> B ------------> C
                ^、_ _ _ _ _ _ _|
这里，我们又为对象C添加了一个引用B的属性。在这种情况下，当A释放时，仍然有来自C的指针指向B。这种引用循环需要由JavaScript进行特殊的处理，但必须考虑到整个循环与作用域中的其他变量已经处于隔离状态。

从这里我们可以看到，闭包问题的本质是作用域的问题，我平时写的闭包大多出现在：

循环引用
闭包可能会导致在不经意间创建循环引用。因为函数是必须保存在内存中的对象，所以位于函数执行上下文中的所有变量也需要保存在内存中：
function outerFn() {     var outerVar = {};     function innerFn() {         console.log(outerVar);     }     outerVar.fn = innerFn;     return innerFn; }; [codes] 这里创建了一个名为 outerVar 的对象，该对象在内部函数innerFn()中被引用。然后，为 outerVar 创建了一个指向 innerFn()的属性，之后返回了innerFn()。这样就在 innerFn() 上创建了一个引用outerVar的闭包，而outerVar又引用了innerFn()。 这会导致变量在内存中存在的时间比想象得长，而且又不容易被发现。这还不算完，还有可能会出现比这种情况更隐蔽的引用循环： [codes=c#] function outerFn() {     var outerVar = {};     function innerFn() {         console.log('hello');     }     outerVar.fn = innerFn;     return innerFn; };
这里我们修改了innerFn()，不再招惹 outerVar。但是，这样做仍然没有断开循环引用。
即使innerFn()不再勾引 outerVar，outerVar 也仍然位于innerFn()的封闭环境中。由于闭包的原因，位于 outerFn()中的所有变量都隐含地被 innerFn()所引用。我们再想一想，在 java 中的内部类不也是类似当前情况吗，内部类能够‘看’外部的 this。此时此刻，正如彼时彼刻，竟如此相像。因此，闭包会使意外地创建这些引用循环变得易如反掌。

DOM与JavaScript的循环
虽然我很早就知道闭包，也在调试内存问题时在 chrome F12 里的 profile 是里看到 closure reference,但是并不清除这个问题的根源。因为上述情况通常不是什么问题，JavaScript能够检测到这些情况并在它们孤立时将其清除。

最近看到关于这个问题的解释：在旧版本IE中存在一种难以处理的循环引用问题。

当一个循环中同时包含DOM元素和常规JavaScript对象时，IE无法释放任何一个对象——因为这两类对象是由不同的内存管理程序负责管理的。

除非关闭浏览器，否则这种循环在IE中永远得不到释放。为此，随着时间的推移，这可能会导致大量内存被无效地占用。

导致这种循环的一个常见原因是简单的事件处理:
$(document).ready(function() {     var button = document.getElementById('button-1');         button.onclick = function() {             console.log('hello');         return false;         }; });
当指定单击事件处理程序时，就创建了一个在其封闭的环境中包含button变量的闭包。而且，现在的button也包含一个指向闭包（onclick属性自身）的引用。这样，就导致了在IE中即使离开当前页面也不会释放这个循环。
为了释放内存，就需要断开循环引用，例如关闭窗口,删除onclick属性。另外，也可以像下面这样重写代码来

避免这种闭包：
function hello() {     console.log('hello');     return false; } $(document).ready(function() {     var button = document.getElementById('button-1');     button.onclick = hello; });
因为hello()函数不再包含 button，引用就成了单向的（从button到hello）,不存的循环，所以就不会造成内存泄漏了。

用jQuery化解引用循环

下面，我们通过常规的jQuery结构来编写同样的代码：
$(document).ready(function() {     var $button = $('#button-1');     $button.click(function(event) {         event.preventDefault();         console.log('hello');     }); });
即使此时仍然会创建一个闭包，并且也会导致同前面一样的循环，但这里的代码却不会使 IE 发生内存泄漏。由于jQuery考虑到了内存泄漏的潜在危害，所以它会手动释放自己指定的所有事件处理程序。只要坚持使用jQuery的事件绑定方法，就无需为这种特定的常见原因导致的内存泄
漏而担心。

但是，这并不意味着我们完全脱离了险境。当对DOM元素进行其他操作时，仍然要处处留心。只要是将JavaScript对象指定给DOM元素，就可能在旧版本IE中导致内存泄漏。jQuery只是有助于减少发生这种情况的可能性。

有鉴于此，jQuery为我们提供了另一个避免这种泄漏的工具。用.data()方法，将信息附加到DOM元素。由于这里的数据并非直接保存在扩展属性中（jQuery使用一个内部对象并通过它创建的ID来保存这里所说的数
据），因此永远也不会构成引用循环，从而有效回避了内存泄漏问题。

下面附上 jQuery 源码的相关说法：

// We have to handle DOM nodes and JS objects differently because IE6-7 // can't GC object references properly across the DOM-JS boundary // Only DOM nodes need the global jQuery cache; JS object data is // attached directly to the object so GC can occur automatically

情景【Situation】：

编写通用的输入组件时，子组件要绑定到父组件的某个变量上dataA，当父组件要拿到自组件的值时不能通过this.$children.xxx取值然后付给dataA，

而是父组件可以直接this.dataA就可以取到当前子组件最新值。

任务【Task】：

实现在父组件直接this.dataA就可以取到当前子组件最新值。

行动【Action】：

首先要了解v-model这个指令，许多认真阅读过完整vue文档的同学可能已经知道了关于v-model。

v-model官方给出的说发是：这其实是一个简写的形式，v-model实际执行的是下面的绑定：

<input type="text" v-bind:value="dataA" v-on:input="dataA = $event.target.value" />

v-model是动态绑定值到value，然后监听input的inpit事件获取值后赋给dataA的一个过程。

在说一下input的value属性，在组件内部要定义一个value的props属性，以便能够动态绑定上父组件传过来的值；

组件内部还要做一件事情：

动态计算（获取和设置）currentValue的值，用到了vue的对象的get和set函数；



讲到这里，我们就可以解决上面的问题了；

首先定义一个通用输入组件：
Vue.component('my-component',{      template:'<div><input type="text" type="text" v-model="currentValue"/></div>',      data:function(){          return {              // 双向绑定值-必须              currentValue:this.value          }      },      props:['value'],// 设置value为props属性-必须      computed:{          currentValue: {              // 动态计算currentValue的值              get:function() {                 return this.value;              },             set:function(val) {                  this.$emit('input', val);              }          }      } })
在Html里绑定到vue实例的一个字段上；
<div id="demo_01">      <my-component v-for="(val,key) in postData" v-model="postData[key]"></my-component>      <button @click="showValue">打印对象值</button> </div>
实例里写一个方法

打印一下我们绑定的值；
var demo_01 = new Vue({      el:'#demo_01',      data:{          postData:{              name:'李雷',              age:'80',              describ:'这是一个传奇的人物'          }     },      methods:{          showValue:function(){              console.log(this.postData)          }      } });
是不是以后就不用繁琐冗长的this.$children.xxx取值方式了？

结果【Result】：

提供了有效的解决了关于输入类组件取值方案，并且已经部署实施。


总结：v-model是value和oninput事件的结合，可以动态地对value进行改变，就是如果value被改变了，可以很快地反映到对应的组件当中，改变该组件的value

首先要知道export，import ，export default是什么
ES6模块主要有两个功能：export和import
export用于对外输出本模块（一个文件可以理解为一个模块）变量的接口
import用于在一个模块中加载另一个含有export接口的模块。
也就是说使用export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块（文件）。这几个都是ES6的语法。

export和import（一个导出一个导入）
一个a.js文件有如下代码：

export var name="李四";
在其它文件里引用如下：

import { name } from "/.a.js" //路径根据你的实际情况填写 export default {   data () {     return { }   },   created:function(){     alert(name)//可以弹出来“李四”   } }
上面的例子是导出单个变量的写法，如果是导出多个变量就应该按照下边的方法，用大括号包裹着需要导出的变量：
var name1="李四"; var name2="张三"; export { name1 ,name2 }
在其他文件里引用如下：

import { name1 , name2 } from "/.a.js" //路径根据你的实际情况填写 export default {   data () {     return { }   },   created:function(){     alert(name1)//可以弹出来“李四”     alert(name2)//可以弹出来“张三”   } }
如果导出的是个函数呢，那应该怎么用呢,其实一样，如下
function add(x,y){    alert(x*y)   //  想一想如果这里是个返回值比如： return x-y，下边的函数怎么引用 } export { add }
在其他文件里引用如下：

复制代码
import { add } from "/.a.js" //路径根据你的实际情况填写
export default {
  data () {
    return { }
  },
  created:function(){
   add(4,6) //弹出来24
  }
}
[/codes]
export与export default
看完上面这几个例子，想必你一定了解了如何使用export，import,如果还是不懂可以自己动手试一试。上面讲的是export和import，但是export跟export default 有什么区别呢？如下：

1、export与export default均可用于导出常量、函数、文件、模块等
2、你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用
3、在一个文件或模块中，export、import可以有多个，export default仅有一个
4、通过export方式导出，在导入时要加{ }，export default则不需要

这样来说其实很多时候export与export default可以实现同样的目的，只是用法有些区别。注意第四条，通过export方式导出，在导入时要加{ }，export default则不需要。使用export default命令，为模块指定默认输出，这样就不需要知道所要加载模块的变量名。

var name="李四"; export { name } //import { name } from "/.a.js" 可以写成： var name="李四"; export default name //import name from "/.a.js" 这里name不需要大括号


再看第3条，在一个文件或模块中，export、import可以有多个，export default仅有一个，也就是说如下代码：
var name1="李四"; var name2="张三"; export { name1 ,name2 }

也可以写成如下，也是可以的，import跟他类似。
var name1="李四"; var name2="张三"; export name1; export name2;

一个人如果不想输，就要不断学好眼前的东西，它们将来都会大有用处…

Vue的报错：Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

刚刚运行一下以前的一个Vue+webpack的demo，运行之后没有出现想象中的效果，并且报错

Uncaught TypeError: Cannot assign to read only property 'exports' of object '#

1、浏览器限制

2、跨域（域名，端口不一样都是跨域）

3、XHR（XMLHttpRequest请求）

同时满足三个条件才有可能产生跨域问题。

解决跨域问题方案。

1，从浏览器出发，允许浏览器跨域。

2，从XHR（XMLHttpRequest）出发

    （1）避免发生跨域。使用jsonp，由于jsonp请求是通过script的方式发送的（只有xhr的请求方式才有可能产生跨域问题），所以不会产生跨域问题。Spring MVC实现过程：前台使用ajax的get请求，将dataType设为“jsonp”；服务器创建一个类并继承抽象类AbstractJsonReponseBodyAdvice,最后注解@ControllerAdivece。使用jsonp的弊端，只能使用get方式请求，服务器需要改动代码，发送的不是xhr请求。

    （2）产生跨域后解决。

            从被调用方考虑，有三种情况，分别是服务器实现，nginx配置和apache配置。

            服务器实现需要注意两种情况，简单请求和非简单请求。简单请求是先执行请求再验证，非简单请求是先验证再请求。

          简单请求（比较常见）：方法为get，head，post,请求header里面没有自定义头，Content-Type的值为以下几种 text/plain,multipart/form-data,application/x-www-form-urlencoded。

            非简单请求（比较常见）：put,delect方法的ajax请求，发送json格式的ajax请求，带自定义头的ajax请求。

            简单请求处理方案：在响应头中添加

                Access-Control-Allow-Origin=“允许跨域的url”，即跨省域时，请求头Origin的值，所以一般是获取Origin的值。

                Access-Control-Allow-Method=“*”，允许的方法。

            非简单请求处理方案：在相应头中添加

                Access-Control-Allow-Origin=“允许跨域的url”，即跨域时，可以获取请求头Origin的值。

                Access-Control-Allow-Method=“*”，允许的方法

                Access-Control-Request-Headers=“Content-Type,自定义的header的key”。

             带cookies的跨域解决：在响应头添加

                Access-Control-Allow-Credentials,="true"，允许使用cookies

               ngnix配置：



apache配置：没搞过

若是使用spring框架：使用@CrossOrigin注解既可以实现服务端跨域

官网介绍，vue操作dom的正确姿势

exp
this.getList()//获取数据并初始化表格 this.$nextTick(fuction(){    //表格渲染完毕    })