Vue.js中watch使用问题：添加新ticker时watch未触发仅刷新后生效

Vue的watch默认是浅监听机制：当你用push这类数组变异方法给tickers添加元素时，数组本身的引用地址并没有发生改变，所以watch不会触发回调。虽然Vue的响应式系统能识别数组变异方法并更新视图，但watch的浅监听只会检测到数组引用的变化，对内部元素的增减无感知。

提供两种常用方案，按需选择：

方案1：开启深度监听 #

给watch配置deep: true，让它能检测数组内部的变化：

watch: {
  tickers: {
    handler() {
      localStorage.setItem("crypto-list", JSON.stringify(this.tickers));
      localStorage.setItem("crypto-name-list", JSON.stringify(this.namesT));
      console.log('Add to localStorage');
    },
    deep: true
  }
}

这种方案适合需要监听数组内对象属性变化的场景，但会有一定性能开销。

方案2：替换数组引用 #

修改addClick方法，通过创建新数组的方式更新tickers和namesT，让数组引用发生改变：

addClick() {
  const currentTicker = {
    name: this.ticker,
    price: "25",
  };
  const upperName = currentTicker.name.toUpperCase();

  if (!this.namesT.includes(upperName)) {
    this.exist = false;
    // 用扩展运算符创建新数组
    this.namesT = [...this.namesT, upperName];
    this.tickers = [...this.tickers, currentTicker];
    console.log(this.namesT);
    console.log('add Ticker');
    this.updateInterval(currentTicker.name);
  } else {
    console.log("This name already exist");
    this.exist = true;
  }
}

这种方式更轻量，只是单纯添加元素的话推荐用这个方案，不需要额外配置watch。

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