浪花 - 搜索标签过滤及取消搜索

需求分析

• 用户在搜索框内输入要搜索的标签时，下方的可选标签列表根据用户搜索的标签实时更新
• 实现根据关键词过滤标签的功能

1. 使用 ref() 将标签列表声明为响应式对象

• 原因：输入标签时需要过滤标签列表，列表要响应用户的搜索，因此将标签列表声明为可响应对象
• 方法：使用响应式 API - ref() 

ref() 的介绍

• 接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 .value
• ref 对象是可更改的：可以为 .value 赋予新的值
• ref 对象是响应式的：所有对 .value 的操作都将被追踪，并且写操作会触发与之相关的副作用

// 标签列表
const originalTagList = [
  {
    text: '性别',
    children: [
      { text: '男', id: '男' },
      { text: '女', id: '女' },
    ],
  },
  {
    text: '学习方向',
    children: [
      { text: 'Java', id: 'Java' },
      { text: 'C++', id: 'C++' },
      { text: 'Python', id: 'Python' },
    ],
  },
  {
    text: '本科生',
    children: [
      { text: '大一', id: '大一' },
      { text: '大二', id: '大二' },
      { text: '大三', id: '大三' },
      { text: '大四', id: '大四' },
    ],
  },
  {
    text: '研究生',
    children: [
      { text: '研一', id: '研一' },
      { text: '研二', id: '研二' },
    ],
  },
  { text: '福建', disabled: true },
];


let tempTagList = ref(originalTagList);

2. 定义搜索标签过滤的 onSearch() 方法

• 数据绑定
  • <vant-search> 组件的 v-model 用来绑定搜索框输入数据
  • 注意修改 TreeSelect 组件绑定的数据为过滤后的数据 tagList，而不是原数据 originalTagList！！（在这里找了好久）

  <van-search
      v-model="searchText"
      show-action
      placeholder="请输入要搜索的标签"
      @search="onSearch"
      @cancel="onCancel"
  />

• 根据用户输入过滤标签

踩坑记录：

• originalTagList 有两层嵌套，要过滤的是 children
• 修改的是临时变量，要先拷贝一份，不要把原数据给改了

/**
 * 搜索标签过滤
 * @param val
 */
const onSearch = (val) => {
  tagList.value = originalTagList.map(parentTag => {
    const tempChildren = [...parentTag.children];
    const tempParentTag = {...parentTag};
    tempParentTag.children = tempChildren.filter(item => item.text.includes(searchText.value));
    return tempParentTag;
  });
};

• 查看页面效果

3. 定义取消搜索的 onCancel() 方法

• 取消搜索
  • 清空搜索框
  • 用户搜索标签时标签列表进行了过滤展示，因此取消搜索时要还原可选标签列表
• 实现方式：将标签列表 tagList 还原为备份的原始标签列表 originalTagList 即可

/**
 * 取消搜索
 */
const onCancel = () => {
  searchText.value='';
  tagList.value=originalTagList;
};

附：Vue 的响应式系统是如何工作的？（为什么要使用 ref）

•  ref 的值发生改变时，Vue 会自动检测到这个变化，并且相应地更新 DOM，这是通过一个基于依赖追踪的响应式系统实现的
• 当一个组件首次渲染时，Vue 会追踪在渲染过程中使用的每一个 ref。然后，当一个 ref 被修改时，它会触发追踪它的组件的一次重新渲染。
• 在标准的 JavaScript 中，检测普通变量的访问或修改是行不通的。然而，我们可以通过 getter 和 setter 方法来拦截对象属性的 get 和 set 操作
• ref 对象的 .value 属性给予了 Vue 一个机会来检测 ref 何时被访问或修改。在其内部，Vue 在它的 getter 中执行追踪，在它的 setter 中执行触发