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

  • Z时代
  • 2024-03-05
  • 分类：IT

例如我创建了一个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>

回答：

跟 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 };
}

回答：

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>

以上是 关于vue3响应式更新的疑问？ 的全部内容， 来源链接： utcz.com/p/934908.html

回到顶部