这里的搜索输入框放入了 v-model 指令，用于接收用户的输入信息，方便后面配合列表组件执行检索逻辑，还放入了 ref 属性，用于获取该 标签的元素节点，配合state.inputElement.focus() 原生方法，在切换搜索框状态的时候光标自动聚焦到输入框，增强用户体验。

watch

watch() 函数用来监视某些数据项的变化，从而触发某些特定的操作，使用之前还是需要按需导入，监听 searchValue 的变化，然后触发回调函数里面的逻辑，也就是监听用户输入的检索值，然后触发回调函数的逻辑把 searchValue 值存进我们创建 store 对象里面，方面后面和 Panel.vue 列表组件进行数据通信：

import { reactive, watch } from "@vue/composition-api";import store from "../stores";export default {  setup() {    const state = reactive({      searchValue: "",    });    // 监听搜索框的值    watch(      () => {        return state.searchValue;      },      () => {        // 存储输入框到状态 store 中心，用于组件通信        store.setSearchValue(state.searchValue);      }    );    return {      ...toRefs(state)    };  }};

state management

在这里我们维护一份数据来实现共享状态管理，也就是说我们新建一个 store.js 暴露出一个 store 对象共享 Panel 和 Search 组件的 searchValue 值，当 Search.vue 组件从输入框接受到 searchValue 检索值，就放到 store.js 的 store 对象中，然后把该对象注入到 Search 组件中，那么两个组件都可以共享 store 对象中的值，为了方便调试我们还分别封装了 setSearchValue 和 getSearchValue 来去操作该 store 对象，这样我们就可以跟踪状态的改变。

// store.jsexport default {    state: {        searchValue: ""    },    // 设置搜索框的值    setSearchValue(value) {        this.state.searchValue = value    },    // 获取搜索框的值    getSearchValue() {        return this.state.searchValue    }}

完成上面的 Search.vue 我们紧接着编写 Panel.vue 搜索框组件，继续再 src/components 文件夹下面新建 Panel.vue 文件。

查看更多

lifecycle hooks

Vue3.0 的生命周期钩子和之前不一样，新版本都是以 onXxx() 函数注册使用，同样需要局部引入生命周期的对应模块：

import { onMounted, onUpdated, onUnmounted } from "@vue/composition-api";export default {  setup() {    const loadMore = () => {};    onMounted(() => {      loadMore();    });    onUpdated(() => {      console.log('updated!')    })    onUnmounted(() => {      console.log('unmounted!')    })    return {      loadMore    };  }};

以下是新旧版本生命周期的对比：

beforeCreate -> use setup()created -> use setup()beforeMount -> onBeforeMountmounted -> onMountedbeforeUpdate -> onBeforeUpdateupdated -> onUpdatedbeforeDestroy -> onBeforeUnmountdestroyed -> onUnmountederrorCaptured -> onErrorCaptured

同时新版本还提供了两个全新的生命周期帮助我们去调试代码：

onRenderTrackedonRenderTriggered

在 Panel 列表组件中，我们注册 onMounted 生命周期，并在里面触发请求方法 loadMore 以便从后端获取数据到数据层，这里我们使用的是 axios 网络请求库，所以我们需要安装该模块：

npm install axios --save

封装了一个请求列表数据方法，接口指向的是 Cnode 官网提供的 API ，由于 axios 返回的是 Promise ，所以配合 async 和 await 可以完美的编写异步逻辑，然后结合onMounted 生命周期触发，并将方法绑定到视图层的查看更多按钮上，就可以完成列表首次的加载和点击查看更多的懒加载功能。

// 发送 ajax 请求获取列表数据const loadMore = async () => {  // 获取列表数据  let data = await axios.get("https://cnodejs.org/api/v1/topics", {    params: {      // 每一页的主题数量      limit: 10,      // 页数      page: state.page    }  });  // 叠加页数  state.page += 1;  // 合并列表数据  state.news = [...state.news, ...data.data.data];};onMounted(() => {  // 首屏加载的时候触发请求  loadMore();});

computed

接下来我们就使用另外一个属性 computed 计算属性，跟 Vue2.0 的使用方式很相近，同样需要按需导入该模块：

import { computed } from '@vue/composition-api';

计算属性分两种，只读计算属性和可读可写计算属性：

// 只读计算属性let newsComputed = computed(() => news.value + 1)// 可读可写let newsComputed = computed({  // 取值函数  get: () => news.value + 2,  // 赋值函数  set: val => {    news.value = news.value - 3  }})

这里我们使用可读可写计算属性去处理列表数据，还记得我们上一个组件 Search.vue 吗，我们可以结合用户在搜索框输入的检索值，配合 computed 计算属性来筛选对我们用户有用列表数据，所以我们首先从 store 的共享实例里面拿到 Search.vue 搜索框共享的 searchValue ，然后利用原生字符串方法 indexOf 和 数组方法 filter 来过滤列表的数据，然后重新返回新的列表数据 newsComputed，并在视图层上配合 v-for 指令去渲染新的列表数据，这样做既可以在没搜索框检索值的时候返回原列表数据 news ，而在有搜索框检索值的时候返回新列表数据 newsComputed。

import store from "../stores";export default {  setup() {    const state = reactive({      // 原列表数据      news: [],      // 通过搜索框的值去筛选后的新列表数据      newsComputed: computed(() => {        // 判断是否输入框是否输入了筛选条件，如果没有返回原始的 news 数组        if (store.state.searchValue) {          return state.news.filter(item => {            if (item.title.indexOf(store.state.searchValue) >= 0) {              return item;            }          });        } else {          return state.news;        }      }),      searchValue: store.state    });  }}