vue3中setup使用ref视图没有发生变化，记录自己的坑

    <van-nav-bar v-else :title="title" left-text="返回" left-arrow>
      <template #right>
        <van-icon @click="search" name="search" size="18" />
      </template>
    </van-nav-bar>
    <van-search
      v-show="showSearch"
      v-model="value"
      show-action
      placeholder="请输入搜索关键词"
      @search="onSearch"
      @cancel="onCancel"
    />

代码很简单，就是想通过按钮来控制search插件的显示。

在 Vue 3.0 中，我们可以通过一个新的 ref 函数使任何响应式变量在任何地方起作用

	let showSearch = ref(false)
    const search = () => {
      showSearch= true
      console.log(showSearch, 'true')
    }

原本以为代码是没有什么，而且打印也能看到showSearch的值发生变化，但视图没有任何响应。百度看了，也没看出问题。（估计是问题太低级了，这里是记入自己的坑）

看了vue文案的案例:

import { ref } from 'vue'

const counter = ref(0)

console.log(counter) // { value: 0 }
console.log(counter.value) // 0

counter.value++
console.log(counter.value) // 1

才后知后觉，是不是少了value这个属性没用上去。

	let showSearch = ref(false)
    const search = () => {
      showSearch.value = true
      console.log(showSearch, 'true')
    }

发现可以正常控制插件的显示了。