前端 - 关于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

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>

Answer 2

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

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

// shared.jsexport function getFoo() {  const foo = new Foo();  return { foo };}// a.jsimport { getFoo } from './shared';const { foo } = getFoo();// b.jsimport { getFoo } from './shared';const { foo } = getFoo();

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

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

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

再答：得把它提出来啊：

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