Vue 中 Watcher 的替代品

Question

除了使用 watcher 之外，Vue 中还有什么方法可以在更新时显示数据吗？就像 React 中的 useEffect 会在数据更改时呈现一样，我们是否可以在不使用 Watcher 的情况下执行类似的操作？因为观察者正在占用专用资源来持续监视状态。

我想在用户在其他页面输入相同的用户名后立即在左侧显示用户名。

Vue 中 Watcher 的替代品

Answer 1

在普通 js 中，您可以创建一个代理并使其在更改时执行代码。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy

Answer 2

computed

可以追踪

ref

变化。
这是例子。

输入

aaaa

输入字段。

const { createApp, ref, computed } = Vue

createApp({
  setup() {
    const value = ref('')
    const userList = [{ user: 'aaaa' }, { user: 'bbbb' }]
    
    const user = computed(() => userList.find((el) => el.user === value.value))
    
    return {
      value,
      user,
    }
  }
}).mount('#app')

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
  <input v-model="value" />
  {{ user }}
</div>

Answer 3

计算属性是为此而设计的： 有关计算属性的 Vue 文档