Vue组件方法中通过变量修改数组数据的问题

你遇到的这个问题本质是JavaScript引用类型的赋值机制导致的：当你执行var a = this.thisisarray时，变量a拿到的是原数组['a','b']的内存引用，而不是数组的副本。之后你给this.thisisarray重新赋值了一个新数组[10]，这相当于让this.thisisarray指向了一块新的内存地址，但a仍然牢牢盯着原来的那块内存，自然不会同步更新。

几种可行的解决方案 #

1. 不替换原数组，而是修改原数组的内容 #

如果业务场景允许，不要直接给this.thisisarray赋值新数组，而是通过数组的变异方法修改原数组，这样a的引用不会变，就能同步拿到更新后的数据：

created() {
  var a = this.thisisarray;
  // 用splice清空原数组并添加新元素
  this.thisisarray.splice(0, this.thisisarray.length, 10);
  console.log('a expected ' + this.thisisarray + ',but ' + a); // 现在输出一致
}

Vue本身也监听了数组的这些变异方法（比如splice、push、pop等），能保证视图的响应式更新。

2. 创建全局方法时，传递数组的父对象+属性名，而非直接传递数组变量 #

如果必须替换整个数组，你可以在全局方法里通过修改原Vue实例的属性来更新数组，之后手动让a重新指向新的引用：

// 全局方法示例
window.updateArray = function(vm, propName, newArr) {
  vm[propName] = newArr;
};

// 在组件里使用
created() {
  var a = this.thisisarray;
  // 调用全局方法更新数组
  window.updateArray(this, 'thisisarray', [10]);
  // 手动让a指向新的数组引用
  a = this.thisisarray;
  console.log('a expected ' + this.thisisarray + ',but ' + a); // 输出一致
}

3. 使用Vue的响应式数据特性（推荐） #

如果你的变量a需要和组件的响应式数据保持同步，可以把a改成计算属性，利用Vue的依赖追踪自动同步：

data() {
  return {
    thisisarray: ['a','b']
  };
},
computed: {
  a() {
    return this.thisisarray;
  }
},
created() {
  this.thisisarray = [10];
  console.log('a expected ' + this.thisisarray + ',but ' + this.a); // 输出一致
}

总结 #

核心要记住：引用类型的变量存储的是内存地址，不是实际数据。当你给原变量赋值新的引用时，旧的引用变量不会自动指向新地址——要么修改原引用的内容，要么手动更新旧变量的引用。

内容的提问来源于stack exchange，提问作者Mn Pb