vue 使用 watch 监听 computed计算属性实现本地搜索及升序排序

一，watch 监听实现模糊搜索

1.本地数据

2，js 代码

 watch: {
    keyValue: {
      immediate: true, // 页面初始化时候执行, keyValue 为 undefined 将 filPersons = persons
      handler(val) {
        // 拿到 oldValue 做过滤 和 persons 数组中的值做一个比对
        // 将拿到的值重新赋值给 filPersons
        this.filPersons = this.persons.filter(item => {
          return item.name.indeOf(val) !== -1
        })
      }
    }
  },

二，用计算属性实现本地模糊搜索及排序

computed: {
    filPersons() {
      // 原理与监听一致
      const arr = this.persons.filter(item => {
        return item.name.indeOf(val) !== -1
      })
      // 判断是否需要排序
      if(type) {
        // 利用数组的 sort 方式排序
        arr.sort((a, b) => {
          return this.type == 1 ? b.age-a.age : a.age-b.age
        })
      }
      return arr // 将 arr 得到的结果返回给 filPersons
    }
  }