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

Posted 2021-09-27 千里独行

首先阐明几个概念，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;