簡要比較使用vue實現表格數據篩選的三種方式：@event、watch、computed

需求描述

在前端頁面實現：根據輸入的關鍵詞，篩選指定數據等於關鍵詞的數據行，並更新表格

直接看總結

基本思路

1. 在輸入框中綁定input變量
2. 根據input值過濾原始數組；input為空則返回原始數組的副本；通過lodash插件實現防抖
3. 將得到的新數組賦予表格綁定的model對象

方式 1——綁定按鈕事件

思路描述：將步驟2封裝成查詢方法，並將input作為參數傳入，然后綁定到按鈕的點擊事件

JS 實現：

data() {
  return {
    input: "", // 實時關鍵詞
    oldInput: "", // 上一次使用篩選功能時的關鍵詞
    origData: [], // 保存請求到的原始數據
    tableData: [], // 表格展示的數據
  };
}，
created() {
  this.setOrigData();
  this.setTableData(this.origData); // 第一次加載時需手動添加表格數據
},
methods: {
  // 獲取服務端數據並將原始數據保存副本
  setOrigTableData() {
    this.origData = getServerData();
  },
  // 設置表格model
  setTableData(data) {
    this.tableData = data;
  },
  // 定義輸入處理，並設置防抖功能
  handleInput: _.debounce(function (newInput) {
    this.queryData(newInput);
  }, 500),
  // 前端查詢，篩選符合條件的原始數據並更新表格model，清空關鍵詞時復制上一次請求服務端返回的數據副本
  queryData(newInput) {
    if (this.oldInput !== newInput) { // 關鍵詞變化時才重新篩選
      this.oldInput = newInput; // 保存本次的關鍵詞
      if (!this.origData) this.setOrigData(); // 原始數據不存在時重新請求
      if (newInput) {
        this.setTableData(
          this.origData.filter(row => row.val === newInput && row)
        );
      } else {
        this.setTableData(JSON.parse(JSON.stringify(this.origData)));
      }
    //} else {
    //  console.log("不需要修改表格數據");
    //}
  },
}

優點：可以設置防抖或節流
缺點：表格第一次加載時，必須手動添加表格數據；代碼量太大

評價：比較傳統的處理方式，對全部過程都能把握，可控性較強；小改進，將方法綁定到輸入框的input事件，輸入后自動篩選，可以簡化用戶操作

方式2——watch偵聽關鍵詞變化

思路：基本思路與方式2相同，區別是將事件綁定替換為使用watch偵聽input的變化，並自動調用查詢方法

JS 實現：

data() {
  return {
    input: "", // 實時關鍵詞
    origData: [], // 保存請求到的原始數據
    tableData: [], // 表格展示的數據
  };
}，
created() {
  this.setOrigData();
  this.setTableData(this.origData); // 第一次加載時需手動添加表格數據
},
watch: {
  input(val) {
    this.handleInput(val);
  },
},
methods: {
  // 獲取服務端數據並將原始數據保存副本
  setOrigTableData() {
    this.origData = getServerData();
  },
  // 設置表格model
  setTableData(data) {
    this.tableData = data;
  },
  // 定義輸入處理，並設置防抖功能
  handleInput: _.debounce(function (newInput) {
    this.queryData(newInput);
  }, 500),
  // 前端查詢，篩選符合條件的原始數據並更新表格model，清空關鍵詞時復制上一次請求服務端返回的數據副本
  queryData(newInput) {
    if (!this.origData) this.setOrigData(); // 原始數據不存在時重新請求
    if (newInput) {
      this.setTableData(
        this.origData.filter(row => row.val === newInput && row)
      );
    } else {
      this.setTableData(JSON.parse(JSON.stringify(this.origData)));
    }
  },
}

優點：關鍵詞變化后自動執行，不需要判斷是否發生改變；可以設置防抖或節流
缺點：表格第一次加載時，必須手動添加表格數據；代碼量還是較大

方式3——computed屬性

思路：通過創建computed屬性，自動更新tableData

JS 實現：

data() {
  return {
    input: "", // 實時關鍵詞
    origData: [], // 保存請求到的原始數據
  };
}，
computed: {
  tableData() { // 表格展示的數據
    if (this.input) { // 關鍵詞非空，執行篩選
      return this.origData.filter(row => row.val === this.input && row)
    } else { // 關鍵詞為空，顯示原始數據
      return JSON.parse(JSON.stringify(this.origData));
    }
  },
},
created() {
  this.setOrigData();
},
methods: {
  // 獲取服務端數據並將原始數據保存副本
  setOrigTableData() {
    this.origData = getServerData();
  },
}

優點：響應式自動篩選或者重新顯示全部原始數據，實現代碼少；表格首次加載不需要手動綁定數據，計算屬性會自動更新
缺點：無法設置防抖或節流

評價：計算屬性的作用是根據依賴屬性響應式地更新指定屬性，因此，依賴屬性的每次更新都會自動觸發計算屬性的更新，如果設置防抖，由於計算過程是異步進行的，無法同步獲取計算結果；而若是使用Promise封裝防抖功能，則相當於依賴屬性的每次更新都會自動生成一個新的Promise對象，使得原本的防抖功能失效

總結

• 綁定事件的實現思路最直接，也因此代碼量最多，需要實現對所有過程的控制
• 通過watch偵聽可以省去部分判斷邏輯，代碼量相對較少；適用於偵聽系統或組件的狀態變化，並作出反應，只適合偵聽僅有單個依賴屬性的場景，多依賴的場景請使用計算屬性
• Vue原生的計算屬性無法設置防抖或節流，要實現防抖功能請使用watch代替；適用於響應式更新存在依賴關系的屬性，尤其適合依賴項多的場景，比如官方示例的firstName、familyName和fullName，fullName依賴前兩項，此時使用計算屬性更方便且依賴關系清晰