通过computed和watch实现基本过滤

watch

new Vue({
        el: "#root",
        data: {
          keyWord: "",
          persons: [
            { id: "001", name: "马冬梅", age: 17, sex: "女" },
            { id: "002", name: "周冬雨", age: 18, sex: "女" },
            { id: "003", name: "周杰伦", age: 19, sex: "男" },
            { id: "004", name: "周杰伦", age: 20, sex: "男" },
          ],
          //最开始是空字符串，空字符串都匹配
          filPersons: [],
        },

        watch: {
          keyWord: {
            //刷新页面就执行一次空字符串，全部匹配显示数据，
            immediate: true,
            handler(newValue) {
              //将得到的新数组覆盖给原来的空数组
              this.filPersons = this.persons.filter((p) => {
                return p.name.indexOf(newValue) !== -1;
              });
            },
          },
        },
      });

computed

watch能实现的不含有异步操作的功能computed也能实现，且更简单。
computed执行的两种情况：
1.程序一开始运行执行一次；
2.computed计算所依赖的值发生改变的时候运行
所以当keyWord发生改变的时候computed运行

 new Vue({
        el: "#root",
        data: {
          keyword: "",
          persons: [
            { id: "001", name: "周冬雨", age: 20, sex: "女" },
            { id: "002", name: "马冬梅", age: 19, sex: "女" },
            { id: "003", name: "周杰伦", age: 21, sex: "男" },
            { id: "004", name: "温兆伦", age: 22, sex: "男" },
          ],
        },
        computed: {
          // filPersons: {
          //   get() {
          //     return this.persons.filter((p) => {
          //       if (p.name.indexOf(this.keyword) !== -1) return p;
          //     });
          //   },
          //   },
          //如果只有get可以简写成函数的形式
          filPersons() {
            return this.persons.filter((p) => p.name.indexOf(this.keyword) !== -1);
          },
        },
      });