Vue数据类型导致的页面渲染问题

首先阐明几个概念，js中有基本数据类型和引用数据类型的区别。基本数据类型包括（Number,String,Boolean,Null,Undefined,Symbol）,引用数据类型则有object、array、function、data。

在Vue的使用中会对基本数据类型自动检测数据并更新页面，而对于引用数据类型则不会引起Vue对页面的更新。

看一下下面的代码，这里面涉及了三个知识点，浅拷贝，引用数据类型，vue页面渲染问题。下面代码中对data1这个数组进行了直接赋值，这只是拷贝了对象的引用地址而已，并没有用在堆内存里生成一个新对象，所以this.data1根本没有更改过，如果改成，const data1 = [], data1=this.data1.这样就可以了。

第二个问题则是data1是一个数组，引用数据类型不会引起Vue对页面的更新，所以只要在这个方法最后加上this.id = activekey - 1;（id是个Number）就可以引起vue的页面渲染。

所以以后再开发过程中只要遇到直接赋值的情况一定要非常小心！！！（个人琢磨，有误之处还望指教！）

    const data1 = this.data1;
    const activeKey = this.data1.length+1;
    data1.push({
        name: '新客人', 
        mobile:'',
        card:'',
        img:''  
    });
    this.activeKey = activeKey;
    this.id = activeKey - 1;