关于vue3响应式更新的疑问？-灵析社区
sumous_01例如我创建了一个`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`呢？ 点击hook {{ v }} import { dataHook } from '@/utils/data'; const { v } = dataHook(); function onClickO() { v.value += 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 };
}