Vue中mount钩子将props赋值给v-model关联变量后，修改为何影响props？

嘿，这个问题我之前开发Vue组件时也踩过坑，其实核心原因是JavaScript里引用类型的赋值逻辑在作祟～

问题根源 #

在JS中，数组和对象都属于「引用类型」，和数字、字符串这类「基本类型」不一样。基本类型赋值时是直接复制值，但引用类型赋值时，复制的其实是指向内存中数据的地址指针，而不是数据本身。

你在mounted钩子中写的this.component_value = this.initial_value，本质上是让component_value和initial_value指向了内存中同一个数组。所以不管你修改哪一个变量，操作的都是同一块内存里的数据，另一个自然会跟着变化。

举个最简单的例子就能明白：

let a = [1, 2, 3];
let b = a;
b.push(4);
console.log(a); // 输出 [1,2,3,4]

解决办法 #

要避免这种情况，你需要创建一个原数组的浅拷贝（如果数组里没有嵌套对象/数组，浅拷贝就足够了），常见的方式有这几种：

1. 扩展运算符（最简洁的方式）：

mounted(){
  this.component_value = [...this.initial_value];
}

2. Array.slice()方法：

mounted(){
  this.component_value = this.initial_value.slice();
}

3. Array.from()方法：

mounted(){
  this.component_value = Array.from(this.initial_value);
}

如果你的initial_value数组里还嵌套了对象或其他数组，那浅拷贝就不够了，需要用深拷贝。常用的简单方式是JSON.parse(JSON.stringify())，但要注意它不能处理函数、Symbol、循环引用这类特殊情况：

mounted(){
  this.component_value = JSON.parse(JSON.stringify(this.initial_value));
}

内容的提问来源于stack exchange，提问作者Ozal Zarbaliyev