关于vue3响应式更新的疑问？

Question

例如我创建了一个dataHook

import { ref } from 'vue';

export function dataHook() {
  const v = ref(1);

  return {
    v
  };
}

main.ts中

const app = createApp(App);

const { v } = dataHook();
app.mount('#app');

setTimeout(() => {
  console.log(v);
}, 5000);

页面有个按钮就执行v.value += 1，为什么console.log还是原值1呢？

<Button @click="onClickO">点击hook {{ v }}</Button>

<script setup lang="ts">
import { dataHook } from '@/utils/data';

const { v } = dataHook();

function onClickO() {
  v.value += 1;
}
</script>

Answer 1

跟 Vue 无关，而是很基础的 JS 语法问题。

先直接抛开 Vue，你现在是三个文件对吧？

// shared.js
export function getFoo() {
  const foo = new Foo();
  return { foo };
}

// a.js
import { getFoo } from './shared';
const { foo } = getFoo();

// b.js
import { getFoo } from './shared';
const { foo } = getFoo();

问：此时 a.js 里的 foo，跟 b.js 里的 foo，是同一个对象实例吗？

答：不是，这两个文件里分别调用的 getFoo()，里面都是新 new 出来的，当然是两个对象实例。

再问：那么怎样可以让 a.js 和 b.js 共享同一个对象？

再答：得把它提出来啊：

// shared.js
const foo = new Foo();
export function getFoo() {
  return { foo };
}

Answer 2

import { createApp, computed } from 'vue';
import App from './App.vue';
import { dataHook } from './dataHook';

const app = createApp(App);

const { v } = dataHook();

const vWatcher = computed(() => v.value);

app.config.globalProperties.$vWatcher = vWatcher;

app.mount('#app');

setTimeout(() => {
  console.log(vWatcher.value); // 打印 v 的当前值，不是初始值
}, 5000);

<button @click="v.value += 1">增加 v 的值</button>