watchEffect 与 watch 监听触发

1. 业务场景

页面监听某值的变化，进而请求列表数据接口。首次使用watchEffect进行实现：

watchEffect(() => {
  if (store.metaSearchValue) {
    queryData(); // 查询列表数据
  }
});

问题1：点击页面发现，当输入框的值发生改变时，回调函数会立即执行，实际上应该在按下回车键或者点击搜索按钮时才触发查询。

2. 问题原因及修复

第一次修改：

watch(
  () => store.metaSearchValue,
  val => {
    if (val) {
      queryData();
    }
  }
);

问题2：没有添加强制立即执行时，在监听的属性没有发生改变的情况下，刷新页面，页面数据丢失。

第二次修改：

watch(
  () => store.metaSearchValue,
  val => {
    if (val) {
      queryData();
    }
  }, { immediate: true }
);