vue data中的引用数据类型作为函数参数的问题

Question

先看代码

<template>
    <el-button @click="add(baseArray)">You clicked me 9999 times.</el-button>
</template>
<script>
export default {
    data() {
        return {
            baseArray: []
        }
    },
    methods: {
        add(arr) {
            if (!arr.length) {
                arr.push(...Array(100).keys());
            } else {
                arr = [];
            }
            console.info(this.baseArray);
        }
    }
}
</script>

为什么打印的结果不是空数组？
我将 arr = [] 改成

arr.length = 0;

或者

arr.splice(0, arr.length);

打印就是空数组，有人能解释下吗？

Answer 1

所以对于参数是引用类型的情况，参数传递的实际上是这个对象的地址
arr = []实际上是开辟了一个新的空间，新的地址，所以原数据没有发生改变
简单概括：
函数的参数是值传递，对象类型作为参数的时候传递的是地址（指针）的值，而不是对象本身堆内存中的value

所以在这种场景，函数内部用参数去修改对象，那么查找到的还是原对象，因为指向相同，所以修改的话原对象也受影响

如果新实例化一个对象赋值给改指针，那么指针指向的就是一个全新的对象了，和原来指向的对象失去联系

Answer 2

1. vue 从 data 返回的数组，原生方法是被重写了的。
2. 直接修改了 data 直接取 this.XXX 比较好。
3. 传入参数，当指针指向其他位置即 arr = [] 时候，这就是简单的语法，引用类型。当然没法改变原数据。
4. 视图不刷新是因为，vue 只重写了原生方法，没重写原生属性赋值的后续操作。也就是说，length = 0 的操作，确实改变了 data.arr ，但是vue 它不知道。所以不要用这种方法改变原数组。